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, Selling Plans, 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.
Creating an API Token
In order to use a Smartrr Buy Button, you’ll need to create a private app in Shopify with storefront access to generate a unique API access token.
- In your Shopify admin, navigate to ‘Apps’ and scroll down to the bottom of the page. Click on ‘Manage Private Apps’
- Click ‘Create new private app’
- Name your private app and provide an emergency developer email. We recommend naming your app “Smartrr Buy Button”. Under ‘Storefront API’ check the box to allow this private app to access your storefront data using the Storefront API. Click ‘Save’.
- Once your private app has been generated you will see your newly generated Storefront API Access Token at the bottom of the page. Note—Storefront API access tokens are not secret. You can place them in a 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 token.
Scripts
Load Smartrr Script
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 in the previous step.
Example 1: Using Shopify’s cart:
Example 2: Using Smartrr’s cart:
Configuration Options
Rendering the Product Form
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 Render Product function which will only create new forms for the ones that hadn’t been previously created.
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:
- UpdateCart: Called when there is a change to the cart. Data: { cart: SmartrrCart; }
- RefreshCart: Called when the cart refreshes to check if any updates to the cart were made on other open tabs. Data: { cart: SmartrrCart; }
- ChangeVariant: Called when a new product variant is selected. Data: { variantId: VariantId; }
- ChangeGroup: Called when a new Selling Planing Group is selected (Ex: One-time purchase/Subscribe & Save). Data: { groupId: SellingPlanGroupId; }
- ChangePlan: Called when a new Selling Plan is selected from within a Group. (Ex: Deliver Every 3 Weeks). Data: { planId: SellingPlanId; }
- 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 from Shopify which also include Selling Plan Group information. Note—this function may call an async function so the the callback will be called if/when that function returns.
Map refers to JS map.