Adding the Stay AI Subscription Purchase Option to Your PDPs
Go to the store themes in Shopify by navigating to Sales channels > Online Store > Themes.
2. Duplicate your live theme in the Online Store
Important Note
Please duplicate the live theme, which has existing buy boxes so that the duplicate theme can be customized from there. After editing the duplicate theme, you must publish it so your live site reflects the changes.
3. Open the product template where the buy box will be displayed.
On the top panel in your theme customizer, open the site navigation dropdown and click Products.
After clicking Products, you will see the product templates available, where the buy box will be displayed. Click your desired product template. In the above example, there is only one product template, which is the Default.
4. Once you’re in the product template, look to the left-hand navigation menu. In this example, it is the "Product information" dropdown. Click “+ Add block” at the bottom of the dropdown menu. Then select Stay AI Subscriptions to add to the section.
5. The buy box is now added to the end of the section. This will add the purchase options to all of the products using this template. The position of the widget can be adjusted by grabbing the block and moving it up or down.
Accessing the Stay AI Subscriptions Block Configuration
From your Shopify admin, go to:
Sales channels > Online store > Themes
Select the theme you’re working in
Click Customize > Product > Choose your template (Default product or something else, if you have a custom template). From there, you can select the Stay AI Subscriptions block from the left-hand panel, under Template. You will be able to see all of the available settings for the widget, including label content, colors, font and layout.
Customizing the Stay AI Subscriptions Block
Below, we will walk through each of the possible customizations for the purchase widget.
Show Purchase Options
By default, the “Show purchase options” setting checkbox is selected. This indicates that the buy box will display on the product pages. If you deselect the setting, the buy box will be hidden from the product page.
Purchase Type Labels
These text fields allow you to customize the copy of the labels.
Purchase type label - by default, the purchase options label will display as "Purchase Type". If left blank, the label will be hidden.
One-time purchase label - by default, the one-time purchase option label is "One-Time Purchase".
Subscription label - by default, the subscription purchase option label is "Subscribe & Save".
NOTE: The savings displayed on the subscription label are calculated by applying the discount set in the Stay AI selling plan to the price of the product set in Shopify.
Set Subscription as Default Purchase Option
By default, this checkbox is selected, which makes subscription as the default purchase option.
Deselecting it makes one-time purchase the default purchase option upon page load.
Keep Frequency Selector Always Visible
By default, this checkbox is deselected, which hides the frequency selector on the product page if the subscription purchase option is not selected. If selected, the frequency dropdown will always be visible, regardless of the selected purchase type.
Frequency Heading
The default copy for the Frequency heading is "Frequency:".
If left blank, the label will be hidden.
Subscription Details Box Settings
The Subscription Details Box settings configure how the merchant can include information on the subscription program on the product page. Customers can hover over the Subscriptions Details icon/text to reveal and read the subscriptions details modal.
Show subscription details box - by default, this checkbox is selected to display the details box.
Subscription details box hover text - by default, the hover text copy is "Subscription Details".
SVG for Subscription Details Icon - the merchant can input the SVG for the icon that will display to the left of the Subscription details box “button” text.
Subscription details box title - by default, the modal header copy is "How subscriptions work".
Subscription details box content - by default, the copy is general subscription benefits.
Widget Layout
Customize the arrangement and appearance of the buttons to suit the merchant needs.
Display the Subscription Label First
Check this option to prioritize the subscription as the purchase option displayed first.
If deselected or unchecked, one-time purchase will show as the first purchase option.
Select the widget layout
Switch between these button layouts:
Stacked buttons with radio buttons
Stacked buttons without radio buttons
Side by side buttons
Typography
Adjust the font settings to match your brand.
Select the font
Text color
Font size
Background and Border
Adjust these settings to match your brand.
Border color - this controls the border color of the purchase option buttons
Selected background color - this controls the background color of the selected purchase option
Selected text color - this controls the text color for the selected purchase option
Accent color - this controls the color of the radio buttons.
Border width - this controls the width of the purchase type buttons' borders
Border radius - this controls the roundedness of the purchase type buttons' corners; the higher the radius number is, the rounded the corners will be
Voila! Once the customizations are to your liking, you're ready to publish this working theme as the live theme of your Shopify store.