Blog Detail

<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">

{% comment %}

* Make sure you have the Flickity plugin installed and the proper license for this to function on your store

* Plugin, licensing, and documentation at https://flickity.metafizzy.co/

{% end comment %}

{% assign collection_main = collections[section.settings.collection_main] %}

{% assign collection_limit = section.settings.collection_limit %}

{% assign cell_align = section.settings.cell_align %}

{% assign wrap_around = section.settings.wrap_around %}

{% assign img_width = section.settings.img_width | append: 'x' %}

<div class="flickity-section-{{ section.id }} flickity-index-slider collection" style="background-color: {{ section.settings.bg }}">

<div class="page-width">

<div>

<p class="text-title text-center" style="margin-bottom:{{ section.settings.title_mb }}px">{{ section.settings.title }}</p>

</div>

<div class="flickity-section__carousel carousel-{{section.id }} text-center"

data-flickity='{

"cellAlign": "{{ cell_align }}",

"pageDots": false,

"freeScroll": true,

"contain": true,

"wrapAround": {{ wrap_around }}

}'>

{% for product in collection_main.products limit: collection_limit %}

{%- if product.metafields.inventory.ShappifyHidden == 'true' -%}{%- continue -%}{%- endif -%}

{% assign first_variant = product.selected_or_first_available_variant %}

{% assign featured_img_src = first_variant.featured_img.src | default: product.featured_image.src %}

{% assign price = first_variant.price %}

{% assign compare_at_price = first_variant.compare_at_price %}

<div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">

<a href="{{ product.url }}">

<img class="lazy2" data-src="{{ featured_img_src | img_url: img_width }}" alt="{{ product.featured_img.alt }}" />

</a>

<a href="{{ product.url }}">

<h5>{{ product.title }}</h5>

</a>

{% if compare_at_price > price %}

<s class="product__compare-at-price">{{ compare_at_price | money }}</s>

<p class="product__product-price">{{ price | money }}</p>

{% else %}

<p class="product__product-price">{{ price | money }}</p>

{% endif %}

</div>

{% endfor %}

{% comment %}

{% for block in section.blocks %}

{% assign block_product = all_products[block.settings.featured_product] %}

{% assign block_first_variant = block_product.selected_or_first_available_variant %}

{% assign featured_img_src = block_first_variant.featured_img.src | default: block_product.featured_image.src %}

{% assign price = block_first_variant.price %}

{% assign compare_at_price = block_first_variant.compare_at_price %}

<div class="carousel__cell" style="width:{{ section.settings.cell_width }};margin-right:{{ section.settings.mr }}px">

{% if block.settings.featured_product != blank %}

<a href="{{ block_product.url }}">

<img class="lazy2" data-src="{{ featured_img_src | img_url: img_width }}" alt="{{ block_product.featured_img.alt }}" />

</a>

{% else %}

{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}

{% endif %}

<a href="{{ block_product.url }}">

<h5>{{ block_product.title }}</h5>

</a>

{% if compare_at_price > price %}

<s class="block-product__compare-at-price">{{ compare_at_price | money }}</s>

<p class="block-product__product-price">{{ price | money }}</p>

{% else %}

<p class="block-product__product-price">{{ price | money }}</p>

{% endif %}

</div>

{% endfor %}

{% endcomment %}

</div>

</div>

</div>

{% schema %}

{

"name": "Collection Slider",

"settings": [

{

"type": "collection",

"id": "collection_main",

"label": "Choose a Collection"

},

{

"type": "range",

"id": "collection_limit",

"min": 2,

"max": 50,

"step": 1,

"unit": ".",

"label": "How many products to show",

"default": 4

},

{

"type": "color",

"id": "bg",

"label": "Background Color"

},

{

"type": "text",

"id": "title",

"label": "Title",

"default": "Featured Collection Slider"

},

{

"type": "range",

"id": "img_width",

"min": 200,

"max": 600,

"step": 5,

"unit": "px",

"label": "Image Width",

"default": 200

},

{

"type": "select",

"id": "cell_align",

"label": "Slide Alignment",

"options": [

{

"value": "center",

"label": "Center"

},

{

"value": "left",

"label": "Left"

}

],

"default": "center"

},

{

"type": "range",

"id": "title_mb",

"min": 30,

"max": 120,

"step": 1,

"unit": "px",

"label": "Title Margin Bottom",

"default": 48

},

{

"type": "select",

"id": "cell_width",

"label": "Choose number of slides to show on start",

"options": [

{

"value": "25%",

"label": "Four"

},

{

"value": "20%",

"label": "Five"

},

{

"value": "16.6666667%",

"label": "Six"

},

{

"value": "12.5%",

"label": "Eight"

}

],

"default": "25%"

},

{

"type": "radio",

"id": "wrap_around",

"label": "Enable Wrap Around (endless scrolling)",

"options": [

{

"value": "true",

"label": "True"

},

{

"value": "false",

"label": "False"

}

],

"default": "true"

},

{

"type": "range",

"id": "mr",

"min": 0,

"max": 48,

"step": 1,

"unit": "px",

"label": "Cell Margin Right",

"default": 16,

"info": "Save page to see changes."

}

],

"presets": [

{

"name": "Collection Slider",

"category": "Slider"

}

]

}

{% end schema %}

<script src=“https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js”></script>

<link rel=“stylesheet” href=“https://unpkg.com/flickity@2/dist/flickity.min.css”>