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


---

# 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://quote-guide.storeify.app/integration/integrate-code-to-theme.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.