Collection Carousel Slider Section for Shopify Free
Want to enhance your Shopify store’s design with a sleek Collection Carousel Slider? This simple, step-by-step guide shows you how to implement a collection slider for free, with no need for paid apps! Follow the instructions and use the provided custom code to display your product collections in a dynamic, engaging way. A carousel slider can boost user engagement and help showcase your best-selling or featured products
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css"/>
{%- liquid
assign padding_horizontal = section.settings.padding_horizontal
assign padding_horizontal_mobile = section.settings.padding_horizontal_mobile
assign padding_top = section.settings.padding_top
assign padding_bottom = section.settings.padding_bottom
assign border_color = section.settings.border_color
assign border_thickness = section.settings.border_thickness
assign margin_top = section.settings.margin_top
assign margin_bottom = section.settings.margin_bottom
assign background_color = section.settings.background_color
assign background_gradient = section.settings.background_gradient
assign full_width = section.settings.full_width
assign content_width = section.settings.content_width
assign heading = section.settings.heading
assign heading_size = section.settings.heading_size
assign heading_color = section.settings.heading_color
assign heading_font = section.settings.heading_font
assign heading_height = section.settings.heading_height
assign heading_letter = section.settings.heading_letter
assign heading_align = section.settings.heading_align
assign sub_heading = section.settings.sub_heading
assign sub_heading_size = section.settings.sub_heading_size
assign sub_heading_color = section.settings.sub_heading_color
assign sub_heading_font = section.settings.sub_heading_font
assign sub_heading_height = section.settings.sub_heading_height
assign sub_heading_letter = section.settings.sub_heading_letter
assign sub_heading_align = section.settings.sub_heading_align
assign invert_content = section.settings.invert_content
assign link = section.settings.link
assign link_url = section.settings.link_url
assign link_size = section.settings.link_size
assign link_color = section.settings.link_color
assign link_hover_color = section.settings.link_hover_color
assign link_background_color = section.settings.link_background_color
assign link_background_hover_color = section.settings.link_background_hover_color
assign link_font = section.settings.link_font
assign link_height = section.settings.link_height
assign link_letter = section.settings.link_letter
assign link_position = section.settings.link_position
assign link_mobile = section.settings.link_mobile
assign collection = section.settings.collection
assign product_list = section.settings.product_list
assign arrow_size = section.settings.arrow_size
assign arrow_size_mobile = section.settings.arrow_size_mobile
assign arrow_color = section.settings.arrow_color
assign arrow_hover_color = section.settings.arrow_hover_color
assign arrow_bg_color = section.settings.arrow_bg_color
assign arrow_bg_hover_color = section.settings.arrow_bg_hover_color
assign arrow_border_color = section.settings.arrow_border_color
assign arrow_border_hover_color = section.settings.arrow_border_hover_color
assign progress_color = section.settings.progress_color
assign arrow_hide_mobile = section.settings.arrow_hide_mobile
assign items_mt = section.settings.items_mt
assign product_per_mobile = section.settings.product_per_mobile
assign product_per_desktop = section.settings.product_per_desktop
assign product_show = section.settings.product_show
assign stack_products = section.settings.stack_products
assign show_bar = section.settings.show_bar
assign top_bar = section.settings.top_ba
assign image_radius = section.settings.image_radius
assign use_custom_height = section.settings.use_custom_height
assign image_height_desktop = section.settings.image_height_desktop
assign image_height_mobile = section.settings.image_height_mobile
assign image_ration = section.settings.image_ration
assign show_second = section.settings.show_second
assign use_shadow = section.settings.use_shadow
assign card_padding_horizontal = section.settings.card_padding_horizontal
assign card_padding_vertical = section.settings.card_padding_vertical
assign card_content_bg_color = section.settings.card_content_bg_color
assign use_radius = section.settings.use_radius
assign card_title_color = section.settings.card_title_color
assign card_title_size = section.settings.card_title_size
assign card_title_font = section.settings.card_title_font
assign card_title_height = section.settings.card_title_height
assign card_title_letter = section.settings.card_title_letter
assign card_price_color = section.settings.card_price_color
assign card_price_size = section.settings.card_price_size
assign card_price_font = section.settings.card_price_font
assign card_price_height = section.settings.card_price_height
assign card_price_letter = section.settings.card_price_letter
assign card_price_mt = section.settings.card_price_mt
if product_list != blank
assign items = product_list
else
assign items = collection.products
endif
unless stack_products
assign product_per_mobile_big = product_per_mobile | times: 2 | round: 0
endunless
-%}
{%- style -%}
{{ heading_font | font_face: font_display: 'swap' }}
{{ sub_heading_font | font_face: font_display: 'swap' }}
{{ link_font | font_face: font_display: 'swap' }}
{{ card_title | font_face: font_display: 'swap' }}
{{ card_price | font_face: font_display: 'swap' }}
.section-{{ section.id }} {
border-top: solid {{ border_color }} {{ border_thickness }}px;
border-bottom: solid {{ border_color }} {{ border_thickness }}px;
margin-top: {{ margin_top | times: 0.75 | round: 0 }}px;
margin-bottom: {{ margin_bottom | times: 0.75 | round: 0 }}px;
overflow: hidden;
}
.section-{{ section.id }}-settings {
margin: 0 auto;
padding-top: {{ padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ padding_bottom | times: 0.75 | round: 0 }}px;
padding-left: {{ padding_horizontal_mobile }}rem;
padding-right: {{ padding_horizontal_mobile }}rem;
}
.featured-collection-top-{{ section.id }} h2 {
margin: 0;
font-size: {{ heading_size | times: 0.85 }}px;
color: {{ heading_color }};
line-height: {{ heading_height }}%;
letter-spacing: {{ heading_letter }}px;
text-transform: unset;
text-align: {{ heading_align }};
}
.featured-collection-wrapper-{{ section.id }} > p {
margin: 0;
font-size: {{ sub_heading_size | times: 0.85 }}px;
color: {{ sub_heading_color }};
line-height: {{ sub_heading_height }}%;
letter-spacing: {{ sub_heading_letter }}px;
text-transform: unset;
text-align: {{ sub_heading_align }};
}
.featured-collection-link-{{ section.id }} {
margin: 0;
font-size: {{ link_size | times: 0.85 }}px;
color: {{ link_color }};
line-height: {{ link_height }}%;
letter-spacing: {{ link_letter }}px;
text-transform: unset;
text-decoration: none;
transition: all 0.3s ease 0s;
}
.featured-collection-link-{{ section.id }} {
display: flex;
align-items: center;
gap: 10px;
width: fit-content;
}
.featured-collection-link-{{ section.id }}:hover{
transition: all 0.3s ease 0s;
color: {{ link_hover_color }};
}
.featured-collection-arrow-{{ section.id }} {
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background-color: {{ link_background_color }};
transition: all 0.3s ease 0s;
cursor: pointer;
}
.featured-collection-arrow-{{ section.id }} svg {
width: 5px;
height: 8px;
transform: rotate(-90deg);
}
.featured-collection-arrow-{{ section.id }} svg path {
transition: all 0.3s ease 0s;
color: {{ link_color }};
fill: {{ link_color }};
}
.featured-collection-link-{{ section.id }}:hover .featured-collection-arrow-{{ section.id }} {
transition: all 0.3s ease 0s;
background-color: {{ link_background_hover_color }};
}
.featured-collection-link-{{ section.id }}:hover .featured-collection-arrow-{{ section.id }} svg path {
fill: white;
}
.featured-collection-slider-{{ section.id }} {
margin-top: {{ items_mt | times: 0.75 | round: 0 }}px;
overflow: hidden;
position: relative;
padding-inline:6px;
}
.featured-collection-slider-{{ section.id }} .swiper-slide {
display: block;
height: auto;
text-decoration: none;
background-color: {{ card_content_bg_color }};
border-top-left-radius: {{ image_radius }}px;
border-top-right-radius: {{ image_radius }}px;
overflow: hidden;
box-sizing: border-box !important;
}
.featured-collection-items-{{ section.id }} {
margin-top: {{ items_mt | times: 0.75 | round: 0 }}px;
display: grid;
gap: 20px;
}
.featured-collection-item-{{ section.id }} {
display: block;
text-decoration: none;
background-color: {{ card_content_bg_color }};
border-top-left-radius: {{ image_radius }}px;
border-top-right-radius: {{ image_radius }}px;
overflow: hidden;
box-sizing: border-box !important;
}
.featured-collection-image-{{ section.id }} {
width: 100%;
border-radius: {{ image_radius }}px;
}
.featured-collection-image-{{ section.id }}.has-secondary-{{ section.id }} {
position: relative;
}
.featured-collection-image-{{ section.id }}.has-secondary-{{ section.id }} .featured-collection-second-image-{{ section.id }} {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0 auto;
display: none;
}
.featured-collection-image-{{ section.id }} img,
.featured-collection-image-{{ section.id }} svg {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: {{ image_radius }}px;
transition: all 0.3s ease 0s;
}
.featured-collection-image-{{ section.id }} svg {
background-color: gray;
}
.featured-collection-content-{{ section.id }} {
padding: {{ card_padding_vertical | times: 0.75 | round: 0 }}px {{ card_padding_horizontal | times: 0.75 | round: 0 }}px;
}
.featured-collection-title-{{ section.id }} {
margin: 0px;
font-size: {{ card_title_size | times: 0.85 }}px;
color: {{ card_title_color }};
line-height: {{ card_title_height }}%;
letter-spacing: {{ card_title_letter }}px;
text-transform: unset;
text-decoration: none;
font-weight: 600;
}
.featured-collection-price-{{ section.id }} {
margin: 0px;
margin-top: {{ card_price_mt | times: 0.75 | round: 0 }}px;
font-size: {{ card_price_size | times: 0.85 }}px;
color: {{ card_price_color }};
line-height: {{ card_price_height }}%;
letter-spacing: {{ card_price_letter }}px;
text-decoration: none;
text-transform: unset;
}
.featured-collection-price-{{ section.id }} span {
font-size: {{ card_price_size | times: 0.85 | minus: 1 }}px;
font-weight: 400;
-webkit-text-decoration: line-through;
text-decoration: line-through;
}
.featured-collection-btn-prev-{{ section.id }},
.featured-collection-btn-next-{{ section.id }} {
position: absolute;
z-index: 2;
top: 50%;
transform: translateY(-50%);
width: {{ arrow_size_mobile }}px;
height: {{ arrow_size_mobile }}px;
border: 1px solid {{ arrow_border_color }};
border-radius: 50%;
background: {{ arrow_bg_color }};
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease 0s;
cursor: pointer;
}
.featured-collection-btn-prev-{{ section.id }} span,
.featured-collection-btn-next-{{ section.id }} span {
color: {{ arrow_color }};
transition: all 0.3s ease 0s;
}
.featured-collection-btn-prev-{{ section.id }}:hover ,
.featured-collection-btn-next-{{ section.id }}:hover {
transition: all 0.3s ease 0s;
border: 1px solid {{ arrow_border_hover_color }};
background: {{ arrow_bg_hover_color }};
}
.featured-collection-btn-prev-{{ section.id }}:hover span,
.featured-collection-btn-next-{{ section.id }}:hover span {
fill: {{ arrow_hover_color }};
transition: all 0.3s ease 0s;
}
.featured-collection-btn-prev-{{ section.id }}.swiper-button-disabled,
.featured-collection-btn-next-{{ section.id }}.swiper-button-disabled {
opacity: 0.3;
}
.featured-collection-btn-prev-{{ section.id }} {
left: 3%;
}
.featured-collection-btn-next-{{ section.id }} {
right: 3%;
}
.featured-collection-pagination-{{ section.id }} {
position: static !important;
height: 3px;
{% if section.settings.top_bar %}
margin-bottom:15px;
{% else %}
margin-top: 15px;
{% endif %}
}
.featured-collection-pagination-{{ section.id }}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: {{ progress_color }};
}
.featured-collection-pagination-{{ section.id }}.hide {
display: none;
}
.featured-collection-btn-prev-{{ section.id }} .animate-icon,
.featured-collection-btn-next-{{ section.id }} .animate-icon {
pointer-events: none;
place-items: center;
display: grid;
}
.featured-collection-btn-prev-{{ section.id }} .animate-icon:before,
.featured-collection-btn-next-{{ section.id }} .animate-icon:before {
content: "";
grid-area: 1 / -1;
transition: all .2s ease-in-out;
width: 8.3px;
height: 8.3px;
transform: rotate(calc(1 * 45deg));
box-sizing: border-box;
border-style: solid;
border: 0px;
border-right: 2px solid currentColor;
border-top: 2px solid currentColor;
position: relative;
left: -1px;
}
.featured-collection-btn-prev-{{ section.id }} .animate-icon:before {
left: unset;
right: -1px;
border-right: 0px;
border-top: 0px;
border-bottom: 2px solid currentColor;
border-left: 2px solid currentColor;
}
.featured-collection-btn-next-{{ section.id }}:hover .animate-icon:before {
transform: translate(calc(1 * 0.125rem)) rotate(calc(1 * 45deg));
}
.featured-collection-btn-prev-{{ section.id }}:hover .animate-icon:before {
transform: translate(calc(-1 * 0.125rem)) rotate(calc(1 * 45deg));
}
.featured-collection-btn-prev-{{ section.id }} .animate-icon:after,
.featured-collection-btn-next-{{ section.id }} .animate-icon:after {
content: "";
grid-area: 1 / -1;
transition: all .2s ease-in-out;
width: 8px;
height: 1.6px;
transform-origin: center;
opacity: 0;
background: currentColor;
transform: scaleX(.5);
}
.featured-collection-btn-prev-{{ section.id }}:hover .animate-icon:after,
.featured-collection-btn-next-{{ section.id }}:hover .animate-icon:after {
opacity: 1;
transform: scaleX(1);
}
@media(min-width: 1024px) {
.section-{{ section.id }} {
margin-top: {{ margin_top }}px;
margin-bottom: {{ margin_bottom }}px;
}
.section-{{ section.id }}-settings {
padding: 0 5rem;
padding-top: {{ padding_top }}px;
padding-bottom: {{ padding_bottom }}px;
padding-left: {{ padding_horizontal }}rem;
padding-right: {{ padding_horizontal }}rem;
}
.featured-collection-wrapper-{{ section.id }} h2 {
font-size: {{ heading_size }}px;
}
.featured-collection-wrapper-{{ section.id }} > p {
font-size: {{ sub_heading_size }}px;
}
.featured-collection-link-{{ section.id }} {
font-size: {{ link_size }}px;
}
.featured-collection-title-{{ section.id }} {
font-size: {{ card_title_size }}px;
}
.featured-collection-price-{{ section.id }} {
margin-top: {{ card_price_mt }}px;
font-size: {{ card_price_size }}px;
}
.featured-collection-price-{{ section.id }} span {
font-size: {{ card_price_size | minus: 2 }}px;
}
.featured-collection-slider-{{ section.id }} {
margin-top: {{ items_mt }}px;
}
.featured-collection-content-{{ section.id }} {
padding: {{ card_padding_vertical }}px {{ card_padding_horizontal }}px;
}
.featured-collection-btn-prev-{{ section.id }},
.featured-collection-btn-next-{{ section.id }} {
width: {{ arrow_size }}px;
height: {{ arrow_size }}px;
}
.featured-collection-btn-prev-{{ section.id }},
.featured-collection-btn-next-{{ section.id }},
.featured-collection-btn-prev-{{ section.id }}.swiper-button-disabled,
.featured-collection-btn-next-{{ section.id }}.swiper-button-disabled {
opacity: 0;
pointer-events: none;
}
.featured-collection-slider-{{ section.id }}:hover .featured-collection-btn-prev-{{ section.id }},
.featured-collection-slider-{{ section.id }}:hover .featured-collection-btn-next-{{ section.id }} {
opacity: 1;
pointer-events: all;
transition: all 0.3s ease 0s;
}
.featured-collection-slider-{{ section.id }}:hover .featured-collection-btn-prev-{{ section.id }}.swiper-button-disabled,
.featured-collection-slider-{{ section.id }}:hover .featured-collection-btn-next-{{ section.id }}.swiper-button-disabled {
opacity: 0.3;
}
.featured-collection-pagination-{{ section.id }} {
{% if section.settings.top_bar %}
margin-bottom:15px;
{% else %}
margin-top: 15px;
{% endif %}
}
}
{%- endstyle -%}
{% unless full_width %}
<style>
.section-{{ section.id }}-settings {
max-width: {{ content_width }}rem;
}
</style>
{% endunless %}
{% if section.settings.heading_custom %}
<style>
.featured-collection-top-{{ section.id }} h2 {
font-family: {{ heading_font.family }}, {{ heading_font.fallback_families }};
font-weight: {{ heading_font.weight }};
font-style: {{ heading_font.style }};
}
</style>
{% endif %}
{% if section.settings.sub_heading_custom %}
<style>
.featured-collection-wrapper-{{ section.id }} h2 {
font-family: {{ sub_heading_font.family }}, {{ sub_heading_font.fallback_families }};
font-weight: {{ sub_heading_font.weight }};
font-style: {{ sub_heading_font.style }};
}
</style>
{% endif %}
{% if section.settings.link_custom %}
<style>
.featured-collection-link-{{ section.id }} {
font-family: {{ link_font.family }}, {{ link_font.fallback_families }};
font-weight: {{ link_font.weight }};
font-style: {{ link_font.style }};
}
</style>
{% endif %}
{% if section.settings.card_title_custom %}
<style>
.featured-collection-title-{{ section.id }} {
font-family: {{ card_title_font.family }}, {{ card_title_font.fallback_families }};
font-weight: {{ card_title_font.weight }};
font-style: {{ card_title_font.style }};
}
</style>
{% endif %}
{% if section.settings.card_price_custom %}
<style>
.featured-collection-price-{{ section.id }} {
font-family: {{ card_price_font.family }}, {{ card_price_font.fallback_families }};
font-weight: {{ card_price_font.weight }};
font-style: {{ card_price_font.style }};
}
</style>
{% endif %}
{% unless link_position %}
<style>
.featured-collection-top-{{ section.id }} {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
</style>
{% endunless %}
{% if use_custom_height %}
<style>
.featured-collection-image-{{ section.id }} {
height: {{ image_height_mobile }}px;
}
@media(min-width: 1024px) {
.featured-collection-image-{{ section.id }} {
height: {{ image_height_desktop }}px;
}
}
</style>
{% endif %}
{% if product_per_mobile == "1" %}
<style>
.featured-collection-items-{{ section.id }} {
grid-template-columns: 1fr;
}
</style>
{% elsif product_per_mobile == "2" %}
<style>
.featured-collection-items-{{ section.id }} {
grid-template-columns: 1fr 1fr;
}
</style>
{% endif %}
{% if product_per_desktop == 1 %}
<style>
@media(min-width: 992px) {
.featured-collection-items-{{ section.id }} {
grid-template-columns: 1fr;
}
}
</style>
{% elsif product_per_desktop == 2 %}
<style>
@media(min-width: 992px) {
.featured-collection-items-{{ section.id }} {
grid-template-columns: 1fr 1fr;
}
}
</style>
{% elsif product_per_desktop == 3 %}
<style>
@media(min-width: 992px) {
.featured-collection-items-{{ section.id }} {
grid-template-columns: 1fr 1fr 1fr;
}
}
</style>
{% elsif product_per_desktop == 4 %}
<style>
@media(min-width: 992px) {
.featured-collection-items-{{ section.id }} {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
}
</style>
{% elsif product_per_desktop == 5 %}
<style>
@media(min-width: 992px) {
.featured-collection-items-{{ section.id }} {
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
}
</style>
{% endif %}
{% if use_shadow %}
<style>
.featured-collection-item-{{ section.id }},
.featured-collection-slider-{{ section.id }} .swiper-slide{
box-shadow: 0px 0px 10px 0px rgba(0,0,0,.15);
}
.featured-collection-slider-{{ section.id }} {
padding: 10px;
}
</style>
{% endif %}
{% if use_radius %}
<style>
.featured-collection-item-{{ section.id }},
.featured-collection-slider-{{ section.id }} .swiper-slide{
border-radius: {{ image_radius }}px;
overflow: hidden !important;
}
.featured-collection-image-{{ section.id }},
.featured-collection-image-{{ section.id }} img,
.featured-collection-image-{{ section.id }} svg {
border-radius: 0px;
}
</style>
{% endif %}
{% if show_second %}
<style>
@keyframes fade-in-{{ section.id }} {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.featured-collection-slider-{{ section.id }} .swiper-slide:hover .featured-collection-second-image-{{ section.id }} {
display: block !important;
position: static !important;
-webkit-animation: fade-in-{{ section.id }} 0.5s;
animation: fade-in-{{ section.id }} 0.5s;
}
.featured-collection-slider-{{ section.id }} .swiper-slide:hover .has-secondary-{{ section.id }} .featured-collection-first-image-{{ section.id }} {
display: none;
}
.featured-collection-item-{{ section.id }}:hover .featured-collection-second-image-{{ section.id }} {
display: block !important;
position: static !important;
-webkit-animation: fade-in-{{ section.id }} 0.5s;
animation: fade-in-{{ section.id }} 0.5s;
}
.featured-collection-item-{{ section.id }}:hover .has-secondary-{{ section.id }} .featured-collection-first-image-{{ section.id }} {
display: none;
}
</style>
{% endif %}
{% if use_custom_height == false and image_ration == "square" %}
<style>
.featured-collection-image-{{ section.id }} {
aspect-ratio: 1 / 1;
}
</style>
{% elsif use_custom_height == false and image_ration == "portrait" %}
<style>
.featured-collection-image-{{ section.id }} {
aspect-ratio: 1 / 1.3;
}
</style>
{% endif %}
{% unless link_mobile %}
<style>
.featured-collection-link-{{ section.id }} {
display: none;
}
@media(min-width: 1024px) {
.featured-collection-link-{{ section.id }} {
display: flex;
}
}
</style>
{% endunless %}
{% if arrow_hide_mobile %}
<style>
.featured-collection-btn-prev-{{ section.id }},
.featured-collection-btn-next-{{ section.id }} {
display: none;
}
@media(min-width: 1024px) {
.featured-collection-btn-prev-{{ section.id }},
.featured-collection-btn-next-{{ section.id }} {
display: flex;
}
}
</style>
{% endif %}
{% if product_per_mobile == "1.3" %}
<style>
.featured-collection-slider-{{ section.id }} {
margin-left: -{{ padding_horizontal_mobile }}rem !important;
margin-right: -{{ padding_horizontal_mobile }}rem !important;
padding-left: {{ padding_horizontal_mobile }}rem !important;
padding-right: {{ padding_horizontal_mobile }}rem !important;
}
@media(min-width: 1024px) {
.featured-collection-slider-{{ section.id }} {
margin-left: 0rem !important;
margin-right: 0rem !important;
padding-left: 0rem !important;
padding-right: 0rem !important;
}
}
</style>
{% endif %}
{% if full_width %}
<style>
.featured-collection-slider-{{ section.id }} {
margin-left: -{{ padding_horizontal_mobile }}rem !important;
margin-right: -{{ padding_horizontal_mobile }}rem !important;
padding-left: {{ padding_horizontal_mobile }}rem !important;
padding-right: {{ padding_horizontal_mobile }}rem !important;
}
@media(min-width: 1024px) {
.featured-collection-slider-{{ section.id }} {
margin-left: -{{ padding_horizontal }}rem !important;
margin-right: -{{ padding_horizontal }}rem !important;
padding-left: {{ padding_horizontal }}rem !important;
padding-right: {{ padding_horizontal }}rem !important;
}
}
</style>
{% endif %}
<div class="section-{{ section.id }} featured-collection-{{ section.id }}" style="background-color:{{ background_color }}; background-image: {{ background_gradient }};">
<div class="section-{{ section.id }}-settings featured-collection-wrapper-{{ section.id }}">
{% if invert_content %}
{% if sub_heading != blank %}
<p>{{ sub_heading }}</p>
{% endif %}
{% endif %}
{% if heading != blank %}
<div class="featured-collection-top-{{ section.id }}">
<h2>{{ heading }}</h2>
<a class="featured-collection-link-{{ section.id }}" href="{{ link_url }}">
{{ link }}
<div class="featured-collection-arrow-{{ section.id }}">
<svg class="featured-collection-arrow-{{ section.id }}" aria-hidden="true" focusable="false" viewBox="0 0 10 6">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.354.646a.5.5 0 00-.708 0L5 4.293 1.354.646a.5.5 0 00-.708.708l4 4a.5.5 0 00.708 0l4-4a.5.5 0 000-.708z">
</svg>
</div>
</a>
</div>
{% endif %}
{% unless invert_content %}
{% if sub_heading != blank %}
<p>{{ sub_heading }}</p>
{% endif %}
{% endunless %}
{% unless stack_products %}
<div class="featured-collection-slider-{{ section.id }}" data-preview-mobile="{% if product_per_mobile == blank %} 1 {% else %}{{ product_per_mobile }}{% endif %}" data-preview-mobile-big="{% if product_per_mobile == blank %} 2 {% else %}{{ product_per_mobile | times: 2 | round: 0 }}{% endif %}" data-preview-desktop="{% if product_per_desktop == blank %} 4 {% else %}{{ product_per_desktop }}{% endif %}">
{% if top_bar %}
<div class="featured-collection-pagination-{{ section.id }} {% unless show_bar %} hide {% endunless %} swiper-pagination"></div>
{% endif %}
<div class="swiper-wrapper">
{% assign items_size = items | size %}
{% if items != blank %}
{% for item in items limit:product_show %}
<a href="{{ item.url }}" class="swiper-slide">
<div class="featured-collection-image-{{ section.id }} {% if item.images.size > 1 %} has-secondary-{{ section.id }} {% endif %}">
{% if item.images.size > 0 %}
<img class="{% if item.images.size > 1 %}featured-collection-first-image-{{ section.id }}{% endif %}" src="{{ item.featured_image | image_url }}">
{% else %}
{{ 'collection-1' | placeholder_svg_tag }}
{% endif %}
{% if item.images.size > 1 %}
{% for img in item.images %}
{% if forloop.index == 2 %}
<img class="featured-collection-second-image-{{ section.id }}" src="{{ img | image_url }}">
{% endif %}
{% endfor %}
{% endif %}
</div>
<div class="featured-collection-content-{{ section.id }}">
<p class="featured-collection-title-{{ section.id }}">{{ item.title }}</p>
<p class="featured-collection-price-{{ section.id }}">
{% if item.selected_or_first_available_variant.compare_at_price > item.selected_or_first_available_variant.price -%}
{{ item.selected_or_first_available_variant.price | money }}
<span>{{ item.selected_or_first_available_variant.compare_at_price | money }}</span>
{%- else -%}
{{- item.selected_or_first_available_variant.price | money -}}
{%- endif %}
</p>
</div>
</a>
{% endfor %}
{% else %}
{% for item in (1..product_show) %}
<a href="{{ item.url }}" class="swiper-slide">
<div class="featured-collection-image-{{ section.id }}">
{{ 'image' | placeholder_svg_tag }}
</div>
<div class="featured-collection-content-{{ section.id }}">
<p class="featured-collection-title-{{ section.id }}">Title</p>
<p class="featured-collection-price-{{ section.id }}">Price</p>
</div>
</a>
{% endfor %}
{% endif %}
</div>
<div class="featured-collection-btn-prev-{{ section.id }}">
<span class="animate-icon"></span>
</div>
<div class="featured-collection-btn-next-{{ section.id }}">
<span class="animate-icon"></span>
</div>
{% unless top_bar %}
<div class="featured-collection-pagination-{{ section.id }} {% unless show_bar %} hide {% endunless %} swiper-pagination"></div>
{% endunless %}
</div>
{% endunless %}
{% if stack_products %}
<div class="featured-collection-items-{{ section.id }}">
{% if items != blank %}
{% for item in items limit:product_show %}
<a href="{{ item.url }}" class="featured-collection-item-{{ section.id }}">
<div class="featured-collection-image-{{ section.id }} {% if item.images.size > 1 %} has-secondary-{{ section.id }} {% endif %}">
<img class="{% if item.images.size > 1 %}featured-collection-first-image-{{ section.id }}{% endif %}" src="{{ item.featured_image | image_url }}">
{% if item.images.size > 1 %}
{% for img in item.images %}
{% if forloop.index == 2 %}
<img class="featured-collection-second-image-{{ section.id }}" src="{{ img | image_url }}">
{% endif %}
{% endfor %}
{% endif %}
</div>
<div class="featured-collection-content-{{ section.id }}">
<p class="featured-collection-title-{{ section.id }}">{{ item.title }}</p>
<p class="featured-collection-price-{{ section.id }}">
{% if item.selected_or_first_available_variant.compare_at_price > item.selected_or_first_available_variant.price -%}
{{ item.selected_or_first_available_variant.price | money }}
<span>{{ item.selected_or_first_available_variant.compare_at_price | money }}</span>
{%- else -%}
{{- item.selected_or_first_available_variant.price | money -}}
{%- endif %}
</p>
</div>
</a>
{% endfor %}
{% else %}
{% for item in (1..product_show) %}
<a href="{{ item.url }}" class="featured-collection-item-{{ section.id }}">
<div class="featured-collection-image-{{ section.id }}">
{{ 'image' | placeholder_svg_tag }}
</div>
<div class="featured-collection-content-{{ section.id }}">
<p class="featured-collection-title-{{ section.id }}">Title</p>
<p class="featured-collection-price-{{ section.id }}">Price</p>
</div>
</a>
{% endfor %}
{% endif %}
</div>
{% endif %}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@6.8.4/swiper-bundle.min.js"></script>
<script>
function initFeaturedCollection() {
let item = document.querySelector('.featured-collection-slider-{{ section.id }}');
let perMobile = item.getAttribute('data-preview-mobile');
let perMobileBig = item.getAttribute('data-preview-mobile-big');
let perDesktop = item.getAttribute('data-preview-desktop');
const slider = new Swiper('.featured-collection-slider-{{ section.id }}', {
speed: 300,
spaceBetween: 20,
slidesPerView: 2,
navigation: {
nextEl: '.featured-collection-btn-next-{{ section.id }}',
prevEl: '.featured-collection-btn-prev-{{ section.id }}'
},
pagination: {
el: '.featured-collection-pagination-{{ section.id }}',
type: 'progressbar'
},
breakpoints: {
320: {
slidesPerView: perMobile,
},
768: {
slidesPerView: perMobileBig,
},
1024: {
slidesPerView: perDesktop,
}
}
})
}
initFeaturedCollection();
document.addEventListener('DOMContentLoaded', initFeaturedCollection);
if (Shopify.designMode) {
document.addEventListener('DOMContentLoaded', initFeaturedCollection);
document.addEventListener('shopify:section:select', initFeaturedCollection);
document.addEventListener('shopify:section:deselect', initFeaturedCollection);
document.addEventListener('shopify:inspector:activate', initFeaturedCollection);
document.addEventListener('shopify:section:unload', initFeaturedCollection);
document.addEventListener('shopify:section:load', initFeaturedCollection);
document.addEventListener('shopify:section:settings:change', initFeaturedCollection);
}
</script>
{% schema %}
{
"name": "Collection Carousel",
"settings": [
{
"type": "paragraph",
"content": "Support WebSensePro by [Subscribing our Channel](https:\/\/youtube.com\/@websensepro?sub_confirmation=1)"
},
{
"type": "header",
"content": "Save settings to display section correctly"
},
{
"type": "header",
"content": "Layout Settings"
},
{
"type": "range",
"id": "items_mt",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Cards Margin Top",
"default": 40
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "product_list",
"id": "product_list",
"label": "Products",
"info": "Replaces collection when selected."
},
{
"type": "checkbox",
"id": "stack_products",
"label": "Stack Products"
},
{
"type": "checkbox",
"id": "show_bar",
"label": "Show Progress Bar"
},
{
"type": "checkbox",
"id": "top_bar",
"label": "Top position bar"
},
{
"type": "range",
"id": "product_show",
"min": 1,
"max": 50,
"step": 1,
"label": "Product to Show",
"default": 10
},
{
"type": "range",
"id": "product_per_desktop",
"min": 1,
"max": 5,
"step": 1,
"label": "Product Per Row Desktop",
"default": 4
},
{
"type": "select",
"id": "product_per_mobile",
"options": [
{
"label": "1",
"value": "1"
},
{
"label": "1.3",
"value": "1.3"
},
{
"label": "2",
"value": "2"
}
],
"label": "Product per Row Mobile",
"default": "1"
},
{
"type": "header",
"content": "Card Settings"
},
{
"type": "range",
"id": "image_radius",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Image Border Radius",
"default": 12
},
{
"type": "select",
"id": "image_ration",
"label": "Image Aspect Ratio",
"default": "square",
"info": "When not selected 'Use Custom Height'",
"options": [
{
"label": "None",
"value": "none"
},
{
"label": "Square",
"value": "square"
},
{
"label": "Portrait",
"value": "portrait"
}
]
},
{
"type": "checkbox",
"id": "use_custom_height",
"label": "Use custom Height"
},
{
"type": "range",
"id": "image_height_desktop",
"min": 100,
"max": 600,
"step": 10,
"unit": "px",
"label": "Image Height Desktop",
"default": 400
},
{
"type": "range",
"id": "image_height_mobile",
"min": 50,
"max": 600,
"step": 10,
"unit": "px",
"label": "Image Height Mobile",
"default": 200
},
{
"type": "checkbox",
"id": "show_second",
"label": "Show Second Image on Hover",
"default": true
},
{
"type": "checkbox",
"id": "use_shadow",
"label": "Use Box Shadow"
},
{
"type": "checkbox",
"id": "use_radius",
"label": "Use Card Roundness"
},
{
"type": "range",
"id": "card_padding_horizontal",
"min": 0,
"max": 40,
"step": 4,
"unit": "px",
"label": "Card Padding Horizontal",
"default": 4
},
{
"type": "range",
"id": "card_padding_vertical",
"min": 0,
"max": 40,
"step": 4,
"unit": "px",
"label": "Card Padding Vertical",
"default": 16
},
{
"type": "header",
"content": "Card Title"
},
{
"type": "checkbox",
"id": "card_title_custom",
"label": "Use Custom Font",
"default": false
},
{
"type": "font_picker",
"id": "card_title_font",
"label": "Card Title Font Family",
"default": "assistant_n4"
},
{
"type": "range",
"id": "card_title_size",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Card Title Size",
"default": 24
},
{
"type": "range",
"id": "card_title_letter",
"min": 0,
"max": 5,
"step": 0.1,
"unit": "px",
"label": "Card Title Letter Spacing",
"default": 0
},
{
"type": "range",
"id": "card_title_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Card Title Line Height",
"default": 100
},
{
"type": "header",
"content": "Heading"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Featured collection"
},
{
"type": "checkbox",
"id": "heading_custom",
"label": "Use Custom Font",
"default": false
},
{
"type": "font_picker",
"id": "heading_font",
"label": "Heading Font Family",
"default": "assistant_n4"
},
{
"type": "range",
"id": "heading_size",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Heading Size",
"default": 50
},
{
"type": "range",
"id": "heading_letter",
"min": 0,
"max": 5,
"step": 0.1,
"unit": "px",
"label": "Heading Letter Spacing",
"default": 0
},
{
"type": "range",
"id": "heading_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Heading Line Height",
"default": 100
},
{
"type": "select",
"id": "heading_align",
"label": "Heading Text Align",
"default": "center",
"info": "If Link Under Heading",
"options": [
{
"label": "Center",
"value": "center"
},
{
"label": "Left",
"value": "left"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "header",
"content": "Subheading"
},
{
"type": "text",
"id": "sub_heading",
"label": "Subheading"
},
{
"type": "checkbox",
"id": "sub_heading_custom",
"label": "Use Custom Font",
"default": false
},
{
"type": "font_picker",
"id": "sub_heading_font",
"label": "Subheading Font Family",
"default": "assistant_n4"
},
{
"type": "range",
"id": "sub_heading_size",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Subheading Size",
"default": 50
},
{
"type": "range",
"id": "sub_heading_letter",
"min": 0,
"max": 5,
"step": 0.1,
"unit": "px",
"label": "Subheading Letter Spacing",
"default": 0
},
{
"type": "range",
"id": "sub_heading_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Subheading Line Height",
"default": 100
},
{
"type": "select",
"id": "sub_heading_align",
"label": "Subheading Text Align",
"default": "center",
"options": [
{
"label": "Center",
"value": "center"
},
{
"label": "Left",
"value": "left"
},
{
"label": "Right",
"value": "right"
}
]
},
{
"type": "checkbox",
"id": "invert_content",
"label": "Invert Heading with Subheading"
},
{
"type": "header",
"content": "Link"
},
{
"type": "text",
"id": "link",
"label": "Link",
"default": "View all"
},
{
"type": "url",
"id": "link_url",
"label": "Link URL"
},
{
"type": "checkbox",
"id": "link_custom",
"label": "Use Custom Font",
"default": false
},
{
"type": "font_picker",
"id": "link_font",
"label": "Link Font Family",
"default": "assistant_n4"
},
{
"type": "range",
"id": "link_size",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Link Size",
"default": 18
},
{
"type": "range",
"id": "link_letter",
"min": 0,
"max": 5,
"step": 0.1,
"unit": "px",
"label": "Link Letter Spacing",
"default": 0
},
{
"type": "range",
"id": "link_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Link Line Height",
"default": 100
},
{
"type": "checkbox",
"id": "link_position",
"label": "Link Under Heading"
},
{
"type": "checkbox",
"id": "link_mobile",
"label": "Show Link on Mobile",
"default": true
},
{
"type": "header",
"content": "Card Price"
},
{
"type": "checkbox",
"id": "card_price_custom",
"label": "Use Custom Font",
"default": false
},
{
"type": "font_picker",
"id": "card_price_font",
"label": "Card Price Font Family",
"default": "assistant_n4"
},
{
"type": "range",
"id": "card_price_size",
"min": 0,
"max": 72,
"step": 2,
"unit": "px",
"label": "Card Price Size",
"default": 16
},
{
"type": "range",
"id": "card_price_letter",
"min": 0,
"max": 5,
"step": 0.1,
"unit": "px",
"label": "Card Price Letter Spacing",
"default": 0
},
{
"type": "range",
"id": "card_price_height",
"min": 50,
"max": 200,
"step": 10,
"unit": "%",
"label": "Card Price Line Height",
"default": 100
},
{
"type": "range",
"id": "card_price_mt",
"min": 0,
"max": 80,
"step": 4,
"unit": "px",
"label": "Card Price Margin top",
"default": 12
},
{
"type": "header",
"content": "Arrow Settings"
},
{
"type": "range",
"id": "arrow_size",
"min": 20,
"max": 100,
"step": 2,
"unit": "px",
"label": "Arrow Size ",
"default": 50
},
{
"type": "range",
"id": "arrow_size_mobile",
"min": 20,
"max": 100,
"step": 2,
"unit": "px",
"label": "Arrow Size - Mobile",
"default": 40
},
{
"type": "checkbox",
"id": "arrow_hide_mobile",
"label": "Hide Arrow on Mobile"
},
{
"type": "header",
"content": "Link Colors"
},
{
"type": "color",
"label": "Link Color",
"id": "link_color",
"default": "#000000"
},
{
"type": "color",
"label": "Link hover Color",
"id": "link_hover_color",
"default": "#000000"
},
{
"type": "color",
"label": "Link Arrow Color",
"id": "link_arrow_color",
"default": "#000000"
},
{
"type": "color",
"label": "Link Background Arrow Color",
"id": "link_background_color",
"default": "#E6E6E6"
},
{
"type": "color",
"label": "Link Background Arrow Hover Color",
"id": "link_background_hover_color",
"default": "#000000"
},
{
"type": "header",
"content": "Card Colors"
},
{
"type": "color",
"label": "Card Background Color",
"id": "card_content_bg_color",
"default": "#FFFFFF"
},
{
"type": "color",
"label": "Card Title Color",
"id": "card_title_color",
"default": "#000000"
},
{
"type": "color",
"label": "Card Price Color",
"id": "card_price_color",
"default": "#000000"
},
{
"type": "header",
"content": "Navigation Colors"
},
{
"type": "color",
"label": "Arrow color",
"id": "arrow_color",
"default": "#000000"
},
{
"type": "color",
"label": "Arrow Hover color",
"id": "arrow_hover_color",
"default": "#000000"
},
{
"type": "color",
"label": "Arrow Background color",
"id": "arrow_bg_color",
"default": "#F2F2F2"
},
{
"type": "color",
"label": "Arrow Background Hover color",
"id": "arrow_bg_hover_color",
"default": "#F2F2F2"
},
{
"type": "color",
"label": "Arrow Border color",
"id": "arrow_border_color",
"default": "#C4C4C4"
},
{
"type": "color",
"label": "Arrow Border Hover color",
"id": "arrow_border_hover_color",
"default": "#C4C4C4"
},
{
"type": "color",
"label": "Progress Bar Color",
"id": "progress_color",
"default": "#000000"
},
{
"type": "header",
"content": "Section Colors"
},
{
"type": "color",
"label": "Heading Color",
"id": "heading_color",
"default": "#000000"
},
{
"type": "color",
"label": "Subheading Color",
"id": "sub_heading_color",
"default": "#000000"
},
{
"type": "color",
"label": "Section background",
"id": "background_color",
"default": "#FFFFFF"
},
{
"type": "color_background",
"id": "background_gradient",
"label": "Section background gradient"
},
{
"type": "color",
"label": "Border",
"id": "border_color",
"default": "#000000"
},
{
"type": "header",
"content": "Section margin (outside)"
},
{
"type": "range",
"id": "margin_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Margin top",
"default": 0
},
{
"type": "range",
"id": "margin_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "Margin bottom",
"default": 0
},
{
"type": "header",
"content": "Section padding (inside)"
},
{
"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
},
{
"type": "range",
"id": "padding_horizontal",
"min": 0,
"max": 30,
"step": 1,
"unit": "rem",
"label": "Padding sides",
"default": 5
},
{
"type": "range",
"id": "padding_horizontal_mobile",
"min": 0,
"max": 15,
"step": 0.5,
"unit": "rem",
"label": "Padding sides mobile",
"default": 1.5
},
{
"type": "header",
"content": "Section Settings"
},
{
"type": "checkbox",
"id": "full_width",
"label": "Full Width",
"default": false
},
{
"type": "range",
"id": "content_width",
"min": 0,
"max": 400,
"step": 10,
"unit": "rem",
"label": "Section content width",
"default": 130
},
{
"type": "range",
"id": "border_thickness",
"min": 0,
"max": 50,
"step": 1,
"unit": "px",
"label": "Border thickness",
"default": 0
}
],
"presets": [
{
"name": "Collection Carousel",
"settings": {
"product_per_desktop": 4,
"product_per_mobile": "1"
}
}
]
}
{% endschema %}
