> For the complete documentation index, see [llms.txt](https://bogos-guideline.gitbook.io/user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bogos-guideline.gitbook.io/user-guide/advanced-customization/advance-customization-for-devs/customize-using-bogos-template.md).

# Customize using BOGOS template

### Step 1

Create file *freegifts-snippet.liquid* and include it in the *theme.liquid*

### Step 2

Add the content below into the file *freegifts-snippet*

```liquid
{% comment %}
BOGOS: Free gift & Buy X Get Y
https://bogos.io
-----------------------------
The snippets below make up for the BOGOS Gift slider's default template.
All non-defined variables are open for editing. Defined variables must be kept the same for the app to work properly.

If you require any assistance, reach out to the BOGOS team via Live chat or Email at support@secomapp.com
{% endcomment %}

<script id="sca_fg_cart_section_gifts_slider" type="text/template">
    {% raw %}
        <div class="slide-container">
            <div class="fg-section-title">
                {{ fg_slider_title }}
            </div>
            <div class="glider-contain">
                <div class="glider" id="fg-gift-items"></div>
                <div>
                    <button aria-label="Previous" class="glider-prev nav left-nav btn-nav-slide">❮</button>
                </div>
                <div>
                    <button aria-label="Next" class="glider-next nav right-nav btn-nav-slide">❯</button>
                </div>
            </div>
            <div role="tablist" class="dots"></div>

            {{ sca_fg_disable_slider_section }}
        </div>
    {% endraw %}
</script>

<script id="sca_fg_section_gifts_popup" type="text/template">
    {% raw %}
        <div class="slide-container sca-modal-dialog-fg">
            <button class="sca-close-modal-fg btn" aria-label="close modal" data-close>✕</button>
            <div class="fg-section-title">
                {{ fg_slider_title }}
            </div>
            <div class="glider-contain">
                <div class="glider" id="fg-gift-items"></div>
                <div>
                    <button aria-label="Previous" class="glider-prev nav left-nav btn-nav-slide">❮</button>
                </div>
                <div>
                    <button aria-label="Next" class="glider-next nav right-nav btn-nav-slide">❯</button>
                </div>
            </div>
            <div role="tablist" class="dots"></div>

            {{ sca_fg_disable_slider_section }}
        </div>
    {% endraw %}
</script>

<script id="sca_fg_section_gift_item" type="text/template">
    {% raw %}
        <div class="d-flex product-item">
            <div class="product-content">
                <div class="top-content">
                    <a class="gift-original-url" href="/products/{{ fg_product_handle }}" target="_blank">
                        <img class="product-item-thumbnail" src="{{ fg_product_img }}" alt="{{ fg_product_img_alt }}">
                        <p class="product-title">{{ fg_product_title }}</p>
                        <p class="product-title variant-title {{ fg_gifts_check_show_by_variants }}">
                        <span class="selected-variant {{ fg_check_selected_variant }}">
                            {{ fg_variant_title }}
                        </span>
                        </p>
                    </a>
                </div>
                <div class="d-flex bottom-content">
                    <div class="d-flex price-section">
                    <span class="original-price transcy-money">
                        <del>{{ fg_original_price }}</del>
                    </span>
                        <span class="gift-price transcy-money">{{ fg_gift_price }}</span>
                    </div>

                    <div class="dropdown {{ fg_gifts_check_show_by_products }}">
                        <div class="select">
                        <span class="selected-variant {{ fg_check_selected_variant }}">
                            {{ fg_variant_title }}
                        </span>
                            <i class="fa fa-chevron-left"></i>
                        </div>
                        <ul class="dropdown-menu">
                            {{ sca_fg_variant_select_section }}
                        </ul>
                    </div>

                    <button href="javascript:void(0)" class="btn-add-to-cart"
                            data-offer="{{ fg_product_belongs_to_offer }}"
                            data-variant="{{ fg_variant_id }}">
                        {{ fg_add_to_cart }}
                    </button>
                </div>
            </div>
        </div>
    {% endraw %}
</script>

<script id="sca_fg_variant_select_section" type="text/template">
    {% raw %}
        <li class="variant-item" data-img="{{ fg_variant_img }}" id="{{ fg_variant_id }}"
            data-original-id="{{ fg_original_variant_id }}"
            data-price="{{ fg_variant_price }}" data-original-price="{{ fg_original_variant_price }}">
            {{ fg_variant_title }}
        </li>
    {% endraw %}
</script>

<script id="sca_fg_disable_slider_section" type="text/template">
    {% raw %}
        <div id="sca-hidden-gift-popup">
            <input type="checkbox" id="sca-disable-checkbox" class="sca-disable-checkbox" name="sca-disable-checkbox"/>
            <label class="sca-disable-text" for="sca-disable-checkbox">{{ fg_text_disable_slider }}</label>
        </div>
    {% endraw %}
</script>

<script id="sca_fg_cart_message_section" type="text/template">
    {% raw %}
        <div id="sca-promotion-glider" class="glider sca-promotion-glider">
            {{ sca_fg_cart_message_items_section }}
        </div>
    {% endraw %}
</script>

<script id="sca_fg_cart_message_items_section" type="text/template">
    {% raw %}
        <p class="content-promotion-message">
            {{ fg_cart_message }}
        </p>
    {% endraw %}
</script>

<script id="sca_fg_gift_thumbnail_section" type="text/template">
    {% raw %}
        <div class="sca-gift-thumbnail-title">{{ fg_gift_thumbnail_title }}</div>

        <div class="slide-container" id="fg-gift-thumbnail-title">
            <div class="glider-contain">
                <div class="glider sca-list-gift-thumbnail">
                    {{ sca_fg_gift_thumbnail_items_section }}
                </div>

                <div class="{{ fg_check_show_narrow }}">
                    <a href="javascript:void(0)" aria-label="Previous"
                       class="glider-prev nav left-nav btn-nav-slide">«</a>
                    <a href="javascript:void(0)" aria-label="Next" class="glider-next nav right-nav btn-nav-slide">»</a>
                </div>
                <div role="tablist" class="dots-thumbnail"></div>
            </div>
        </div>
    {% endraw %}
</script>

<script id="sca_fg_gift_thumbnail_items_section" type="text/template">
    {% raw %}
        <div class="d-flex product-item">
            <a class="gift-original-url" href="/products/{{ fg_product_handle }}" target="_blank">
                <img class="product-item-thumbnail sca-gift-image" src="{{ fg_product_img }}"
                     alt="{{ fg_product_img_alt }}">
            </a>
        </div>
    {% endraw %}
</script>

<script id="sca_fg_gift_icon_section" type="text/template">
    {% raw %}
        <img src="{{ fg_gift_icon }}" alt="{{ fg_gift_icon_alt }}" class="{{ fg_class_product_or_collection_page }}"/>
    {% endraw %}
</script>

<script id="sca_fg_today_offer_section" type="text/template">
    {% raw %}
        <div id="sca-today-offer-wrap">
            <div class="sca-fg-header">
                <div class="sca-fg-header-title">
                    <span class="sca-fg-today-offer-title">{{ sca_fg_today_offer_title }}</span>
                    <span class="sca-fg-close-today-offer" aria-label="close" data-close>
                      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#5e5873" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <line x1="18" y1="6" x2="6" y2="18"></line>
                        <line x1="6" y1="6" x2="18" y2="18"></line>
                      </svg>
                    </span>
                </div>
                <span class="sca-fg-today-offer-subtitle">{{ sca_fg_today_offer_subtitle }}</span>
            </div>

            <div class="sca-fg-body">
                <div class="sca-fg-offers">
                </div>
            </div>
            <div class="sca-fg-footer">
                  <span class="sca-fg-footer-content">
                    Created by
                    <a target="_blank" style="color: #5E5873;" href="https://apps.shopify.com/freegifts?utm_source=todayoffer&utm_medium=todayoffer_brandmark">
                      BOGOS
                    </a>
                  </span>
            </div>
        </div>
    {% endraw %}
</script>

<script id="sca_fg_today_offer_item_section" type="text/template">
    {% raw %}
        <div class="sca-fg-offer" data-fg-offer-id="{{ sca_fg_offer_id }}">
            <div class="sca-offer-info">
                <img
                        class="sca-img-offer"
                        width="50"
                        height="50"
                        loading="eager"
                        src="{{ sca_fg_offer_img }}"
                >
                <b class="sca-offer-title" sca-fg-today-offer-title-tooltip="{{ sca_fg_offer_title_tooltip }}" style="cursor: default">{{ sca_fg_offer_title }}</b>
            </div>
            <span class="sca-fg-icon-success">
                <svg
                    width="28"
                    height="28"
                    viewBox="0 0 28 28"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                >
                <rect x="1" y="1" width="27" height="27" rx="13.5" fill="#28C76F"></rect><path d="M8.5 15.4L13.645 19L20.5 10" stroke="white" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
            </span>
        </div>
    {% endraw %}
</script>

<script id="sca_fg_today_offer_widget" type="text/template">
    {% raw %}
        <img id="sca-fg-today-offer-widget-img" src="{{ sca_fg_today_offer_widget }}" width="50" height="50" alt="fg-widget-today-offer"/>
        <span class="sca-fg-count-offers"></span>
    {% endraw %}
</script>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://bogos-guideline.gitbook.io/user-guide/advanced-customization/advance-customization-for-devs/customize-using-bogos-template.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.