> For the complete documentation index, see [llms.txt](https://quote-guide.storeify.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://quote-guide.storeify.app/integration/integrate-code-to-theme.md).

# Integrate code to theme

For test purposes, we highly recommend you activate the [app embeds](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps#app-embeds) on an unpublished theme to avoid any unexpected results on your live theme.

**Steps to manage**

1. From app admin page, click **Integrate Theme** on the left sidebar.
2. Select the theme you want to show the quote function > click Go to **Theme Settings** > **App Embeds** button.
3. In **Theme Editor**, activate the app embeds of **S:Request a Quote & Hide Price** app > **Save** the changes.
4. Check the setting in the app again.
5. Check the result on the theme.

**Note:**

* Preview the theme if it is an unpublished theme
* If the app is installed to live theme, please check the live website

### 1. Integrate on Product

If your theme is an [Online Store 2.0](https://help.shopify.com/en/manual/online-store/themes/managing-themes/versions), please [add an app block](https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps#app-blocks) to your product template via Theme Editor.

![](/files/ANJF89B99uQHP355AfYW)

To change the position of the button, simply drag & drop.

![](/files/zpNijMCXV2BysYS5gl8Z)

Or you can use the short code integration:

1. Open the **sections/product-template.liquid** or **sections/main-product.liquid**
2. Insert the short code below into any position you want

```liquid
{% render 'storeify-quote',product: product %}
```

### 2. Integrate on Collection

1. Select a theme > Edit code > Create a new file **storeify-quote.liquid** in Snippets folder.

<figure><img src="/files/8WvjascehPrdjgb03OwO" alt=""><figcaption></figcaption></figure>

2. Insert liquid code below into **storeify-quote.liquid**

{% code title="storeify-quote.liquid" %}

```liquid
{% assign label_btn = "Request a quote" %}
{% if shop.metafields.storeifyquote %}
    {% assign locale_current = shop.locale %}
    {% assign storeify_quote_mode = shop.metafields.storeifyquote.quote_settings.mode %}
    {% assign quote_lang = shop.metafields.storeifyquote.quote_settings.lang %}
    {% if quote_lang contains locale_current %}
        {% if storeify_quote_mode == 1 %}
          {% assign label_btn = quote_lang[locale_current].btn_addquote  %}
        {% else %}
          {% assign label_btn = quote_lang[locale_current].call_for_price  %}
         {% endif %}
    {% else %}
        {% if storeify_quote_mode == 1 %}
          {% assign label_btn = quote_lang.default.btn_addquote  %}
        {% else %}
          {% assign label_btn = quote_lang.default.call_for_price  %}
        {% endif %}
    {% endif %}
{% endif %}
{% assign ify_col_ids = product.collections | map: 'id' | join: ',' %}    
<div class="ify-hide ify-quote-group ify-quote-group-{{product.id}}" data-targetid="{{product.id}}" data-targethandle="{{product.handle}}" data-collections="{{ ify_col_ids }}">
<button type="button" class="storeify-quote-btn-trigger-popup btn button button--primary ify-button-code" data-product="{{ product.handle }}">{{ label_btn }}</button>
{% assign productCollections = product.collections | map:'id' %}
<script id="ify_script_item_{{product.id}}">
    var storeifyRequestaquote = storeifyRequestaquote || {};
    storeifyRequestaquote.productdata = storeifyRequestaquote.productdata || {};
    storeifyRequestaquote.productdata['{{product.id}}'] = {"id":{{ product.id }},"title":{{ product.title | json }},"handle":"{{ product.handle }}","available":{{ product.available }},"vendor":"{{ product.vendor }}","type":"{{ product.type }}","tags":{{ product.tags | json }},"price":{{ product.price }}};
    storeifyRequestaquote.collections = storeifyRequestaquote.collections || {};
    storeifyRequestaquote.collections['{{product.id}}'] = {{ productCollections | json }};
</script>
<script id="ify_json_item_{{product.id}}" type="application/json">
{
  "productdata": {"id":{{ product.id }},"title":{{ product.title | json }},"handle":"{{ product.handle }}","available":{{ product.available }},"vendor":"{{ product.vendor }}","type":"{{ product.type }}","tags":{{ product.tags | json }},"price":{{ product.price }}},
  "collections": {{ productCollections | json }}
}
</script>
</div>
```

{% endcode %}

<figure><img src="/files/2EkBwlxNImcF8GG49jWR" alt=""><figcaption></figcaption></figure>

3. Insert the short code below into the collection product grid template. This file depends on the custom theme you are using. \
   In this guide, we will the **Dawn** theme > **snippets/product-card.liquid**&#x20;

{% code fullWidth="false" %}

```liquid
{% render 'storeify-quote',product: product_card_product %}
```

{% endcode %}

<figure><img src="/files/ha1p5QYyj99yTJMkrQuA" alt=""><figcaption></figcaption></figure>

or **snippets/card-product.liquid**

```
{% render 'storeify-quote',product: card_product %}
```

<figure><img src="/files/VIXJRf2Dejdxj98LcMFP" alt=""><figcaption></figcaption></figure>