Snippets Collections
        <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

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

#html #liquid
star

Thu Oct 28 2021 10:21:11 GMT+0000 (UTC)

#html #liquid #css
star

Mon Oct 25 2021 08:00:29 GMT+0000 (UTC) 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 (UTC)

#liquid

Save snippets that work with our extensions

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