Free Gift with Purchase Shopify Theme Snippet

cart-gift-with-purchase.liquid

{% assign cart-size = cart.total_price | divided_by: 100 %}
{% assign threshold-1 = section.settings.top_order_threshold | minus: 0.01 %}
{% assign threshold-2 = section.settings.second_order_threshold | minus: 0.01 %}
{% assign threshold-3 = section.settings.third_order_threshold | minus: 0.01 %}
{% assign threshold-4 = section.settings.fourth_order_threshold | minus: 0.01 %}

{% if cart-size > threshold-1 %}

{% unless section.settings.cart_gwp_product_1 == blank %}
	{% assign gwp1 = 0 %}
	{% assign product1 = section.settings.cart_gwp_product_1 %}
	{% assign product1-title = all_products[product1].title %}
    {% assign product1-url = all_products[product1].url %}
	{% for item in cart.items %}
  		{% if item.product.title contains product1-title %}
    		{% assign gwp1 = gwp1 | plus:1 %}
  		{% endif %}
	{% endfor %}
	{% if gwp1 == 0 %}
		<div class="cart-gwp"> 
  			<div class="cart-gwp-row">
  				<div class="cart-gwp-image"> 
    				<img src="{{ all_products[product1] | img_url: '300x' }}">
  				</div>
  				<div class="cart-gwp-text">
					{{ section.settings.cart_gwp_top_text_1 }}
                  <div class="top15">
                    {% if product1.has_only_default_variant %}
                    	{% assign variant1-id = all_products[product1].first_available_variant.id %}
                    <a href="/cart/add?id={{ variant1-id }}" class="button action_button button--add-to-cart cart-gwp-button">
                    {% else %}
      					<a href="{{ product1-url }}" class="button action_button button--add-to-cart cart-gwp-button">
                    {% endif %}
        					{{ section.settings.cart_gwp_button_1 }}
      					</a>
    				</div>
  				</div>
    		</div>
  			<div class="cart-gwp-details">{{ section.settings.cart_gwp_bottom_text_1 }}</div>
		</div>
{% endif %}
{% endunless %}

          
{% elsif section.settings.second_price_tier and cart-size > threshold-2 %}

{% unless section.settings.cart_gwp_product_2 == blank %}
	{% assign gwp2 = 0 %}
	{% assign product2 = section.settings.cart_gwp_product_2 %}
	{% assign product2-title = all_products[product2].title %}
    {% assign product2-url = all_products[product2].url %}
	{% for item in cart.items %}
  		{% if item.product.title contains product2-title %}
    		{% assign gwp2 = gwp2 | plus:1 %}
  		{% endif %}
	{% endfor %}
	{% if gwp2 == 0 %}
		<div class="cart-gwp"> 
  			<div class="cart-gwp-row">
  				<div class="cart-gwp-image"> 
    				<img src="{{ all_products[product2] | img_url: '300x' }}">
  				</div>
  				<div class="cart-gwp-text">
					{{ section.settings.cart_gwp_top_text_2 }}
                  <div class="top15">
                    {% if product2.has_only_default_variant %}
                    	{% assign variant2-id = all_products[product2].first_available_variant.id %}
                    <a href="/cart/add?id={{ variant2-id }}" class="button action_button button--add-to-cart cart-gwp-button">
                    {% else %}
      					<a href="{{ product2-url }}" class="button action_button button--add-to-cart cart-gwp-button">
                    {% endif %}
        					{{ section.settings.cart_gwp_button_2 }}
      					</a>
    				</div>
  				</div>
    		</div>
  			<div class="cart-gwp-details">{{ section.settings.cart_gwp_bottom_text_2 }}</div>
		</div>
{% endif %}
{% endunless %}

{% elsif section.settings.third_price_tier and cart-size > threshold-3 %}

