Skip to main content

Setting up a Subscription First subscription selection Theme Block

Michiel Sikkes avatar
Written by Michiel Sikkes
Updated over a month ago

Firmhouse offers a Subscription First theme block to put on your product pages. This theme block promotes subscribing to specific subscription schedules that you want to promote for each product.

There are a few special benefits for using the Subscription First theme block as opposed to the regular Subscription Options theme block that Firmhouse and other Subscription apps also provide:

  • Guide your customer with picking the best subscription schedule that matches their periodic use.

  • Link subscription schedules to an appropriate size variant.

  • Configure which Product Variants should show up in the One Time Purchase option and which should not.

Getting started

Setting up the Subscription First theme block involves a few more configuration steps than the more standard Subscription Options theme block. So this article will guide you in setting up the basics and more advanced settings.

Step 1: Add the Subscription First theme block to your product page

Add the Subscription First theme block to your product page template. If you only want to sell certain products in a Subscription First fashion, you can create a new Product template. And link the products you want to sell this way to use this specific template.

When you've just added the theme block without further configuration, it only shows the One-time purchase option by default. Don't worry, this is expected as we still have to configure which subscription options to show.

You also need to remove/hide the Variant picker as the variant selection is managed by the Subscription First widget now.

Let's go ahead and continue with the configuration.

Step 2: Create a Product metafield for setting the featured subscription variants per product

To have the right subscription schedules show up for each product we are going to define a Metafield.

In your Shopify admin, go to Settings > Custom Data > Products and click Add definition.

Add the metafield with the following properties:

  • Name: Firmhouse: Featured Subscription Variants

  • Namespace and Key: firmhouse.featured_subscription_variants

  • Select Type: Product Variant and then select List of product variants

Step 3: Set subscription variants on the Product

Now edit to a Product in Shopify and select the variants that you want to show up as subscription options in the metafield. You will need to do this for every Product that you want to sell in a Subscription First way.

First on the Product edit form scroll down to Product metafields and click the entry area next to the label:

Then click Select variants:

In the dialog that shows up, find the product you are currently editing and select which variants you want to make available as subscription options:

Click Add and the subscription variants for your products are set.

Step 4: Create a Product Variant metafield for setting its subscription schedule

Now we're going to create a metafield on Product Variant so that per variant we can set what the appropriate subscription schedule for that size option is.

In your Shopify admin, go to Settings > Custom Data > Variants and click Add definition.

Add the metafield with the following properties:

  • Name: Firmhouse Subscription Frequency

  • Namespace and Key: firmhouse.subscription_frequency

  • Select Type: Single line text

Step 5: Set the subscription frequency per variant

We're almost there for the basic setup!

The last step is to set the subscription frequency you want to link to the appropriate size variant of your product. For example: The "Every 2 weeks" subscription schedule should be linked to the "54 units" diaper box. And the "Every 2 months" schedule should be linked to the "216 units" diaper box.

In Shopify, edit a product variant you want to assign to a subscription schedule. Scroll down to Metafields and edit the Firmhouse: Subscription Frequency metafield. As the value enter the subscription frequency in the following format: <unit>_<period plural>, for example: 2_weeks or 1_months

Step 6: Configure One-Time Purchase Options (Optional)

By default, all product variants will be available as one-time purchase options. However, you can control which variants appear in the one-time purchase dropdown by creating and configuring a Featured One-Time Variants metafield.

In your Shopify admin, go to Settings > Custom Data > Products and click Add definition.

Add the metafield with the following properties:

  • Name: Firmhouse: Featured One-Time Variants

  • Namespace and Key: firmhouse.featured_one_time_variants

  • Select Type: Product Variant and then select List of product variants

Then edit your product and select which variants should appear as one-time purchase options. If you don't set this metafield, all variants will be available as one-time purchase options.

Step 7: Make Your Subscription Options More Informative

Here are some easy ways to give your customers more details about what they're subscribing to.

Tell Customers What's in the Box

Create a simple variant metafield:

  • Name: Firmhouse: Package Contents

  • Namespace and Key: firmhouse.package_contents

  • Type: Single line text

This shows customers exactly what they're getting in each package, instead of just showing the variant title.

Highlight the Perks of Subscribing

Create a variant metafield:

  • Name: Firmhouse: Benefits

  • Namespace and Key: firmhouse.benefits

  • Type: Rich text

This lets you add a nice list of perks that come with subscribing. It'll show up right below the subscription description.

Show the Value with Per-Unit Pricing

