Waltt - Sales Sniper - How to install the application on a 1.0 theme ?

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" %}
			{% if meta_line[1].value %}
				{% assign list_line_keys_ordered = meta_line[1].value %}
			{% else %}
				{% assign list_line_keys_ordered = meta_line[1] %}
			{% endif %}  
		{% 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 %}
				{% if meta_line[1].value %}
					{% assign current_line = meta_line[1].value %} 
				{% else %}
					{% assign current_line = meta_line[1] %}
				{% endif %}  
				
			{% 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 %}
			{% if to_display != true %}
				{% for collection_p in product.collections %}
				   {% assign id_collection = collection_p.id | downcase %}
					{% for current_line_collection in current_line.filters.collections %}
					  {% if current_line_collection["id"] contains id_collection %}
					   {% assign to_display = true %} 
						 {% endif %}
					 {% endfor %}
				{% endfor %}
			 {% endif %}
			{% 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["extraFrom"]
														| replace: '{{to}}', extra_array["extraTo"]
														| replace: '{{frequency}}', extra_array["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["extraFrom"]
														| replace: '{{to}}', extra_array["extraTo"]
														| replace: '{{frequency}}', extra_array["extraFrequency"] %}
			{% endcase %}
			{% assign meta_value = meta_value | replace: '{{#', '<i class="' %}
			{% 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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
		<style>
		ul.product_extras_list{
			margin-left: 0;
			padding-left: 0;
			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;
		}

		/* Step 1: Common Properties: All required to make icons render reliably - we did this above but it's included here for the full demo */
  .icon::before {
    display: inline-block;
    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

Updated on: 22/11/2022