[Shopify] Product Options Display Widget

Automatically Display "Subscribe & Save" Options

In order to display "Subscribe and Save" options on your Shopify Site's Product Pages, Autoship Cloud injects a widget automatically into your store's product pages via script tags.

This widget shows the different selling plans per product variant. If different product variants have different selling plan options, then these differences will also be displayed when a different variant is selected on your product page.

This widget is displayed automatically for products that have selling plans setup in your Shopify Product's Purchase options.

Manual Installation of the Widget

If the widget does not automatically display on your product page, you may need to add the widget directly to your theme. You can do this manually as outlined below or through a custom installation of the widget as outlined here.

Go to Sales Channel > Online Store > Themes >> Customize. From there select your default product page (or other product pages as needed) and add the Autoship Cloud Widget block to your product page!

Once added, save your changes, and then check to ensure it is applied by viewing your live product page! 

• Note: In some cases, even if you have added the widget, the customizer may not reflect the changes made. Please view your live product page to see the changes applied.

Customizing the Widget

You can customize how Autoship options are presented on the product page when selecting the Autoship Cloud widget in Online Store > Themes > Customize >> Default Product page.

Using this customizer, you can change the label for the "Buy One Label" (or one-time purchase option), the Subscribe label (or Autoship option), and the Subscribe Footer (or Autoship text). You can also update the "Why Subscribe" information module and default to Autoship options on product pages (or one-time).

Custom Installation of the Widget

If the widget does not automatically display on your product page, this may be due to using an older or custom Shopify theme, and the widget can instead be manually injected into your Shopify theme by using a short code snippet.

We can inject the <div class="autoship-widget" data-handle="{{ product.handle }}"></div>  snippet directly into your theme's product page form like this:

{% form action=”/cart/add” … %}
…
<div class=”autoship-widget” data-handle=”{{product.handle}}”></div> 
…
{% endform %}

The script will find the widget element and append the content there.

Please note that the following about what this script requires:

• The code snippet must be placed within a form that adds a product to a cart.
• The script will replace any element in the page that matches the .autoship-widget class.
• Requires the product handle to find the information related to that product.
• The script leverages the usage of internal APIs to pull product information, and these APIs can change at any moment without notification.
• The widget will not load for a given product if that does not have any active selling plan groups.
• The widget will not load for a given product if there is a form element with the name attribute that also is equal to selling_plan.
• There can be multiple widgets on the same page. This is useful for PLP pages like category views.

Advanced Widget Installation

Widget Properties

• data-handle *: This property is required, and is used to know which product the widget must load.
• data-buy-once-label : Allows HTML. This is used to modify the "Buy Once" (or "Buy Now") label in the widget. It also allows additional placeholders.
• data-subscribe-label : Allows HTML. This is used to modify the subscription option label. It also allows additional placeholders.
• data-subscribe-footer : Allows HTML. This is used to modify the subscription footer box (Below the dropdown). It also allows additional placeholders.
• data-subscribe-first : By default, the "Buy Once" option is selected. Set the value of this property to true in order to for the subscription option "Subscribe and Save" to be selected by default on page load.
• data-hide-modal : This hides the Why Subscribe  link and modal.

Widget Placeholders

The following placeholders can be used in labels and footers

Widget Events

The widget triggers events when the selling plan is changed. The event can be caught as follows:

    document.addEventListener('selling-plan:change', function(event) {
        // event.detail.selling_plan_id
        // event.detail.price 
        // event.detail.frequency
        // event.detail.frequency_interval
    });

Troubleshooting the Widget

Here are a few guidelines to check some of the most common reasons that may cause the widget not to display or work properly.

The Widget Does Not Load

• The product has no selling plans assigned to any of its variants.
• The Autoship Cloud App is not fully set up. For example, the Autoship Cloud App is installed, but the merchant never connected their QPilot Account (see our Install & Launch Guide for Shopify).
• The widget has not been added manually to product pages or through a custom implementation.

The Widget Loads, but Add to Cart Does Not Include the Selected Subscription Option

• An eligible subscription payment gateway is not set. Please ensure your store is using an eligible subscription payment gateway and that this is enabled for your Online Store.

Example Widget Customization

