Snippets Collections
{%- if product.metafields.my_fields.product_list != blank -%}

	<div class="variant-list">
  
  		{% for p in product.metafields.my_fields.product_list.value %}
 
 		<a href="{{ p.url }}" data-color="{{ p.metafields.my_fields.colorname.value }}" class="variant-img {% if product.handle == p.handle %}variant-active-hover variant-selected{% else %}variant-not-hover{% endif %}">
          
			<img src="{{ p | image_url: width: 150 }}" alt="{{ p.title }}">
              
		</a>
 	
 		{% endfor %}

	</div>
         
{%- endif -%}
    <link rel="preload" as="font" href="//db.onlinewebfonts.com/t/b1edfa746f416280b3502ba39df2c3ae.woff2" type="font/woff2" crossorigin="anonymous">
    <link rel="preload" as="font" href="{{ 'Canela-Medium-Reduced.woff2' | asset_url }}" type="font/woff2" crossorigin="anonymous">
{% assign found = false %}
{% for c in product.collections %}
  {% if c.handle == "secret-sauce" %}
    {% assign found = true %}
  {% endif %}
{% endfor %}

{% if found == true %}
  <h1>You found the secret sauce!</h1>
{% endif %}
        <div class="swatches-wrapper">
          {% assign colors = "Navy, Grey, Pink" %}
          
          {% for option in product.options_with_values %}
            {% for variant in product.variants %}
              {% assign name = variant.title %}
              {% assign stringSplit = name | remove: ' ' | split: '-' %}
              {% for stringPart in stringSplit %}
          		{% if forloop.index == 1 %}
                  {% if colors contains stringPart %}
                  <div class="swatch-option {{stringPart}}" data-color="{{ variant.title }}" data-id="{{variant.id}}">
                    <span class="tooltip">{{ variant.title }}</span>
                  </div>
          			{%else%}
          			--2--
                  {%endif%}
          		{%endif%}
              {% endfor %} 	
            {% endfor %}
          {% endfor %}
        </div>
        <script>
          $('.swatch-option').click(function(){
            $('.swatch-option').removeClass('active')
            $(this).addClass('active');
          });
        </script>
<form class="filter-form">
2	
  	{%- for filter in collection.filters -%}
3	
    	<details class="filter-group">
4	
      	<summary class="filter-group-summary">
5	
        	<div>
6	
          	<span>{{ filter.label }}</span>
7	
8	
          	{%- if filter.active_values.size > 0 -%}
9	
            	<span>({{ filter.active_values.size }})</span>
10	
          	{%- endif -%}
11	
        	</div>
12	
      	</summary>
13	
14	
      	<div class="filter-group-display">
15	
        	<div class="filter-group-display__header">
16	
          	<span class="filter-group-display__header-selected">{{ filter.active_values.size }} selected</span>
17	
18	
          	{%- if filter.active_values.size > 0 -%}
19	
            	<a href="{{ filter.url_to_remove }}" class="filter-group-display__header-reset">Reset</a>
20	
          	{%- endif -%}
21	
        	</div>
22	
23	
        	{%- case filter.type -%}
24	
          	{%- when 'list' -%}
25	
            	<ul class="filter-group-display__list">
26	
              	{%- for filter_value in filter.values -%}
27	
                	<li class="filter-group-display__list-item">
28	
                  	<label for="Filter-{{ filter.param_name }}-{{ forloop.index }}">
29	
                  	<input type="checkbox"
30	
                    	name="{{ filter_value.param_name }}"
31	
                    	value="{{ filter_value.value }}"
32	
                    	id="Filter-{{ filter.param_name }}-{{ forloop.index }}"
33	
                    	{% if filter_value.active -%}checked{%- endif %}
