How to add a subscription widget to featured products

Owned by Aleksandra Khvoynitskaya (Unlicensed)
Last updated: 08.08.2023 by Andrey Dmitrakovich (Unlicensed)
2 min read

To add the RecurrinGO! Subscriptions widget to featured products or a featured collection, you should do the following:

  1. Go to the theme code editing section in the admin panel of your web store Online Store > Themes > … (Actions) > Edit code.

 

 

  1. In the Snippets directory, click + Add a new snippet. 

  1. In the pop-up, enter the File name spurit_ros_featured_product_snippet and click Done.

  1. Paste the following code and click Save.

<script>
  if(typeof(Spurit) === 'undefined'){
    var Spurit = {};
  }
  if(!Spurit.RecurringOrderAndSubscriptions){
    Spurit.RecurringOrderAndSubscriptions = {};
  }
  if(!Spurit.RecurringOrderAndSubscriptions.snippet){
    Spurit.RecurringOrderAndSubscriptions.snippet = {};
  }
  if(!Spurit.RecurringOrderAndSubscriptions.snippet.products){
    Spurit.RecurringOrderAndSubscriptions.snippet.products = {};
  }
  {% if product %}
      Spurit.RecurringOrderAndSubscriptions.snippet.products['{{product.id}}'] = {
        id: {{product.id}},
        title: '{{product.title}}',
        handle: '{{product.handle}}',
        collections: {{product.collections | map: 'id' | json}},
        variants: [],
        {% if product.requires_selling_plan %}
          requires_selling_plan: true,
        {% else %}
          requires_selling_plan: false,
        {% endif %}
      };
      {% for variant in product.variants %}
          Spurit.RecurringOrderAndSubscriptions.snippet.products['{{product.id}}'].variants.push({
            id: {{variant.id}},
            title: '{{variant.title}}',
            price: {{variant.price}},
          });
      {% endfor %}
  {% endif %}
</script>

 

  1. Go to Sections and open the featured-product.liquid file to add the subscription widget to a featured product or featured-collection.liquid to add it to a featured collection.  The file name can vary for different themes. If you don’t find the featured-product.liquid or featured-collection.liquid file, go to Templates, open index.json, and find there the block responsible for featured products.

 

  1. Render the snippet with {% render 'spurit_ros_featured_product_snippet', product: product %}

 

If you have difficulties with adding the subscription widget to the featured products / collection, our support team is ready to help.