Set up these variant metafields:

  1. Single Use Price:

    • Name: Firmhouse: Single Use Price

    • Namespace and Key: firmhouse.single_use_price

    • Type: Money

  2. Single Use Unit (Optional):

    • Name: Firmhouse: Single Use Unit

    • Namespace and Key: firmhouse.single_use_unit

    • Type: Single line text

This helps customers see the value, like "$1.25 per diaper" - making it easier to compare different options.

Display Monthly/Weekly Value

Create these variant metafields:

  1. Compare At Frequency Price:

    • Name: Firmhouse: Compare At Frequency Price

    • Namespace and Key: firmhouse.compare_at_frequency_price

    • Type: Money

Compare At Frequency Period (Optional):

  • Name: Firmhouse: Compare At Frequency Period

  • Namespace and Key: firmhouse.compare_at_frequency_period

  • Type: Single line text

This shows customers what they're paying per time period (like "$35 per month")

Show Off the Savings

Create a variant metafield:

  • Name: Firmhouse: Discount Comparison Price

  • Namespace and Key: firmhouse.discount_comparison_price

  • Type: Money

This automatically calculates and shows discount percentages, so customers can see how much they're saving by subscribing. The price here will be used as the base price for the discount calculation. Ensure that the price is set for the price point that you want to compare against.

Keep It Clean by Hiding Checkout Prices

Create a variant metafield:

  • Name: Firmhouse: Hide At Checkout Price

  • Namespace and Key: firmhouse.hide_at_checkout_price

  • Type: True or false

Set to true if you want to hide the "At checkout" price on subscription options for a cleaner look.

Step 8: Customize the Appearance and Behavior of the Widget

The Subscription First theme block offers several customization options to match your store's design and functionality needs. In the theme editor, select the Subscription First block and you'll see these settings:

Behavior Settings:

  • Hide Quantity for Subscriptions: When enabled, hides the quantity input for subscription options and always uses '1' as the quantity (Optional)

  • Hide One Time Select: Hides the one-time product selection until the option is chosen (Optional)

  • Default to One Time Purchase: When enabled, the one-time purchase option will be selected by default instead of the first subscription option (Optional)

Content and Labels:

  • Preferred Option Label: Text to display on the badge for the preferred subscription option (Optional)

  • At Checkout Label: Customize the "At checkout:" text that appears before the price (Default: "At checkout:")

  • One Time Purchase Label: Customize the text for the one-time purchase option (Optional)

Styling Options:

  • Base Font Size: Adjust the text size throughout the widget (Default: 16px)

  • Option Text Color: Color for unselected option text (Default: #737373)

  • Option Border Color: Color of the border around unselected options (Default: #23477f)

  • Option Background Color: Background color for unselected options (Default: #ffffff)

  • Selected Option Text Color: Text color for the selected option (Default: #000000)

  • Selected Option Name Text Color: Color for the option name when selected (Default: #0064ff)

  • Selected Option Background Color: Background color for the selected option (Default: #e9f1ff)

  • Selected Option Border Color: Border color for the selected option (Default: #0064ff)

  • Selected Option Border Width: Width of the border for the selected option (Default: 2px)

  • Option Hover Border Color: Border color when hovering over an option (Default: #121212)

  • Selected Option Radio Color: Color of the radio button for selected options (Default: #ffa500)

  • Preferred Option Badge Text Color: Text color for the preferred option badge (Default: #ffffff)

  • Discount Background Color: Background color for discount badges (Default: #ffa500)

  • Discount Text Color: Text color for discount badges (Default: #ffffff)

  • Option Border Radius: Roundness of the option corners (Default: 6px)

  • Option Border Width: Width of the border around options (Default: 1px)

Aside from these settings you can always use custom CSS to customize the widget even more.

Advanced Settings:

  • Featured Subscription Variants Key: The metafield key for subscription variants (Default: featured_subscription_variants). If you would like to offer different variants for subscriptions on each market you can use a dynamic value here to use different metafields for each market.

Featured One Time Variants Key: The metafield key for one-time purchase variants (Default: "featured_one_time_variants")

If you would like to offer different variants for subscriptions and one-time purchases in different markets, you can use dynamic values for both Featured Subscription Variants Key and Featured One Time Variants Key . This allows you to create market-specific metafields for each region you serve.

  • Quantity Selector: CSS selector for the quantity input to hide when subscription is selected (Default: "quantity-input, quantity-selector, block-quantity-selector, .product-form__quantity")

Did this answer your question?