Add a subscription widget to Shopify product details page

This guide will help you to add a widget for managing the product subscription on product details page of your Shopify store.

Widget in action

The widget will allow your customers to manage their subscription for the product they are viewing. They can add the product to their subscription or update the quantity of the product in their subscription.

If you have more than one product variant, the selected variant will be added to the subscription. If the customer has an active subscription for the product, it will show the current quantity of the product in the subscription.

You can customize the widget content and style by updating the configuration options in the widget code.

How to add the widget to your Shopify store

Prerequisites

Before you start, you need to have the following:

• Connect your Shopify store to Firmhouse. If you haven't connected your Shopify store to Firmhouse yet, you can follow the instructions in this article to connect your store to Firmhouse.

• Install the Firmhouse Shopify SSO app on your Shopify store. You can follow the instructions in this article to install the app.

Adding the widget script to your theme

To add the widget to your Shopify store, you need to add the following JavaScript code to your theme. You can add the following code to the theme.liquid file in the Layout directory of your theme. You can add the code just before the closing </head> tag.

{% if customer %}
  <script src="https://checkout.firmhouse.com/apps/shopify_sso/embed" defer="defer"></script>
{% endif %}

We're using the customer object to check if the user is logged in. That way, we only load the widget script if the user is logged in.

After adding the code, it will look like this:

Adding the widget placeholder to Product Details Page

To add the widget to your product details page, you can update the main-product.liquid file in the Sections directory of your theme.

How to update the code for Shopify Theme?

1. From your Shopify admin, go to Online Store > Themes.

2. Click ... > Edit code.

A good place to add the widget is just on top of the product info section. This could vary from theme to theme but you can search for <section and add the following code as the first child of the section:

 <div 
    data-role="firmhouse-ssc-frame"
    data-path="/ordered_products/<variantId>"
    data-default-variant-id="{{ product.selected_or_first_available_variant.id }}"
    data-primary-color="#90dd20"
    data-secondary-color="#000000"
></div> 

This div is a placeholder, and when the page is loaded it will get replaced with the actual iframe. After adding the code, it will look like this:

You can now save the file and refresh the product details page to see the widget in action.

Configuration options

You can customize the widget by updating the configuration options in the widget code. Here are the available configuration options:

• data-primary-color: The primary color of the widget. You can use any valid CSS color value.

• data-secondary-color: The secondary color of the widget. You can use any valid CSS color value.

Updating the widget content

If you would like to update the text content of the widget, you can update the following variables in the widget code:

• data-copy-add-to-subscription: The text for the "Add to subscription" button.

Example

<div data-role="firmhouse-ssc-frame"
    data-path="/ordered_products/<variantId>"
    data-default-variant-id="{{ product.selected_or_first_available_variant.id }}"
    data-primary-color="#90dd20"
    data-secondary-color="#000000"
    data-copy-add-to-subscription="Subscribe to {{ product.title }}"
></div>

• data-copy-add-to-subscription-copy: The text for "Do you want to add this product to your subscription?"

Example

<div data-role="firmhouse-ssc-frame"
    data-path="/ordered_products/<variantId>"
    data-default-variant-id="{{ product.selected_or_first_available_variant.id }}"
    data-primary-color="#90dd20"
    data-secondary-color="#000000"
    data-copy-add-to-subscription-copy="Do you want to add {{ product.selected_or_first_available_variant.title }} to your subscription?"
></div>

If you would like to customize the content with HTML, you can update the following variables in the widget code:

• data-template-add-to-subscription-body: ID of the template for the "Add to subscription" body content.

Example

For example, if you would like to add a list of benefits for subscribing to the product, you can update the data-template-add-to-subscription-body variable with the ID of the template that contains the list of benefits.

 <div data-role="firmhouse-ssc-frame"
    data-path="/ordered_products/<variantId>"
    data-default-variant-id="{{ product.selected_or_first_available_variant.id }}"
    data-primary-color="#90dd20"
    data-secondary-color="#000000"
    data-template-add-to-subscription-body="firmhouse-widget-body"
  ></div>
  <template id="firmhouse-widget-body">
    <ul style="list-style: circle;">
      <li>Free shipping on all orders</li>
      <li>10% discount on all products</li>
      <li>No commitment, cancel anytime</li>
    </ul>
  </template>