In this example, we explain how to customize the Autoship Cloud Widget to achieve a custom display as pictured here:

Initializing Development

Starting with the existing Autoship Widget helps to speed up our customization, so first, we created a new Shopify code snippet called shippets/autoship-widget.liquid . This widget was then placed within the main product page form using a render block:

{% form ... %}
    <!-- ... -->
    {% render 'autoship-widget' %}
    <!-- ... -->
{% endform %}

Configuring the Widget

In our newly created file, the first step we do is to place the custom Autoship widget.

<!-- snippets/autoship-widget.liquid -->
    <div class="autoship-wrapper">
        <label for="" class="form__label font--nav">Frequency</label>
        <div
            class="autoship-widget"
            data-hide-modal="true"
            data-handle="{{ product.handle }}"
            data-buy-once-label="One-time Purchase <span class='subscription-price'><span class='subscription-discounted-price'>{price}</span></span>"
            data-subscribe-label="Subscribe and Save {discount} <span class='subscription-price'><span class='subscription-original-price'>{price}</span><span class='subscription-discounted-price'>{discounted_price}</span></span>"
            data-subscribe-footer="Never worry about running out! Your subscription will deliver this item every {frequency}. Cancel anytime."
        ></div>
    </div>

Here, you can see that we have custom data attributes that we used to configure the widget labels. Also, you can see that these attributes contain some placeholders that actual values will replace. The Widget Properties can be found here, and the Widget Placeholders can be found here.

Styling the Widget

By default, the Autoship widget has a shallow CSS footprint, making it very easy to customize by adding CSS rules to the theme. In this case, we added some CSS rules to style it to match the store's theme.

<!-- snippets/autoship-widget.liquid -->
<style>
    .autoship-widget {
        min-height: 133px;
    }

    .autoship-widget-option-wrapper {
        border: 1px solid rgba(35, 34, 34, 0.15) !important;
        margin: 20px 0;
        padding: 14px 16px;
        font-size: 14px;
    }

    .autoship-widget-option-wrapper.option-active {
        border: 1px solid var(--color-black) !important;
        background: rgb(var(--color-background)) !important; 
    }

    .autoship-widget-dropdown-label {
        width: 100%;
    }

    .autoship-widget-option-wrapper .autoship-widget-dropdown-label__text {
        display: inline-flex;
        width: calc(100% - 30px);
    }

    .autoship-widget-option-wrapper .autoship-widget-dropdown-label__text .subscription-price {
        margin-left: auto;
        font-family: var(--font-heading-family);
        font-size: 12px;
        color: var(--BLACK, #232222);
    }

    .subscription-original-price {
        opacity: 0.4;
    }

    .subscription-discounted-price {
        margin-left: 8px;
    }

    .autoship-widget-option-footer {
        text-align: center;
        line-height: 1.4em;
        margin-top: 16px;
    }

    .autoship-widget-dropdown {
        border: 1px solid rgba(35, 34, 34, 0.20); 
        appareance: none;
        -webkit-appearance: none;
        border-radius: 99999px;
        padding: 7px 16px 5px;
        background: url('{{ 'icon-caret.svg' | asset_url }}') no-repeat calc(100% - 10px) center;
        font-family: var(--font-body-family);
        font-style: var(--font-body-style);
        font-weight: var(--font-body-weight);
        font-size: 1.4rem;
        color: rgba(var(--color-foreground),1);
    }

</style>


<div class="autoship-wrapper">
    <!-- ... --> 

</div>

Customizing the Add to Cart Button to Display the Price and Discounted Price

In this PDP design, when a new selling plan is chosen from the Autoship dropdown, the price displayed in the "Add to Cart" button changes to match the price of the selected option: including the discounted price when applicable.

For this purpose, the Autoship widget provides a handy event tied to the document object.

<!-- snippets/autoship-widget.liquid -->
<style>
    /* css styles here */
</style>


<div class="autoship-wrapper">
    <!-- html widget content here. --> 

</div>


<script defer>
    // Here we change the price whenever the selling plan changes.
    document.addEventListener('selling-plan:change', function(event) {
        const price = `$${event.detail.price}`;
        document.querySelector('.product-form__submit-inner span.price').innerText = price;
    });
</script>