Display Infinite Options fields on a homepage or collection pages with multiple featured products

Follow the steps below on how to display Infinite Options on list pages, such as your homepage or collection pages, with multiple featured products.

1. From your Shopify admin, click Online Store, then click Themes.

2. Find the theme you want to edit, click the Actions button, then click Edit code.

3. Under the Layout folder, click on the theme.liquid file.

4. After the <head> tag, add this runtime configuration snippet to disable the default Add to Cart button.

<script>
  window.Shoppad = window.Shoppad || {},
  window.Shoppad.apps = window.Shoppad.apps || {},
  window.Shoppad.apps.infiniteoptions = {
    addToCartButton: "form[action$='/cart/add'] [type=submit]"
  };
</script>

5. Save your changes.

6. Under the Sections folder, find the featured product or collection list template. Some common names for these files are:

  • featured-product.liquid
  • featured-products.liquid
  • collection-template.liquid

7. At the top of this file, add this code snippet.

<script>
  window.productJSON = [];
  window.productJSON.push({{ product | json }});
</script> 

8. Within the {% form and {% endform %} tags for your featured product or collection list template, add this code snippet.

<div data-infinite-options="{{ product.handle }}"></div>

For example, if you have added multiple featured products to the homepage via the theme editor for the Debut theme, you would add the following code to featured-product.liquid between {% form and {% endform %}.

9. Save your changes.

Note: It is currently not recommended to use required fields on option sets that will be displayed more than once on a single page. Required fields will be validated for the entire page, so your customer will be required to enter a value for required fields for all products on the page, even if they are not adding that product to their cart.

Still need help? Contact Us Contact Us