This example theme is provided as a starting point for storefront development. Please ensure that you are following web development & security best practices while developing your storefront experience.
This theme was created to show off some of what is possible using the SDK. This example theme is based off of the Shopify Refresh (version 8.0.0) theme. This theme is very similar to Dawn (version 8.0.0) but with styling changes. The layout of the files and folders in this repo should match the Shopify themes making it easy to compare to standard Shopify themes.
View Theme Example
Most of the examples will require a customer to be authenticated and should be shown on the customer's account page.
View Login Example
Import Recharge SDK script and call init in theme.liquid
For additional details please see Script Setup documentation.
In these examples most components login independently. This allows the components to be a little more portable. For additional details on auth please see the Auth documentation.
In the following examples we show you how you could update the customer account page to render additional information about subscriptions and orders they have made via Recharge. In these examples we replace the main-account.liquid template with our own rc-account.liquid by updating the account.json file with rc-account.
As you can see rc-account.liquid renders several of our own snippets for subscriptions, orders, and addresses.
The rc-account-subscriptions.liquid snippet shows how you can render a list of subscriptions. It also demonstrates how to implement the following user actions:
- Pause a subscription
- Cancel an active subscription
- Activate a cancelled subscription
- Change subscription charge date (via rc-datepicker.liquid)
- Edit subscription address (via rc-edit-sub-address.liquid)
- Swap subscription products (via rc-swap-product.liquid)
- Update subscription frequency (via rc-update-frequency.liquid)
Change Subscription Charge Date Example
Swap Subscription Products Example
Change Subscription Frequency Example
The rc-orders.liquid snippet shows how you can render a list of orders.
The rc-addresses.liquid snippet shows how you can render a list of addresses associated with their subscriptions. It also demonstrates how to implement the following user actions:
Update Address Example
Render a widget that will give authenticated customers the ability to add products to their next subscription delivery.
Add to Next Order Example
In this example we render the rc-widget.liquid snippet inside of main-product.liquid. For more details of what the widget is doing see rc-widget.js.