Make slideshow and collections image fit correctly on dawn theme
Hi @ylst ,
May I suggest to update code these steps:
1. Go to Store Online-> theme -> edit code
2. Sections/slideshow.liquid
3. Replace with code below
{{ 'section-image-banner.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-slideshow.css' | asset_url | stylesheet_tag }}
{%- if section.settings.slide_height == 'adapt_image' and section.blocks.first.settings.image != blank -%}
{%- style -%}
@media screen and (max-width: 749px) {
#Slider-{{ section.id }}::before,
#Slider-{{ section.id }} .media::before,
#Slider-{{ section.id }}:not(.banner--mobile-bottom) .banner__content::before {
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
@media screen and (min-width: 750px) {
#Slider-{{ section.id }}::before,
#Slider-{{ section.id }} .media::before {
padding-bottom: {{ 1 | divided_by: section.blocks.first.settings.image.aspect_ratio | times: 100 }}%;
content: '';
display: block;
}
}
{%- endstyle -%}
{%- endif -%}
<style>
.slideshow .banner__media a,
.slideshow .banner__media img,
.slideshow .banner__media {
position: static!important;
height: auto!important;
font-size: 0;
width: 100%;
}
.slideshow.banner:after,
.slideshow .banner__media:after {
display: none;
}
.slideshow .slideshow__text-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<slideshow-component
class="slider-mobile-gutter{% if section.settings.layout == 'grid' %} page-width{% endif %}{% if section.settings.show_text_below %} mobile-text-below{% endif %}"
role="region"
aria-roledescription="{{ 'sections.slideshow.carousel' | t }}"
aria-label="{{ section.settings.accessibility_info | escape }}"
>
{%- if section.settings.auto_rotate and section.blocks.size > 1 -%}
<div class="slideshow__controls slideshow__controls--top slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}"
>
{% render 'icon-caret' %}
</button>
<div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
{%- if section.settings.slider_visual == 'counter' -%}
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
{%- else -%}
<div class="slideshow__control-wrapper">
{%- for block in section.blocks -%}
<button
class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
aria-controls="Slider-{{ section.id }}"
>
{%- if section.settings.slider_visual == 'numbers' -%}
{{ forloop.index -}}
{%- else -%}
<span class="dot"></span>
{%- endif -%}
</button>
{%- endfor -%}
</div>
{%- endif -%}
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}"
>
{% render 'icon-caret' %}
</button>
{%- if section.settings.auto_rotate -%}
<button
type="button"
class="slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"
aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"
>
{%- render 'icon-pause' -%}
{%- render 'icon-play' -%}
</button>
{%- endif -%}
</div>
<noscript>
<div class="slider-buttons">
<div class="slider-counter">
{%- for block in section.blocks -%}
<a
href="#Slide-{{ section.id }}-{{ forloop.index }}"
class="slider-counter__link link"
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
>
{{ forloop.index }}
</a>
{%- endfor -%}
</div>
</div>
</noscript>
{%- endif -%}
<div
class="slideshow banner banner--{{ section.settings.slide_height }} grid grid--1-col slider slider--everywhere{% if section.settings.show_text_below %} banner--mobile-bottom{% endif %}{% if section.blocks.first.settings.image == blank %} slideshow--placeholder{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}"
id="Slider-{{ section.id }}"
aria-live="polite"
aria-atomic="true"
data-autoplay="{{ section.settings.auto_rotate }}"
data-speed="{{ section.settings.change_slides_speed }}"
>
{%- for block in section.blocks -%}
<div
class="slideshow__slide grid__item grid--1-col slider__slide"
id="Slide-{{ section.id }}-{{ forloop.index }}"
{{ block.shopify_attributes }}
role="group"
aria-roledescription="{{ 'sections.slideshow.slide' | t }}"
aria-label="{{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
tabindex="-1"
>
<style>
#Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {
opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};
}
</style>
<div class="slideshow__media banner__media media{% if block.settings.image == blank %} placeholder{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}">
{% if block.settings.link %} <a href="{{ block.settings.link }}">{% endif %}
{%- if block.settings.image -%}
{%- liquid
assign height = block.settings.image.width | divided_by: block.settings.image.aspect_ratio | round
if section.settings.image_behavior == 'ambient'
assign sizes = '120vw'
assign widths = '450, 660, 900, 1320, 1800, 2136, 2400, 3600, 7680'
else
assign sizes = '100vw'
assign widths = '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840'
endif
assign fetch_priority = 'auto'
if section.index == 1
assign fetch_priority = 'high'
endif
-%}
{%- if forloop.first %}
{{
block.settings.image
| image_url: width: 3840
| image_tag: height: height, sizes: sizes, widths: widths, fetchpriority: fetch_priority
}}
{%- else -%}
{{
block.settings.image
| image_url: width: 3840
| image_tag: loading: 'lazy', height: height, sizes: sizes, widths: widths
}}
{%- endif -%}
{%- else -%}
{%- assign placeholder_slide = forloop.index | modulo: 2 -%}
{%- if placeholder_slide == 1 -%}
{{ 'hero-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- else -%}
{{ 'hero-apparel-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- endif -%}
{% if block.settings.link %} </a>{% endif %}
</div>
{%- if block.settings.subheading != blank or block.settings.heading != blank -%}
<div class="slideshow__text-wrapper banner__content banner__content--{{ block.settings.box_align }} page-width{% if block.settings.show_text_box == false %} banner--desktop-transparent{% endif %}{% if settings.animations_reveal_on_scroll and forloop.index == 1 %} scroll-trigger animate--slide-in{% endif %}">
<div class="slideshow__text banner__box content-container content-container--full-width-mobile color-{{ block.settings.color_scheme }} gradient slideshow__text--{{ block.settings.text_alignment }} slideshow__text-mobile--{{ block.settings.text_alignment_mobile }}">
{%- if block.settings.heading != blank -%}
<h2 class="banner__heading inline-richtext {{ block.settings.heading_size }}">
{{ block.settings.heading }}
</h2>
{%- endif -%}
{%- if block.settings.subheading != blank -%}
<div class="banner__text rte" {{ block.shopify_attributes }}>
<p>{{ block.settings.subheading }}</p>
</div>
{%- endif -%}
{%- if block.settings.button_label != blank -%}
<div class="banner__buttons">
<a
{% if block.settings.link %}
href="{{ block.settings.link }}"
{% else %}
role="link" aria-disabled="true"
{% endif %}
class="button {% if block.settings.button_style_secondary %}button--secondary{% else %}button--primary{% endif %}"
>
{{- block.settings.button_label | escape -}}
</a>
</div>
{%- endif -%}
</div>
</div>
{%- endif -%}
</div>
{%- endfor -%}
</div>
{%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}
<div class="slideshow__controls slider-buttons no-js-hidden{% if section.settings.show_text_below %} slideshow__controls--border-radius-mobile{% endif %}">
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'sections.slideshow.previous_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}"
>
{% render 'icon-caret' %}
</button>
<div class="slider-counter slider-counter--{{ section.settings.slider_visual }}{% if section.settings.slider_visual == 'counter' or section.settings.slider_visual == 'numbers' %} caption{% endif %}">
{%- if section.settings.slider_visual == 'counter' -%}
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
{%- else -%}
<div class="slideshow__control-wrapper">
{%- for block in section.blocks -%}
<button
class="slider-counter__link slider-counter__link--{{ section.settings.slider_visual }} link"
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
aria-controls="Slider-{{ section.id }}"
>
{%- if section.settings.slider_visual == 'numbers' -%}
{{ forloop.index -}}
{%- else -%}
<span class="dot"></span>
{%- endif -%}
</button>
{%- endfor -%}
</div>
{%- endif -%}
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'sections.slideshow.next_slideshow' | t }}"
aria-controls="Slider-{{ section.id }}"
>
{% render 'icon-caret' %}
</button>
{%- if section.settings.auto_rotate -%}
<button
type="button"
class="slideshow__autoplay slider-button no-js-hidden{% if section.settings.auto_rotate == false %} slideshow__autoplay--paused{% endif %}"
aria-label="{{ 'sections.slideshow.pause_slideshow' | t }}"
>
{%- render 'icon-pause' -%}
{%- render 'icon-play' -%}
</button>
{%- endif -%}
</div>
<noscript>
<div class="slider-buttons">
<div class="slider-counter">
{%- for block in section.blocks -%}
<a
href="#Slide-{{ section.id }}-{{ forloop.index }}"
class="slider-counter__link link"
aria-label="{{ 'sections.slideshow.load_slide' | t }} {{ forloop.index }} {{ 'general.slider.of' | t }} {{ forloop.length }}"
>
{{ forloop.index }}
</a>
{%- endfor -%}
</div>
</div>
</noscript>
{%- endif -%}
</slideshow-component>
{%- if request.design_mode -%}
<script src="{{ 'theme-editor.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
{% schema %}
{
"name": "t:sections.slideshow.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "select",
"id": "layout",
"options": [
{
"value": "full_bleed",
"label": "t:sections.slideshow.settings.layout.options__1.label"
},
{
"value": "grid",
"label": "t:sections.slideshow.settings.layout.options__2.label"
}
],
"default": "full_bleed",
"label": "t:sections.slideshow.settings.layout.label"
},
{
"type": "select",
"id": "slide_height",
"options": [
{
"value": "adapt_image",
"label": "t:sections.slideshow.settings.slide_height.options__1.label"
},
{
"value": "small",
"label": "t:sections.slideshow.settings.slide_height.options__2.label"
},
{
"value": "medium",
"label": "t:sections.slideshow.settings.slide_height.options__3.label"
},
{
"value": "large",
"label": "t:sections.slideshow.settings.slide_height.options__4.label"
}
],
"default": "medium",
"label": "t:sections.slideshow.settings.slide_height.label"
},
{
"type": "select",
"id": "slider_visual",
"options": [
{
"value": "dots",
"label": "t:sections.slideshow.settings.slider_visual.options__2.label"
},
{
"value": "counter",
"label": "t:sections.slideshow.settings.slider_visual.options__1.label"
},
{
"value": "numbers",
"label": "t:sections.slideshow.settings.slider_visual.options__3.label"
}
],
"default": "counter",
"label": "t:sections.slideshow.settings.slider_visual.label"
},
{
"type": "checkbox",
"id": "auto_rotate",
"label": "t:sections.slideshow.settings.auto_rotate.label",
"default": false
},
{
"type": "range",
"id": "change_slides_speed",
"min": 3,
"max": 9,
"step": 2,
"unit": "s",
"label": "t:sections.slideshow.settings.change_slides_speed.label",
"default": 5
},
{
"type": "header",
"content": "t:sections.all.animation.content"
},
{
"type": "select",
"id": "image_behavior",
"options": [
{
"value": "none",
"label": "t:sections.all.animation.image_behavior.options__1.label"
},
{
"value": "ambient",
"label": "t:sections.all.animation.image_behavior.options__2.label"
}
],
"default": "none",
"label": "t:sections.all.animation.image_behavior.label"
},
{
"type": "header",
"content": "t:sections.slideshow.settings.mobile.content"
},
{
"type": "checkbox",
"id": "show_text_below",
"label": "t:sections.slideshow.settings.show_text_below.label",
"default": true
},
{
"type": "header",
"content": "t:sections.slideshow.settings.accessibility.content"
},
{
"type": "text",
"id": "accessibility_info",
"label": "t:sections.slideshow.settings.accessibility.label",
"info": "t:sections.slideshow.settings.accessibility.info",
"default": "Slideshow about our brand"
}
],
"blocks": [
{
"type": "slide",
"name": "t:sections.slideshow.blocks.slide.name",
"limit": 5,
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.slideshow.blocks.slide.settings.image.label"
},
{
"type": "inline_richtext",
"id": "heading",
"default": "Image slide",
"label": "t:sections.slideshow.blocks.slide.settings.heading.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "inline_richtext",
"id": "subheading",
"default": "Tell your brand's story through images",
"label": "t:sections.slideshow.blocks.slide.settings.subheading.label"
},
{
"type": "text",
"id": "button_label",
"default": "Button label",
"label": "t:sections.slideshow.blocks.slide.settings.button_label.label",
"info": "t:sections.slideshow.blocks.slide.settings.button_label.info"
},
{
"type": "url",
"id": "link",
"label": "t:sections.slideshow.blocks.slide.settings.link.label"
},
{
"type": "checkbox",
"id": "button_style_secondary",
"label": "t:sections.slideshow.blocks.slide.settings.secondary_style.label",
"default": false
},
{
"type": "select",
"id": "box_align",
"options": [
{
"value": "top-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__1.label"
},
{
"value": "top-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__2.label"
},
{
"value": "top-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__3.label"
},
{
"value": "middle-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__4.label"
},
{
"value": "middle-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__5.label"
},
{
"value": "middle-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__6.label"
},
{
"value": "bottom-left",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__7.label"
},
{
"value": "bottom-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__8.label"
},
{
"value": "bottom-right",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.options__9.label"
}
],
"default": "middle-center",
"label": "t:sections.slideshow.blocks.slide.settings.box_align.label",
"info": "t:sections.slideshow.blocks.slide.settings.box_align.info"
},
{
"type": "checkbox",
"id": "show_text_box",
"label": "t:sections.slideshow.blocks.slide.settings.show_text_box.label",
"default": true
},
{
"type": "select",
"id": "text_alignment",
"options": [
{
"value": "left",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_1.label"
},
{
"value": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_2.label"
},
{
"value": "right",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.option_3.label"
}
],
"default": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment.label"
},
{
"type": "range",
"id": "image_overlay_opacity",
"min": 0,
"max": 100,
"step": 10,
"unit": "%",
"label": "t:sections.slideshow.blocks.slide.settings.image_overlay_opacity.label",
"default": 0
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"default": "scheme-1"
},
{
"type": "header",
"content": "t:sections.slideshow.settings.mobile.content"
},
{
"type": "select",
"id": "text_alignment_mobile",
"options": [
{
"value": "left",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__1.label"
},
{
"value": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__2.label"
},
{
"value": "right",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.options__3.label"
}
],
"default": "center",
"label": "t:sections.slideshow.blocks.slide.settings.text_alignment_mobile.label"
}
]
}
],
"presets": [
{
"name": "t:sections.slideshow.presets.name",
"blocks": [
{
"type": "slide"
},
{
"type": "slide"
}
]
}
]
}
{% endschema %}4. Assets/base.css
5. Add code below to end of file
.product-card-wrapper .card .card__inner:before {
display: none;
}
.product-card-wrapper .card .card__inner .card__media {
position: static;
}
.product-card-wrapper .card .card__inner .media img,
.product-card-wrapper .card .card__inner .media {
position: static!important;
}
.product-card-wrapper .card--media .card__inner .card__content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HI @EBOOST If you can help me this section
You can find this section on https://ilovewallpaper.com/ currently i am using trade theme
Hi,
May I suggest code below:
1. sections/collection-list.liquid
2. Replace code below
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{%- 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;
}
.section-{{ section.id }}-padding .card__information {
text-align: center;
}
.section-{{ section.id }}-padding .card__information .card__heading {
margin-bottom: 1rem;
}
.section-{{ section.id }}-padding .slider-buttons .slider-counter{
display: none;
}
.section-{{ section.id }}-padding .slider-buttons .slider-button {
border: 1px solid;
border-radius: 100%;
}
.section-{{ section.id }}-padding .slider-buttons .slider-button.slider-button--prev {
transform: rotate(90deg);
}
.section-{{ section.id }}-padding .slider-buttons .slider-button.slider-button--next {
transform: rotate(90deg);
}
.section-{{ section.id }}-padding .slider-buttons .slider-button .icon {
height: 2rem;
}
.section-{{ section.id }}-padding .slider-buttons {
gap: 2rem;
justify-content: flex-end;
position: relative;
top: -7rem;
}
@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 -%}
{%- liquid
assign collections_to_display = 5
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
assign show_desktop_slider = false
if section.settings.enable_desktop_slider and collections_to_display > section.settings.columns_desktop
assign show_desktop_slider = true
endif
-%}
<div class="color-{{ section.settings.color_scheme }} gradient">
<div class="collection-list-wrapper isolate {% 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=" collection__title title-wrapper title-wrapper--no-top-margin page-width">
<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>
</div>
{%- endunless -%}
<slider-component class=" {% if show_desktop_slider %} slider-component-desktop{% endif %} slider-mobile-gutter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- if show_mobile_slider or show_desktop_slider -%}
<div class="slider-buttons page-width">
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'general.slider.previous_slide' | t }}"
>
{% render 'icon-arrow' %}
</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'general.slider.of' | t }}</span>
<span class="slider-counter--total">{{ section.blocks.size }}</span>
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'general.slider.next_slide' | t }}"
>
{% render 'icon-arrow' %}
</button>
</div>
{%- 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 show_desktop_slider %} slider--desktop{% endif %} {% 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 or show_desktop_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',
block: block,
card_collection: block.settings.collection,
media_aspect_ratio: section.settings.image_ratio,
columns: columns
%}
</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": "t:sections.collection-list.name",
"tag": "section",
"class": "section section-collection-list",
"max_blocks": 15,
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "title",
"default": "Collections",
"label": "t:sections.collection-list.settings.title.label"
},
{
"type": "select",
"id": "heading_size",
"options": [
{
"value": "h2",
"label": "t:sections.all.heading_size.options__1.label"
},
{
"value": "h1",
"label": "t:sections.all.heading_size.options__2.label"
},
{
"value": "h0",
"label": "t:sections.all.heading_size.options__3.label"
}
],
"default": "h1",
"label": "t:sections.all.heading_size.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.collection-list.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.collection-list.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.collection-list.settings.image_ratio.options__3.label"
}
],
"default": "square",
"label": "t:sections.collection-list.settings.image_ratio.label",
"info": "t:sections.collection-list.settings.image_ratio.info"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 6,
"step": 1,
"default": 3,
"label": "t:sections.collection-list.settings.columns_desktop.label"
},
{
"type": "checkbox",
"id": "enable_desktop_slider",
"label": "t:sections.featured-collection.settings.enable_desktop_slider.label",
"default": false
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "t:sections.all.colors.label",
"info": "t:sections.all.colors.has_cards_info",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "show_view_all",
"default": false,
"label": "t:sections.collection-list.settings.show_view_all.label"
},
{
"type": "header",
"content": "t:sections.collection-list.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"options": [
{
"value": "1",
"label": "t:sections.collection-list.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.collection-list.settings.columns_mobile.options__2.label"
}
],
"default": "1",
"label": "t:sections.collection-list.settings.columns_mobile.label"
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.collection-list.settings.swipe_on_mobile.label"
},
{
"type": "header",
"content": "t:sections.all.padding.section_padding_heading"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_top",
"default": 36
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "t:sections.all.padding.padding_bottom",
"default": 36
}
],
"blocks": [
{
"type": "featured_collection",
"name": "t:sections.collection-list.blocks.featured_collection.name",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "t:sections.slideshow.blocks.slide.settings.image.label"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.collection-list.blocks.featured_collection.settings.collection.label"
}
]
}
],
"presets": [
{
"name": "t:sections.collection-list.presets.name",
"blocks": [
{
"type": "featured_collection"
},
{
"type": "featured_collection"
},
{
"type": "featured_collection"
}
]
}
]
}
{% endschema %}3. snippets/card-collection.liquid
4. Replace code below
{% comment %}
Renders a collection card
Accepts:
- card_collection: {Object} Collection Liquid object
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- columns: {Number}
- extend_height: {Boolean} Card height extends to available container space. Default: false (optional)
- wrapper_class: {String} Wrapper class for card (optional)
- placeholder_image: {String} Placeholder image when collection is empty (optional)
Usage:
{% render 'card-collection' %}
{% endcomment %}
{%- liquid
assign ratio = 1
assign collectionImg = block.settings.image | default: card_collection.featured_image
if collectionImg and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif collectionImg and media_aspect_ratio == 'adapt'
assign ratio = collectionImg.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
assign card_color_scheme = settings.card_color_scheme
assign card_style = settings.card_style
if wrapper_class == null or wrapper_class == 'none'
assign card_color_scheme = settings.collection_card_color_scheme
assign card_style = settings.collection_card_style
endif
-%}
<div class="card-wrapper animate-arrow {% if wrapper_class and wrapper_class != 'none' %}{{ wrapper_class }}{% else %}collection-card-wrapper{% endif %}">
<div
class="
card
card--{{ card_style }}
{% if collectionImg %} card--media{% else %} card--text{% endif %}
{% if card_style == 'card' %} color-{{ card_color_scheme }} gradient{% endif %}
{% if extend_height %} card--extend-height{% endif %}
{% if collectionImg == nil and card_style == 'card' %} ratio{% endif %}
"
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
>
<div
class="card__inner {% if card_style == 'standard' %}color-{{ card_color_scheme }} gradient{% endif %}{% if collectionImg or card_style == 'standard' %} ratio{% endif %}"
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
>
{%- if collectionImg -%}
<div class="card__media">
<div class="media media--transparent media--hover-effect">
<img
srcset="
{%- if collectionImg.width >= 165 -%}{{ collectionImg | image_url: width: 165 }} 165w,{%- endif -%}
{%- if collectionImg.width >= 330 -%}{{ collectionImg | image_url: width: 330 }} 330w,{%- endif -%}
{%- if collectionImg.width >= 535 -%}{{ collectionImg | image_url: width: 535 }} 535w,{%- endif -%}
{%- if collectionImg.width >= 750 -%}{{ collectionImg | image_url: width: 750 }} 750w,{%- endif -%}
{%- if collectionImg.width >= 1000 -%}{{ collectionImg | image_url: width: 1000 }} 1000w,{%- endif -%}
{%- if collectionImg.width >= 1500 -%}{{ collectionImg | image_url: width: 1500 }} 1500w,{%- endif -%}
{%- if collectionImg.width >= 3000 -%}{{ collectionImg | image_url: width: 3000 }} 3000w,{%- endif -%}
{{ collectionImg | image_url }} {{ collectionImg.width }}w
"
src="{{ collectionImg | image_url: width: 1500 }}"
sizes="
(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: columns }}px,
(min-width: 750px) {% if columns > 1 %}calc((100vw - 10rem) / 2){% else %}calc(100vw - 10rem){% endif %},
calc(100vw - 3rem)
"
alt="{{ collectionImg.alt | escape }}"
height="{{ collectionImg.height }}"
width="{{ collectionImg.width }}"
loading="lazy"
class="motion-reduce"
>
</div>
</div>
{%- endif -%}
{%- if card_collection == blank -%}
<div class="card__media">
{{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- else -%}
<div class="card__content">
<div class="card__information">
<h3 class="card__heading">
<a
{% if card_collection == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ card_collection.url }}"
{% endif %}
class="full-unstyled-link"
>
{%- if card_collection.title != blank -%}
{{- card_collection.title | escape -}}
{%- else -%}
{{ 'onboarding.collection_title' | t }}
{%- endif -%}
{%- if card_collection.description == blank -%}
<span class="icon-wrap">{% render 'icon-arrow' %}</span>
{%- endif %}
</a>
</h3>
{%- if card_collection.description != blank -%}
<p class="card__caption">
{{- card_collection.description | strip_html | truncatewords: 12 -}}
<span class="icon-wrap"> {% render 'icon-arrow' %}</span>
</p>
{%- endif -%}
</div>
</div>
{%- endif -%}
</div>
{%- if card_collection != blank and card_style == 'card' or collectionImg -%}
<div class="card__content">
<div class="card__information">
<h3 class="card__heading">
{{- card_collection.title | escape -}}
</h3>
<a
{% if card_collection == blank %}
role="link" aria-disabled="true"
{% else %}
href="{{ card_collection.url }}"
{% endif %}
class="button"
>
Shop Now
</a>
</div>
</div>
{%- endif -%}
{%- if card_collection == blank -%}
<div class="card__content">
<div class="card__information">
<h3 class="card__heading card__heading--placeholder">
{{ 'onboarding.collection_title' | t }}
</h3>
<a role="link" aria-disabled="true" class="button">
Shop Now
</a>
</div>
</div>
{%- endif -%}
</div>
</div>
Thank you that is so good but one more thing can i add this section without changing old section and also how i can remove this sliding bar
again Thank you for your help 🙌🙌
Community Blog Articles
Canadian merchants: Update account details by March 24, 2025 to continue us...
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025
New learning path from Shopify Academy: How to create a digital marketing s...
Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025
Expert insights on conversion rate optimization (CRO) from Shopify Academy ...
Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025