🔘
How do I implement Smartrr using a Buy Button?
Buy buttons are used to easily implement subscriptions for one-click checkout on non-product-detail pages (ex—homepage, landing pages)
Shopify’s native Buy Button feature, powered by the Shopify JS Buy SDK, does not natively support subscription features. As a solution, a Smartrr Buy Button can be used instead.
A Smartrr Buy Button comes with various modular parts of the product form (variants, Subscription Programs, quantity and CTA button) which can be enabled or disabled as desired. A Smartrr Buy Button can also be used in tandem with the Shopify Buy Button—allowing you to use native Shopify features while also using the Smartrr’s features for handling the product form and within the cart.sd
In order to use a Smartrr Buy Button, you’ll first need to create a custom app in Shopify with storefront access to generate a unique API access token.
In your Shopify admin, navigate to Apps and click on Develop apps.
If not already, authorize your store to develop custom apps. Once authorized, click on Create an app.
Give your custom app a name and provide an app developer email. We recommend naming your app "Smartrr Buy Button". Click Create app.
Configure your custom app's Storefront API scopes:
Check all the boxes allowing access your storefront data using the Storefront API:
Click Save.
Within your custom app settings, click on API Credentials to create a Storefront API access token. Click Install app.
Note: Storefront API access tokens are not secret. You can place them in any JavaScript file or any public HTML document.
You will use this token in the below section, replacing all instances of
<PRIVATE APP ID> with your unique access token.The load script can be placed on any page. Be sure to replace
<YOUR SHOP>.myshopify.com with your Shopify store URL and <PRIVATE APP ID> with your unique token generated above.Also be sure to replace
<PATH TO YOUR smartrr_buy_button.js FILE> in all instances with your own path. When the Smartrr Buy Button loads, it will check for
<div>s that match data-smartrr-form-id="product-” to find all product forms that need to be generated. You may have as many forms and copies of the same product so long as the data-smartrr-form-id is unique. The data-smartrr-form-id can be anything so long as it starts with product-. Below is an example:The product ID needs to be the same product ID used in Shopify. To convert a product ID to a Shopify Storefront ID, you can use the following code:
If the
<div>s are being dynamically generated, you may rerun the below function which will only create new forms for the ones that hadn’t been previously created.window.smartrr.renderProducts()
The window.smartrr Object
The window.smartrr object contains all the data stored by a Smartrr Buy Button:
Events
The Smartrr Buy Button can call or subscribe to the below events:
- 1.UpdateCart: Called when there is a change to the cart. Data:
{ cart: SmartrrCart; } - 2.RefreshCart: Called when the cart refreshes to check if any updates to the cart were made on other open tabs. Data:
{ cart: SmartrrCart; } - 3.ChangeVariant: Called when a new product variant is selected. Data:
{ variantId: VariantId; } - 4.ChangeGroup: Called when a new Subscription Program Group is selected (Ex: One-time purchase/Subscribe & Save). Data:
{ groupId: SellingPlanGroupId; } - 5.ChangePlan: Called when a new Subscription Program is selected from within a Group. (Ex: Deliver Every 3 Weeks). Data:
{ planId: SellingPlanId; } - 6.QuantityChange: Called when the product quantity is changed. Data:
{ quantity: Quantity; }
To subscribe or call to an event, you may use window.smartrr.events. Example below:
Function declaration:
- id: the unique form ID of the form you wish to subscribe to. UpdateCart and RefreshCart are broadcast events so you may use any ID. (example: "merchant" )
- callback: if this is added then you will subscribe and function will only be called when this event fires for this specific ID
- data: if func is null and this is added, you will invoke the callbacks present for this event and ID
Function: window.smartrr.getSpecificProductsFromStore
The below function can be used to get product information from Shopify, which also includes Subscription Program information.
Note: this function may call an async function so the the callback will be called if/when that function returns.