If product in collection

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

  {% 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>

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

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

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

{% 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 %}

    <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">

{%- 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 -%}