# 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="/files/PgGP1cgudSZpbhuTbXt4" 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="/files/pfFy6RbX62LcjT9ga2LA" alt=""><figcaption></figcaption></figure>

### Step 3: Save & Test

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

<figure><img src="/files/w6Hl19MUUnS2AIintgRF" 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="/files/PgGP1cgudSZpbhuTbXt4" 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="/files/6G9rxE9oLR1GyUatM73m" alt=""><figcaption></figcaption></figure>

### Step 3: Save & Test

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

<figure><img src="/files/0LDWOdFaSuR2f4lucm8m" 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.spicegems.com/epa-easy-product-addons/additional-features/product-page.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.