How to Add Liquid Code?

Liquid code should be added to your current theme. We provide the instruction for doing this, however, if it is hard for you, you can ask us to add it for you. And It's totally FREE for you. We recommend you that let us add it for you because it will help you to avoid hassle of doing it yourself.

Just create us a staff account (Products, Apps, Themes) for our email: [e-mail] or let us know via our live chat system then we will send a Collaborator Request to your store.

-------------------------------------------------------------------------------------------

Step1. Install Free Gifts app

Install the Free Gifts app from Shopify Appstore or our website.

Step 2. Edit the product.liquid file to hide gifts variants from product detail page

The app creates Gift variants (discounted product variants). These variants are: (Freegifts) : Discount 100% (xx% off) : Discount xx%

Important note: Do not edit the name or remove those variants. If you delete it, Free Gifts App will not work correctly. You can see the image below for more detail about these variants

So to hide these variants on your site, please go to back end -> Select your theme-> and click Edit HTML/CSS, you need to edit your product.liquid file. Please find the code line, which is bold as follows

<div class="select-wrappers{% if hide_default_title %} hidden{% endif %}"> <select id="product-select" name="id" class="hidden"> {% for variant in product.variants %} <option {% if variant == product.selected_or_first_available_variant %} selected{% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option> {% endfor %} </select> </div>

then add the code to before and end of the option tag as below:

<div class="select-wrappers{% if hide_default_title %} hidden{% endif %}"> <select id="product-select" name="id" class="hidden"> {% for variant in product.variants %} {%unless variant.metafields.secomapp.freegifts %} <option {% if variant == product.selected_or_first_available_variant %} selected{% endif %} value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option> {%endunless%} {% endfor %} </select> </div>

Note: If your theme using Shopify's ajax api. You also need to Edit extra code to get app working. Please follow this instruction.

Step 3. Create new liquid file for calculate price of product selected as gift item.

For the gift item, our Free gift app need to create a clone variants inside product selected as gift. That variant will have the price 0 or base on discount value of your promotion rule. For showing the correct product's price on your store you may need this snippet liquid file.

- Open Themes management page then edit your current theme

Edit_current_theme.png

- Create new snippet file: snippets/sca_freegift_price.liquid

new_snippet_file.png

- Insert those codes bellow then save this file:

{%assign sca_price = sca_freegift_price.price%} {%assign sca_price_min = sca_freegift_price.price_max%} {%assign sca_price_max = sca_freegift_price.price_min%} {%assign sca_compare_at_price = sca_freegift_price.compare_at_price%} {%assign sca_compare_at_price_min = sca_freegift_price.compare_at_price_max%} {%assign sca_compare_at_price_max = sca_freegift_price.compare_at_price_min%} {%assign sca_product_available = false %} {%assign sca_product_variantCount = 0 %} {% for variant in sca_freegift_price.variants %} {% unless variant.metafields.secomapp.freegifts %} {% unless variant.title contains '(Freegifts)' %} {% unless variant.title contains '% Off' %} {% unless variant.metafields.shappify_qb.qb_hide == "1" %} {% unless variant.metafields.shappify_bundle.is_bundle == "true" %} {% unless variant.metafields.brodev_scn.hide == "true" %}

{% if sca_price_min >= variant.price %} {% assign sca_price_min = variant.price %} {% assign sca_price = variant.price %} {%endif%} {% if sca_price_max <= variant.price %} {% assign sca_price_max = variant.price %} {%endif%} {%if variant.compare_at_price %} {% if sca_compare_at_price_min >= variant.compare_at_price %} {% assign sca_compare_at_price_min = variant.compare_at_price %} {% assign sca_compare_at_price = variant.compare_at_price %} {%endif%} {% if sca_compare_at_price_max <= variant.compare_at_price %} {% assign sca_compare_at_price_max = variant.compare_at_price %} {%endif%} {%endif%} {% if variant.available == true %} {% assign sca_product_available = true %} {% endif %} {% assign sca_product_variantCount = sca_product_variantCount | plus: 1 %} {%endunless%} {%endunless%} {%endunless%} {%endunless%} {%endunless%} {%endunless%} {% endfor %} {% if sca_price_min < sca_price_max %} {%assign sca_price_varies = true%} {%else%} {%assign sca_price_varies = false%} {%endif%}

{% if sca_compare_at_price_min < sca_compare_at_price_max %} {%assign sca_compare_at_price_varies = true%} {%else%} {%assign sca_compare_at_price_varies = false%} {%endif%}

Step 4. Edit the Liquid file to hide discounted prices from collection page (product listing)

Because we added new variants with discount price then the collection pages will show the price of products: "From x to y". So you need to edit the snippets code of product on collection page for fixing it. Normally the file is: product-loop.liquid, product-grid-list.liquid, snippet-product-item.liquid, product-block.liquid, collection.liquid ...

You can find this file by open the collection.liquid file and find the code look like below:

<div id="coll-product-list" class="grid-uniform product-list"> {% for product in collection.products %} {% assign grid_item_width = 'large--col-3 medium--col-4 small--col-6' %}

{% include 'snippet-product-item' %}

{% endfor %}

Insert this line right after the "for" loop like bellow (depend the parameter of for loop you will need to using the value: "product" or "item" or any other text) :

<div id="coll-product-list" class="grid-uniform product-list"> {% for product in collection.products %} {%include 'sca_freegift_price' with product %} {% assign grid_item_width = 'large--col-3 medium--col-4 small--col-6' %}

{% include 'snippet-product-item' %}

{% endfor %}

In this file (snippet-product-item.liquid), if contains any below code, please replace to new code as follow:

replace the code product.price to sca_price

replace the code product.price_max to sca_price_max

replace the code product.price_min to sca_price_min

replace the code product.compare_at_price to sca_compare_at_price

replace the code product.compare_at_price_max to sca_compare_at_price_max

replace the code product.compare_at_price_min to sca_compare_at_price_min

So we will do for the snippet-product-item.liquid as below

<div class="coll-prod-meta {% unless settings.show_buy_medallion %}no-medallion{% endunless %}"> <h5><a href="{{ product.url | within: collection }}">{{ product.title }}</a></h5> {% if product.compare_at_price > product.price %} <p class="coll-prod-price on-sale accent-text"> {{ product.price | money }} <em class="compare-at-price">{{ product.compare_at_price | money }}</em> </p> {% else %} <p class="coll-prod-price accent-text"> {% if product.price_varies %}From{% endif %} {{ product.price | money }} </p> {% endif %} </div><!-- .coll-prod-meta -->

and change the value to new value we calculated at top of file:

<div class="coll-prod-meta {% unless settings.show_buy_medallion %}no-medallion{% endunless %}"> <h5><a href="{{ product.url | within: collection }}">{{ product.title }}</a></h5> {% if sca_compare_at_price > sca_price %} <p class="coll-prod-price on-sale accent-text"> {{ sca_price | money }} <em class="compare-at-price">{{ sca_compare_at_price | money }}</em> </p> {% else %} <p class="coll-prod-price accent-text"> {% if product.price_varies %}From{% endif %} {{ sca_price | money }} </p> {% endif %} </div><!-- .coll-prod-meta -->