Manual Integration Using Snippet

This is a critical step for integrating addons on the product and cart pages. We recommend seeking expert guidance or assistance before proceeding

Here is the process to integrate the snippet on the Product and the Cart page.

1. Product Page

Step 1: Access your theme

Shopify Admin → Online Store → Themes → click on (...) three dots → Edit Code.

Step 2: Insert Snippet

Place the snippet in the required position:

For example, open your product template ( main-product.liquid or similar) and add the snippet below the product description or above the Add to Cart.

<!-- Spice Product Addons Snippet Starts -->
<div id="spiceaddonsappid">
  {% assign product_collections = product.collections | map: "id" %}
  {% if product_collections %}
    <input type="hidden" id="sgcollections" value="{{ product_collections | join: ',' }}"/>
  {% endif %}
</div>
<!-- Spice Product Addons Snippet Ends -->

We have added the snippet after the Quantity selector box.

Step 3: Save & Test

• Save the file and review the addons position on the product page.

2. Cart Page

Step 1: Access your theme

Shopify Admin → Online Store → Themes → click on (...) three dots → Edit Code.

Step 2: Insert Snippet

Place the snippet in the required position:

For example, open your product template ( main-product.liquid or similar) and add the snippet below the product description or above the Add to Cart.

<!-- Spice Product Addons Snippet(cart page) Starts -->
                    <div id="spiceaddonsappid">
                      {% assign pcollections = '' | split: '' -%}
                      {%- for item in cart.items -%}
                        {%- assign product_collections = item.product.collections | map: 'id' -%}
                        {%- if product_collections -%}
                          {%- assign pcollections = pcollections | concat: product_collections -%}
                        {%- endif -%}
                      {%- endfor -%}
                      <input type="hidden" id="sgcollectionscart" value="{{ pcollections | uniq | join: "," }}">
                    </div>
                    <!-- Spice Product Addons Snippet(cart page) ends -->

We have added the snippet after the checkout button.

Step 3: Save & Test

• Save the file and review the addons position on the cart page.