First you will go to the code editor of your store.
Then you create a new Snippet and you paste this code inside ==>

{% if content_for_header contains "sniper.js" %}
{% assign meta_lines = shop.metafields.ssniper_v01 %}
{% assign list_line_keys_ordered = null %}
{% for meta_line in meta_lines %}
{% if meta_line[0] == "list-lines-order" %}
{% assign list_line_keys_ordered = meta_line[1] %}
{% endif %}
{% endfor %}
<ul class="product_extras_list">
{% for current_line_key in list_line_keys_ordered %}
{% assign current_line_key = null %}
{% assign current_line = null %}

{% for meta_line in meta_lines %}
{% if meta_line[0] == current_line_key %}
{% assign current_line = meta_line[1] %}
{% endif %}
{% endfor %}
{% if current_line == null %}
{% continue %}
{% endif %}
{% if current_line.filters.all != true %}
{% assign to_display = false %}
{% for current_line_product in current_line.filters.products %}
{% if current_line_product["id"] contains product.id %}
{% assign to_display = true %}
{% endif %}
{% endfor %}
{% for current_line_collection in current_line.filters.collections %}
{% if current_line_collection["id"] contains collection %}
{% assign to_display = true %}
{% endif %}
{% endfor %}
{% if to_display == false %}
{% continue %}
{% endif %}
{% endif %}
{% assign meta_value = current_line.textEditor.htmlContent %}
{% assign extra_array = current_line.extra %}
{% case extra_array["extraType"] %}
{% when "time" %}
{% assign data_extratime = '<span class="timer_extra" data-extratype="time" data-extratime="time,'
| append: extra_array["timer"]["dateStart"] | append: ","
| append: extra_array["timer"]["dateEnd"] | append: ","
| append: extra_array["loop"] | append: ","
| append: extra_array["timer"]["labelDay"] | append: ","
| append: extra_array["timer"]["labelHour"] | append: ","
| append: extra_array["timer"]["labelMinute"] | append: ","
| append: extra_array["timer"]["labelSecond"] | append: ","
| append: extra_array["timer"]["plural"] | append: ","
| append: "true,"
| append: extra_array["actionName"] | append: '"></span>' %}
{% assign meta_value = meta_value | replace: '{{extra}}', data_extratime %}
{% when "number" %}
{% assign meta_value = meta_value | replace: '{{extra}}', '<span class="number_extra" data-extratype="number" data-extrafrequency="{{frequency}}" data-extrafrom="{{from}}" data-extrato="{{to}}">{{extra}}</span>'
| replace: '{{extra}}', " "
| replace: '{{from}}', extra_array["number"]["extraFrom"]
| replace: '{{to}}', extra_array["number"]["extraTo"]
| replace: '{{frequency}}', extra_array["number"]["extraFrequency"] %}
{% when "random" %}
{% assign meta_value = meta_value | replace: '{{extra}}', '<span class="random_extra" data-extratype="random" data-extrafrequency="{{frequency}}" data-extrafrom="{{from}}" data-extrato="{{to}}">{{extra}}</span>'
| replace: '{{extra}}', " "
| replace: '{{from}}', extra_array["number"]["extraFrom"]
| replace: '{{to}}', extra_array["number"]["extraTo"]
| replace: '{{frequency}}', extra_array["number"]["extraFrequency"] %}
{% endcase %}
{% assign meta_value = meta_value | replace: '{{#', '<i class="im ' %}
{% assign meta_value = meta_value | replace: '#}}', '"></i>' %}
<li class="product_extra_item">{{meta_value}}</li>
{% endfor %}
</ul>

<link rel="stylesheet" type="text/css" href="https://cdn.iconmonstr.com/1.3.0/css/iconmonstr-iconic-font.min.css">
<style>
ul.product_extras_list{
padding-top: 5px;
padding-bottom: 20px;
list-style: none;
clear:both;
}
ul.product_extras_list p{
margin: 0;
padding: 0;
}[]
li.product_extra_item{
padding-top: 3px;
padding-bottom: 3px;
line-height: 1.5;
}

.im {
vertical-align:middle;
font-style: normal;
font-variant-ligatures: inherit;
font-variant-caps: inherit;
font-variant-numeric: inherit;
font-variant-east-asian: inherit;
font-weight: inherit;
font-stretch: normal;
font-size: inherit;
line-height: 1;
font-family: iconmonstr-iconic-font !important;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
</style>
{% endif %}

Then you look for the file of your product pages. They are often called "Featured-product.liquid".
Once inside this file you will search for "Button" to find the Add to cart button.
And finally you will paste this code under the <button> tag == > {% include 'sales-sniper' %}

Video Tutorial
Was this article helpful?
Cancel
Thank you!