# 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.**

<figure><img src="https://3112706152-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx29cZdVamjxRRWbFFQRA%2Fuploads%2F1z7kVCIWL4frWhPuPbmu%2F1.png?alt=media&#x26;token=d53447f8-0fd6-4fb3-90d3-701b12cf7705" alt=""><figcaption></figcaption></figure>

### 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.&#x20;

<figure><img src="https://3112706152-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx29cZdVamjxRRWbFFQRA%2Fuploads%2FV23CFCDv5nTIdsC5PVHT%2F2.png?alt=media&#x26;token=4e6d0b8e-38e2-4838-9702-b6d83ea2fb96" alt=""><figcaption></figcaption></figure>

### Step 3: Save & Test

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

<figure><img src="https://3112706152-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx29cZdVamjxRRWbFFQRA%2Fuploads%2F3JKKBud0CBbCe9e6BO1d%2F3.png?alt=media&#x26;token=a82d1106-97df-4c35-9207-dce4e00ec51d" alt=""><figcaption></figcaption></figure>

***

## 2. Cart Page

### Step 1: Access your theme

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

<figure><img src="https://3112706152-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx29cZdVamjxRRWbFFQRA%2Fuploads%2F1z7kVCIWL4frWhPuPbmu%2F1.png?alt=media&#x26;token=d53447f8-0fd6-4fb3-90d3-701b12cf7705" alt=""><figcaption></figcaption></figure>

### 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.

<figure><img src="https://3112706152-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx29cZdVamjxRRWbFFQRA%2Fuploads%2FhxZ2JcfIGBxWqlhr1lBF%2F4%20-%20Cart%20snippet.png?alt=media&#x26;token=69756d57-6baf-4b54-a0f4-162cf180a8f3" alt=""><figcaption></figcaption></figure>

### Step 3: Save & Test

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

<figure><img src="https://3112706152-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fx29cZdVamjxRRWbFFQRA%2Fuploads%2FJnb74KlZxVnDFJWA9UVo%2F4%20-%20Store.png?alt=media&#x26;token=61948395-4892-43d1-ad4c-b109230a6f84" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you encounter any issues, please feel free to reach out at [**help@spicegems.com**](mailto:help@spicegems.com)
{% endhint %}