Feature of the week: Embeddable subscription widget for Shopify

Subscribers can now easily add products to their existing subscriptions without leaving the product page. It’s all done in just a few clicks, making it super convenient for them to update their recurring orders.
Deidre Olsen
September 18, 2024

Welcome back to our feature of the week series! 

We have a special update in store that makes things easier for you and your customers.

Now, when subscribers want to add something new to their regular orders, they can do it directly from the product page—no need to jump through hoops or go to another page. 

It’s a smoother, quicker shopping experience that helps you keep customers happy while boosting your sales.

And this is just the first of many embeddable components for Shopify to come!

So, let's get into it.

What's new 👀

Subscribers can now easily add products to their existing subscriptions without leaving the product page. It’s all done in just a few clicks, making it super convenient for them to update their recurring orders. This makes shopping simpler for your customers and gives you more chances to increase sales and the average order value.

What are the benefits? 🤔

  • Better customer experience: Customers can directly manage their subscriptions from Shopify product pages without needing to access a separate portal.
  • More sales opportunities: With the widget, you have more chances to upsell to customers, given they can easily add products to their existing subscriptions.
  • Customizable branding: You have minor branding customization options, including colors and CTA (call to action) copy, which allows you to personalize your widget and maintain control over design.

How it works ⚒️

When a customer views a product on your Shopify store, they will see a subscription widget if they are logged in. The widget allows them to:

  • Add the product (or selected variant) to their existing subscription.
  • Update the number of products in their subscription.
  • View their current subscription status for that product. 

Note: This feature works with the Shopify Single Sign-On app, and the widget is directly embedded on the product page. It interacts seamlessly with the customer’s existing subscription.

What is the setup process? 🔨

1. Prerequisites

  • Make sure your Shopify store is connected to Firmhouse.
  • Install the Firmhouse Shopify Single Sign-On app.

2. Add the Widget script

  • Insert a small JavaScript snippet into your theme.liquid file. This code ensures the widget only loads for logged-in users.

3. Embed the Widget on product pages

  • Add a placeholder div to the main-product.liquid file, usually above the product info. This placeholder will be replaced with the actual widget when the page loads.

4. Customization

  • You can tweak the widget’s colors and text to match your store’s look and feel by updating the configuration options in the code.

Things to keep in mind 🧠

  • This feature is available exclusively for smart order-based projects and requires you to have the Shopify Single Sign-On (SSO) app set up.

For all the details, check out our Help article

Want a step-by-step guide to get set up and running? Check out our Developer Docs.

You can also find more information about our Shopify Single Sign-On in this blog post.

Visit our Changelog to see other product features and updates. If you have any questions or need assistance, our support team is here to help.

Stay tuned for another exciting update coming next week.

Receive updates
Receive our latest product updates and blog posts in your inbox. No spam, just the latest about the Firmhouse platform.
Read about our privacy policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.