34	
                    	{% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
35	
                  	>{{ filter_value.label }}</label>
36	
                	</li>
37	
              	{%- endfor -%}
38	
            	</ul>
39	
40	
            	<div class="filter-group-display__submit">
41	
              	<input type="submit" value="Apply">
42	
            	</div>
43	
          	{%- when 'price_range' -%}
44	
            	<div class="filter-group-display__price-range">
45	
              	<div class="filter-group-display__price-range-from">
46	
                	<span>{{ cart.currency.symbol }}</span>
47	
48	
                	<input name="{{ filter.min_value.param_name }}"
49	
                  	id="Filter-{{ filter.min_value.param_name }}"
50	
                  	{% if filter.min_value.value -%}
51	
                    	value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"
52	
                  	{%- endif %}
53	
                  	type="number"
54	
                  	placeholder="0"
55	
                  	min="0"
56	
                  	max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
57	
                	>
58	
59	
                	<label for="Filter-{{ filter.min_value.param_name }}">From</label>
60	
              	</div>
61	
              	<div class="filter-group-display__price-range-to">
62	
                	<span>{{ cart.currency.symbol }}</span>
63	
64	
                	<input name="{{ filter.max_value.param_name }}"
65	
                  	id="Filter-{{ filter.max_value.param_name }}"
66	
                  	{% if filter.max_value.value -%}
67	
                    	value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"
68	
                  	{%- endif %}
69	
                  	type="number"
70	
                  	placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
71	
                  	min="0"
72	
                  	max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
73	
                	>
74	
75	
                	<label for="Filter-{{ filter.max_value.param_name }}">To</label>
76	
              	</div>
77	
            	</div>
78	
79	
            	<div class="filter-group-display__submit">
80	
              	<input type="submit" value="Apply">
81	
            	</div>
82	
        	{%- endcase -%}
83	
      	</div>
84	
    	</details>
85	
  	{%- endfor -%}
86	
87	
  	<div class="active-filters">
88	
    	<a href="{{ collection.url }}?sort_by={{ collection.sort_by }}" class="active-filters__clear">Clear all</a>
89	
90	
    	{%- for filter in collection.filters -%}
91	
      	{%- if filter.type == "price_range" -%}
92	
        	{%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
93	
          	<a class="active-filters__remove-filter" href="{{ filter.url_to_remove }}">
94	
            	{%- assign min_value = filter.min_value.value | default: 0 -%}
95	
            	{%- assign max_value = filter.max_value.value | default: filter.range_max -%}
96	
            	{{ min_value | money }} - {{ max_value | money }} X
97	
          	</a>
98	
        	{%- endif -%}
99	
      	{%- else -%}
100	
        	{%- for filter_value in filter.active_values -%}
101	
          	<a class="active-filters__remove-filter" href="{{ filter_value.url_to_remove }}">
102	
            	{{ filter_value.label }} X
103	
          	</a>
104	
        	{%- endfor -%}
105	
      	{%- endif- %}
106	
    	{%- endfor -%}
107	
  	</div>
108	</form>
<section class="section-faq">
<div class="page-width">
    <div class="single-product__section-title-wrapper text-center">
      <h2 class="single-product__section-title ">{{ section.settings.title | escape }}</h2>
    </div>

    <div class="accordion-wrapper">
      <div class="accordion">
        {% for block in section.blocks %}
          <h5 class="accordion__title">{{block.settings.title}}</h5>
          <div class="accordion__panel">
            <div class="accordion__panel-text">{{block.settings.text}}</div>
          </div>
        {% endfor %}
      </div>
    </div>

</div>
</section>

<style>
  .accordion__title:after{
    background-image: url({{'arr-down.png' | asset_url}});
    background-position:center right;
    background-size:contain;
  }
  .accordion__title_active:after {
    background-image: url({{'arr-up.png' | asset_url}});
    background-position:center right;
    background-size:contain;
  }
</style>

<script>
   // ------------------ Accordion ----------------------\\
$('.accordion__title').click(function(){
  $(this).toggleClass('accordion__title_active');
  $(this).next().toggleClass('accordion__panel_active');
})
</script>


{% schema %}
  {
    "name": "FAQ",
    "class": "faq",
    "settings": [
		{
		"type": "text",
		"id": "title",
		"label": "Heading",
		"default": "FAQ"
		}
    ],
    "blocks": [
      {
        "type": "text",
        "name": "FAQ",
        "settings": [
          {
            "id": "title",
            "type": "text",
            "label": "Question",
            "default": "Sample FAQ question"
          },
          {
            "id": "text",
            "type": "richtext",
            "label": "FAQ answer",
            "default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit nisi ut condimentum ultricies. Praesent tincidunt facilisis ipsum quis porta. Morbi sed quam eu tortor volutpat porttitor sit amet at quam.</p>"
          }
        ]
      },
      {
        "type": "html",
        "name": "FAQ-HTML",
        "settings": [
          {
            "id": "title",
            "type": "text",
            "label": "Question",
            "default": "Sample FAQ question"
          },
          {
            "id": "text",
            "type": "html",
            "label": "FAQ answer",
            "default": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec blandit nisi ut condimentum ultricies. Praesent tincidunt facilisis ipsum quis porta. Morbi sed quam eu tortor volutpat porttitor sit amet at quam.</p>"
          }
        ]
      }
    ]
  }
{% endschema %}



<style>
/* accordion */
.accordion {
    padding: 25px 0 35px;
}

h5.accordion__title {
  background-color:#d9e3e9;
  line-height: 60px;
  padding: 0 25px;
  margin-top: 15px;
  margin-bottom:0;
  font-size: 16px;
  /*letter-spacing: 1px;*/
  font-weight:500;
  position: relative;
  cursor: pointer;
  transition: .3s;
  color:#16526a;
}
.accordion__title > p {
	font-size:16px;
  	color:#16526a;
}

h5.accordion__title:after {
    content: '';
    width: 30px;
    height: 17px;
    position: absolute;
    right: 35px;
    top: 27px;
    background-repeat: no-repeat;
    background-size: contain;
}

/*h5.accordion__title_active:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 15px solid #16526a;
    position: absolute;
    bottom: 0;
    -webkit-transition: .3s;
    transition: .3s;
    opacity: 1;
}*/

.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1s ease-in-out -600ms;
  background-color:#0d4d66;
}
.accordion__panel_active{
  max-height: 5000px;
  transition: max-height 1s ease-in-out 0s;
}
.accordion__panel-text{
  padding: 15px 30px 30px;
  video{
      max-width: 100%;
  }
}

.accordion__panel-text .product-info__table-wrapper {
    display: flex;
  	margin:0;
    width: 67%;
}
.accordion__panel-text > p {
	color:white;
}
.accordion__panel-video{
  width: 100%;
  height: 465px;
  @media(max-width: 1440px){
      height: 310px;
  }
}
@media(max-width: 767px){
  h5.accordion__title {
      line-height: 20px;
      padding: 15px 25px 15px 10px;
      font-size: 12px;
  }
  .accordion__title > p {
	font-size:12px;
  }
  .accordion__title:after {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
  }
}
.accordion__panel-text-title {
  font-weight: 700;
  margin: 10px 0;
}
.accordion__panel_tech-row{
  margin-bottom: 10px;
}
.accordion__title_active {
	color:#ffb5a7;
  	
}

/* End of accordion */
</style>
  {% capture inventoryTotal %}
  {% assign total=0 %}
  {%for variant in product.variants %}
    {% capture i %}{{ total | plus:variant.inventory_quantity }}{%endcapture%}
    {% assign total = i %}
  {%endfor%}
  {% if total ==< 307 %}
  {{total | minus: 305 }}
  {%endif%}
  {% endcapture %}

<div class="left-in-stock">*only {{ inventoryTotal }} left at this price</div>
<script>
var throttleWaiting = false;                 

function throttle (callback, limit) {
    return function () {                      
        if (!throttleWaiting) {                     
            callback.apply(this, arguments);  
            throttleWaiting = true;                  
            setTimeout(function () {          
                throttleWaiting = false;              
            }, limit);
        }
    }
}

  function fireResize() {
      throttle(function(){
       window.dispatchEvent(new Event('resize'));
      }, 250)();
  }
  document.addEventListener('scroll', fireResize, {passive: true});
</script>
star

Fri Jun 30 2023 08:17:27 GMT+0000 (Coordinated Universal Time) https://shopify.dev/docs/themes/product-merchandising/variants#shopify-option-selection

#liquid #shopify
star

Tue Jun 28 2022 11:24:00 GMT+0000 (Coordinated Universal Time)

#html #liquid #shopify
star

Thu Feb 03 2022 11:22:49 GMT+0000 (Coordinated Universal Time) Qureskincare

#liquid #html
star

Fri Jan 28 2022 10:16:38 GMT+0000 (Coordinated Universal Time)

#liquid
star

Thu Nov 18 2021 07:16:09 GMT+0000 (Coordinated Universal Time)

#html #javascript #liquid
star

Tue Nov 16 2021 09:09:15 GMT+0000 (Coordinated Universal Time) https://shopify.dev/themes/navigation-search/filtering

#html #liquid
star

Thu Oct 28 2021 10:21:11 GMT+0000 (Coordinated Universal Time)

#html #liquid #css
star

Mon Oct 25 2021 08:00:29 GMT+0000 (Coordinated Universal Time) https://community.shopify.com/c/shopify-design/need-guidance-if-total-inventory-quantity-for-a-product-is/td-p/610087

#liquid #html
star

Sat Aug 07 2021 00:39:18 GMT+0000 (Coordinated Universal Time)

#liquid

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension