{%- style -%}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
<style>
.custom-collection-slider {
margin: 0 auto;
}
.custom-collection-slider .icon-wrap {
display: none;
}
.custom-collection-slider .card__heading {
text-align: center;
color: #000;
}
.custom-collection-slider ul {
justify-content: center;
}
.custom-collection-slider .card__media,
.custom-collection-slider .card__inner {
border-radius: 999px !important;
}
.custom-collection-slider .card:hover .media.media--hover-effect>img:first-child:only-child {
transform: scale(1.1);
transition: .3s ease-in-out;
}
.custom-collection-slider .card__content .card__heading {
font-size: 14px;
}
.custom-collection-slider .grid__item {
width: calc(7.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
}
.custom-collection-slider .card__media {
border: 2px solid #dadada;
padding: 2px;
}
.custom-collection-slider .card:hover .card__media {
border: 3px solid #000;
transition: .3s ease-in-out;
}
@media only screen and (max-width: 800px) {
.custom-collection-slider ul {
display: -webkit-inline-box;
}
.custom-collection-slider .card__content .card__heading {
font-size: 13px;
}
.custom-collection-slider .grid__item {
width: calc(40% - var(--grid-mobile-horizontal-spacing) - 3rem) !important;
}
}
</style>
{%- liquid
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and section.blocks.size > columns_mobile_int
assign show_mobile_slider = true
endif
-%}
<div class="custom-collection-slider color-{{ section.settings.color_scheme }} gradient">
<div class="collection-list-wrapper page-width isolate{% if show_mobile_slider %} page-width-desktop{% endif %}{% if section.settings.title == blank %} no-heading{% endif %}{% if section.settings.show_view_all == false or section.blocks.size > collections.size %} no-mobile-link{% endif %} section-{{ section.id }}-padding">
{%- unless section.settings.title == blank -%}
<div class="title-wrapper-with-link{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% else %} title-wrapper--self-padded-mobile{% endif %} title-wrapper--no-top-margin">
<h2
id="SectionHeading-{{ section.id }}"
class="collection-list-title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
>
{{ section.settings.title }}
</h2>
{%- if section.settings.show_view_all and show_mobile_slider -%}
<a
href="{{ routes.collections_url }}"
id="ViewAll-{{ section.id }}"
class="link underlined-link large-up-hide{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
aria-labelledby="ViewAll-{{ section.id }} SectionHeading-{{ section.id }}"
>
{{- 'sections.collection_list.view_all' | t -}}
</a>
{%- endif -%}
</div>
{%- endunless -%}
<slider-component class="slider-mobile-gutter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<ul
class="collection-list contains-card contains-card--collection{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down{% if section.settings.swipe_on_mobile %} slider slider--tablet grid--peek{% endif %} collection-list--{{ section.blocks.size }}-items"
id="Slider-{{ section.id }}"
role="list"
>
{%- liquid
assign columns = section.blocks.size
if columns > 3
assign columns = 3
endif
-%}
{%- for block in section.blocks -%}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}"
class="collection-list__item grid__item{% if show_mobile_slider %} slider__slide{% endif %}{% if block.settings.collection.featured_image == nil %} collection-list__item--no-media{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{{ block.shopify_attributes }}
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{%- assign placeholder_image_index = forloop.index0 | modulo: 4 | plus: 1 -%}
{%- assign placeholder_image = 'collection-apparel-' | append: placeholder_image_index -%}
{% render 'card-collection',
card_collection: block.settings.collection,
media_aspect_ratio: section.settings.image_ratio,
columns: columns,
placeholder_image: placeholder_image
%}
</li>
{%- endfor -%}
</ul>
</slider-component>
{%- if section.settings.show_view_all and section.blocks.size < collections.size -%}
<div
class="center collection-list-view-all{% if show_mobile_slider %} small-hide medium-hide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
{% endif %}
>
<a
href="{{ routes.collections_url }}"
class="button"
id="ViewAllButton-{{ section.id }}"
aria-labelledby="ViewAllButton-{{ section.id }} SectionHeading-{{ section.id }}"
>
{{- 'sections.collection_list.view_all' | t -}}
</a>
</div>
{%- endif -%}
</div>
</div>
{% schema %}
{
"name": "Collection slider",
"tag": "section",
"class": "section section-collection-list",
"max_blocks": 15,
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "title",
"default": "Collections",
"label": "Heading"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "Small"
},
{
"value": "h1",
"label": "Medium"
},
{
"value": "h0",
"label": "Large"
},
{
"value": "hxl",
"label": "Extra large"
},
{
"value": "hxxl",
"label": "Extra extra large"
}
],
"default": "h1",
"label": "Heading size"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "Adapt"
},
{
"value": "portrait",
"label": "Portrait"
},
{
"value": "square",
"label": "Square"
}
],
"default": "square",
"label": "Image ratio",
"info": "Add images by editing your collections. Learn more"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 6,
"step": 1,
"default": 3,
"label": "Number of columns on desktop"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "To edit all your theme's colors, go to your color theme settings.",
"info": "To change the card color scheme, update your theme settings.",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": false,
"label": "Enable View all button if list includes more collections than shown"
},
{
"type": "header",
"content": "Mobile Layout"
},
{
"type": "select",
"id": "columns_mobile",
"options": [
{
"value": "1",
"label": "1 Column"
},
{
"value": "2",
"label": "2 Column"
}
],
"default": "1",
"label": "Number of columns on mobile"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "Enable swipe on mobile"
},
{
"type": "header",
"content": "Section padding"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Padding bottom",
"default": 36
}
],
"blocks": [
{
"type": "featured_collection",
"name": "Collection",
"settings": [
{
"type": "collection",
"id": "collection",
"label": "Collection"
}
]
}
],
"presets": [
{
"name": "Collection slider",
"blocks": [
{
"type": "featured_collection"
},
{
"type": "featured_collection"
},
{
"type": "featured_collection"
}
]
}
]
}
{% endschema %}
