Skip to main content
All CollectionsSetting Up
Adding the "Subscribe & Save" Block to Your PDPs
Adding the "Subscribe & Save" Block to Your PDPs

This article will walk you through each mission-critical step of adding the "Subscribe & Save Block" to your PDPs.

Ashley Kim avatar
Written by Ashley Kim
Updated over a month ago

Adding the "Subscribe & Save" Block to Your PDPs

  1. Go to the store themes in Shopify by navigating to Sales channels > Online Store > Themes.

2. Duplicate your live theme in the Online Store

Markup 2024-07-01 at 14.37.37.png

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 "Subscribe & Save Block".

5. With the "Subscribe & Save Block" selected, navigate to the settings panel on the right hand side. Toggle "Enable Buy Box" to ON.

6. You should now see the subscription or one time purchase options in the preview. 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.

Customizing the Stay AI Subscriptions Block

Below, we will walk through each of the possible customizations for the purchase widget.

Buy Box Layout

  • Determines the format of your One Time or Subscription purchase selectors

    • Radio - will display as radio buttons

    • Buttons - will display as two buttons

    • Stacked - will display as buttons that fit the width of the buy box

Selector Primary Color:

  • APPLICABLE TO BUTTONS: The color of the selected button

Selector Secondary Color:

  • APPLICABLE TO BUTTONS: The color of the price listed on the selected button

Primary Selector Hover Color:

  • APPLICABLE TO BUTTONS: The color of the button when hovered upon

Secondary Selector Hover Color:

  • APPLICABLE TO BUTTONS: The color of the price listed on the button when hovered upon

Text Hover Color:

  • APPLICABLE TO BUTTONS: The color of the label text on the button when hovered upon

Button Border Radius and Width:

  • APPLICABLE TO BUTTONS: Determines the shape and border weight of the button. A higher radius creates a rounder button. A higher border width creates a heavier border.

Text Color:

  • BUTTONS: Overrides text color of the labels on the buttons

  • RADIO: Determines text color of one time and subscription purchase options

Advanced Settings:

If you would prefer to have additional settings outside of the out-of-the-box options we have created for you, no worries!

Remove Styling:

  • Only toggle this ON if you desire to add your own custom CSS

  • This will wipe all customizations from your "Subscribe & Save Block"

CSS Styles:

  • Input your own CSS customization for the "Subscribe & Save Block" here

Save your settings, and your "Subscribe & Save Block" will be available across all products currently using the configured template.

If you have products that fall within different templates that should have the "Subscribe & Save Block", navigate to that template and follow the above instructions above again.

Voila! Once the customizations are to your liking, you're ready to publish this working theme as the live theme of your Shopify store.

Did this answer your question?