{% unless section.settings.cart_gwp_product_3 == blank %}
	{% assign gwp3 = 0 %}
	{% assign product3 = section.settings.cart_gwp_product_3 %}
	{% assign product3-title = all_products[product3].title %}
    {% assign product3-url = all_products[product3].url %}
	{% for item in cart.items %}
  		{% if item.product.title contains product3-title %}
    		{% assign gwp3 = gwp3 | plus:1 %}
  		{% endif %}
	{% endfor %}
	{% if gwp3 == 0 %}
		<div class="cart-gwp"> 
  			<div class="cart-gwp-row">
  				<div class="cart-gwp-image"> 
    				<img src="{{ all_products[product3] | img_url: '300x' }}">
  				</div>
  				<div class="cart-gwp-text">
					{{ section.settings.cart_gwp_top_text_3 }}
                  <div class="top15">
                    {% if product3.has_only_default_variant %}
                    	{% assign variant3-id = all_products[product3].first_available_variant.id %}
                    <a href="/cart/add?id={{ variant3-id }}" class="button action_button button--add-to-cart cart-gwp-button">
                    {% else %}
      					<a href="{{ product3-url }}" class="button action_button button--add-to-cart cart-gwp-button">
                    {% endif %}
        					{{ section.settings.cart_gwp_button_3 }}
      					</a>
    				</div>
  				</div>
    		</div>
  			<div class="cart-gwp-details">{{ section.settings.cart_gwp_bottom_text_3 }}</div>
		</div>
{% endif %}
{% endunless %}       
          
{% elsif section.settings.fourth_price_tier and cart-size > threshold-4 %}

{% unless section.settings.cart_gwp_product_4 == blank %}
	{% assign gwp4 = 0 %}
	{% assign product4 = section.settings.cart_gwp_product_4 %}
	{% assign product4-title = all_products[product4].title %}
    {% assign product4-url = all_products[product4].url %}
	{% for item in cart.items %}
  		{% if item.product.title contains product4-title %}
    		{% assign gwp4 = gwp4 | plus:1 %}
  		{% endif %}
	{% endfor %}
	{% if gwp4 == 0 %}
		<div class="cart-gwp"> 
  			<div class="cart-gwp-row">
  				<div class="cart-gwp-image"> 
    				<img src="{{ all_products[product4] | img_url: '300x' }}">
  				</div>
  				<div class="cart-gwp-text">
					{{ section.settings.cart_gwp_top_text_4 }}
                  <div class="top15">
                    {% if product4.has_only_default_variant %}
                    	{% assign variant4-id = all_products[product4].first_available_variant.id %}
                    <a href="/cart/add?id={{ variant4-id }}" class="button action_button button--add-to-cart cart-gwp-button">
                    {% else %}
      					<a href="{{ product4-url }}" class="button action_button button--add-to-cart cart-gwp-button">
                    {% endif %}
        					{{ section.settings.cart_gwp_button_4 }}
      					</a>
    				</div>
  				</div>
    		</div>
  			<div class="cart-gwp-details">{{ section.settings.cart_gwp_bottom_text_4 }}</div>
		</div>
{% endif %}
{% endunless %}          
          
{% endif %}

{% style %}

.cart-gwp {
  padding: 20px;
  text-align: center;
  margin: 20px auto;
  max-width: 800px;
  border: 1px solid {{ section.settings.cart-gwp-border }};
  border-radius: 8px;
  background-color: {{ section.settings.cart-gwp-background }};
}
.cart-gwp-row {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: row /* works with row or column */
   flex-direction: row;
   -webkit-align-items: center;
   align-items: center;
   -webkit-justify-content: center;
   justify-content: center;
  width: 90%;
  margin: 0 auto;
}
.cart-gwp-button {
  max-width: 200px;
  margin-top: 3px;
}
.cart-gwp-details {
  font-size: 13px;
  line-height: 1.6em;
  max-width: 700px;
  margin: 10px auto 0;
}
.cart-gwp-image {
  min-width: 30%;
  margin-right: 15px;
  margin-bottom: -10px;
}

.cart-gwp-image img {
max-width:100%;
max-height: 170px;
  border-radius: 5px;
}

.cart-gwp-text {
  padding-left: 10px;
}

@media (max-width: 768px) {
  .cart-gwp-image {
    display: none;
  }
  .cart-gwp {
  width: 90%;
  }  
}
.top15 {
  margin-top: 15px;
}

{% endstyle %}