Hey,
I’m using the latest version of the spotlight theme(code is very similar to dawn). Currently I’m experiencing too big images on my featured collection(slider). I’m trying to fix this for weeks. Today I’m already sitting on it around 4-5 hours and I’m still finding no solution. Changing the image size at its own is no solution for me. Currently it looks like this:
My current fix for this was hardcoding the image size via css for every screen size but this is neither responsible nor functionally good. Actually, I would’ve been cool with that but on different screen sizes the slider count bugs and shows one more slide at the pagination, even tho there is noone. This is how it should look like:
I’ve browsed the whole web about this and tried every solution but honestly, nothing works for me. I’m in despair. If you need any infos, code etc. please let me know. I’m thankful for every solution.
Unfortunately I’m right now not able to share my webpage to let you guys inspect it, because the second version(second picture) is live right now. I can only see the first version(first picture) via the customizer from shopify. If there is a possibility to host it on a different domain lmk.
I’ve figured, that the base.css controls the grid and this might be the reason why the pictures act like that.
the css which controls the grid:
/* component-grid */
.grid {
display: flex;
flex-wrap: wrap;
margin-bottom: 2rem;
padding: 0;
list-style: none;
column-gap: var(--grid-mobile-horizontal-spacing);
row-gap: var(--grid-mobile-vertical-spacing);
}
@media screen and (min-width: 750px) {
.grid {
column-gap: var(--grid-desktop-horizontal-spacing);
row-gap: var(--grid-desktop-vertical-spacing);
}
}
.grid:last-child {
margin-bottom: 0;
}
.grid__item {
width: calc(25% - var(--grid-mobile-horizontal-spacing) * 3 / 4);
max-width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
flex-grow: 1;
flex-shrink: 0;
}
@media screen and (min-width: 750px) {
.grid__item {
width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
}
.grid--gapless.grid {
column-gap: 0;
row-gap: 0;
}
@media screen and (max-width: 749px) {
.grid__item.slider__slide--full-width {
width: 100%;
max-width: none;
}
}
.grid--1-col .grid__item {
max-width: 100%;
width: 100%;
}
.grid--3-col .grid__item {
width: calc(33.33% - var(--grid-mobile-horizontal-spacing) * 2 / 3);
}
@media screen and (min-width: 750px) {
.grid--3-col .grid__item {
width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
}
}
.grid--2-col .grid__item {
width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}
@media screen and (min-width: 750px) {
.grid--2-col .grid__item {
width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
.grid--4-col-tablet .grid__item {
width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}
.grid--3-col-tablet .grid__item {
width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
}
.grid--2-col-tablet .grid__item {
width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
}
@media screen and (max-width: 989px) {
.grid--1-col-tablet-down .grid__item {
width: 100%;
max-width: 100%;
}
.slider--tablet.grid--peek {
margin: 0;
width: 100%;
}
.slider--tablet.grid--peek .grid__item {
box-sizing: content-box;
margin: 0;
}
.slider.slider--tablet .scroll-trigger.animate--slide-in,
.slider.slider--mobile .scroll-trigger.animate--slide-in {
animation: none;
opacity: 1;
transform: inherit;
}
.scroll-trigger:not(.scroll-trigger--offscreen) .slider--tablet {
animation: var(--animation-slide-in);
}
}
@media screen and (min-width: 990px) {
.grid--6-col-desktop .grid__item {
width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
max-width: calc(16.66% - var(--grid-desktop-horizontal-spacing) * 5 / 6);
}
.grid--5-col-desktop .grid__item {
width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
}
.grid--4-col-desktop .grid__item {
width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}
.grid--3-col-desktop .grid__item {
width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
max-width: calc(33.33% - var(--grid-desktop-horizontal-spacing) * 2 / 3);
}
.grid--2-col-desktop .grid__item {
width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
max-width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
.slider.slider--desktop .scroll-trigger.animate--slide-in {
animation: none;
opacity: 1;
transform: inherit;
}
.scroll-trigger:not(.scroll-trigger--offscreen) .slider--desktop {
animation: var(--animation-slide-in);
}
}
@media screen and (min-width: 990px) {
.grid--1-col-desktop {
flex: 0 0 100%;
max-width: 100%;
}
.grid--1-col-desktop .grid__item {
width: 100%;
max-width: 100%;
}
}
@media screen and (max-width: 749px) {
.grid--peek.slider--mobile {
margin: 0;
width: 100%;
}
.grid--peek.slider--mobile .grid__item {
box-sizing: content-box;
margin: 0;
}
.grid--peek .grid__item {
min-width: 35%;
}
.grid--peek.slider .grid__item:first-of-type {
margin-left: 1.5rem;
}
/* Fix to show some space at the end of our sliders in all browsers */
.grid--peek.slider:after {
margin-left: calc(-1 * var(--grid-mobile-horizontal-spacing));
}
.grid--2-col-tablet-down .grid__item {
width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2);
}
.slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item,
.grid--peek .grid__item {
width: calc(50% - var(--grid-mobile-horizontal-spacing) - 3rem);
}
.slider--tablet.grid--peek.grid--1-col-tablet-down .grid__item,
.slider--mobile.grid--peek.grid--1-col-tablet-down .grid__item {
width: calc(100% - var(--grid-mobile-horizontal-spacing) - 3rem);
}
}
@media screen and (min-width: 750px) and (max-width: 989px) {
.slider--tablet.grid--peek .grid__item {
width: calc(25% - var(--grid-desktop-horizontal-spacing) - 3rem);
}
.slider--tablet.grid--peek.grid--3-col-tablet .grid__item {
width: calc(33.33% - var(--grid-desktop-horizontal-spacing) - 3rem);
}
.slider--tablet.grid--peek.grid--2-col-tablet .grid__item,
.slider--tablet.grid--peek.grid--2-col-tablet-down .grid__item {
width: calc(50% - var(--grid-desktop-horizontal-spacing) - 3rem);
}
.slider--tablet.grid--peek .grid__item:first-of-type {
margin-left: 1.5rem;
}
.grid--2-col-tablet-down .grid__item {
width: calc(50% - var(--grid-desktop-horizontal-spacing) / 2);
}
.grid--1-col-tablet-down.grid--peek .grid__item {
width: calc(100% - var(--grid-desktop-horizontal-spacing) - 3rem);
}
}
/* component-media */
.media {
display: block;
background-color: rgba(var(--color-foreground), 0.1);
position: relative;
overflow: hidden;
}
.media--transparent {
background-color: transparent;
}
.media>*:not(.zoom):not(.deferred-media__poster-button),
.media model-viewer {
display: block;
max-width: 100%;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.media>img {
object-fit: cover;
object-position: center center;
transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.media--square {
padding-bottom: 100%;
}
.media--portrait {
padding-bottom: 125%;
}
.media--landscape {
padding-bottom: 66.6%;
}
.media--cropped {
padding-bottom: 56%;
}
.media--16-9 {
padding-bottom: 56.25%;
}
.media--circle {
padding-bottom: 100%;
border-radius: 50%;
}
.media.media--hover-effect>img+img {
opacity: 0;
}
@media screen and (min-width: 990px) {
.media--cropped {
padding-bottom: 63%;
}
}
deferred-media {
display: block;
}
Additional css(component-slider.css) :
slider-component {
--desktop-margin-left-first-item: max(
5rem,
calc((100% - var(--page-width) + 10rem - var(--grid-desktop-horizontal-spacing)) / 2)
);
position: relative;
display: block;
}
slider-component.slider-component-full-width {
--desktop-margin-left-first-item: 1.5rem;
}
@media screen and (max-width: 749px) {
slider-component.page-width {
padding: 0 1.5rem;
}
}
@media screen and (min-width: 749px) and (max-width: 990px) {
slider-component.page-width {
padding: 0 5rem;
}
}
@media screen and (max-width: 989px) {
.no-js slider-component .slider {
padding-bottom: 3rem;
}
}
.slider__slide {
--focus-outline-padding: 0.5rem;
--shadow-padding-top: calc((var(--shadow-vertical-offset) * -1 + var(--shadow-blur-radius)) * var(--shadow-visible));
--shadow-padding-bottom: calc((var(--shadow-vertical-offset) + var(--shadow-blur-radius)) * var(--shadow-visible));
scroll-snap-align: start;
flex-shrink: 0;
padding-bottom: 0;
}
.slider__slide[aria-hidden="true"] {
visibility: hidden;
}
@media screen and (max-width: 749px) {
.slider.slider--mobile {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1.5rem;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
/* Fix to show some space at the end of our sliders in all browsers */
.slider--mobile:after {
content: '';
width: 0;
padding-left: 1.5rem;
}
.slider.slider--mobile .slider__slide {
margin-bottom: 0;
padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
}
.slider.slider--mobile.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
padding-bottom: var(--focus-outline-padding);
}
.slider.slider--mobile.contains-content-container .slider__slide {
--focus-outline-padding: 0rem;
}
}
@media screen and (min-width: 750px) {
.slider.slider--tablet-up {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1rem;
-webkit-overflow-scrolling: touch;
}
.slider.slider--tablet-up .slider__slide {
margin-bottom: 0;
}
}
@media screen and (max-width: 989px) {
.slider.slider--tablet {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scroll-padding-left: 1.5rem;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
/* Fix to show some space at the end of our sliders in all browsers */
.slider--tablet:after {
content: '';
width: 0;
padding-left: 1.5rem;
margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
}
.slider.slider--tablet .slider__slide {
margin-bottom: 0;
padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
}
.slider.slider--tablet.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
padding-bottom: var(--focus-outline-padding);
}
.slider.slider--tablet.contains-content-container .slider__slide {
--focus-outline-padding: 0rem;
}
}
.slider--everywhere {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
}
.slider.slider--everywhere .slider__slide {
margin-bottom: 0;
scroll-snap-align: center;
}
@media screen and (min-width: 990px) {
.slider-component-desktop.page-width {
max-width: none;
}
.slider--desktop {
position: relative;
flex-wrap: inherit;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
scroll-padding-left: var(--desktop-margin-left-first-item);
}
/* Fix to show some space at the end of our sliders in all browsers */
.slider--desktop:after {
content: '';
width: 0;
padding-left: 5rem;
margin-left: calc(-1 * var(--grid-desktop-horizontal-spacing));
}
.slider.slider--desktop .slider__slide {
margin-bottom: 0;
padding-top: max(var(--focus-outline-padding), var(--shadow-padding-top));
padding-bottom: max(var(--focus-outline-padding), var(--shadow-padding-bottom));
}
.slider--desktop .slider__slide:first-child {
scroll-margin-left: var(--desktop-margin-left-first-item);
}
.slider-component-full-width .slider--desktop {
scroll-padding-left: 1.5rem;
}
.slider-component-full-width .slider--desktop .slider__slide:first-child {
margin-left: 1.5rem;
scroll-margin-left: 1.5rem;
}
/* Fix to show some space at the end of our sliders in all browsers */
.slider-component-full-width .slider--desktop:after {
padding-left: 1.5rem;
}
.slider--desktop.grid--5-col-desktop .grid__item {
width: calc((100% - var(--desktop-margin-left-first-item)) / 5 - var(--grid-desktop-horizontal-spacing) * 2);
}
.slider--desktop.grid--4-col-desktop .grid__item {
width: calc((100% - var(--desktop-margin-left-first-item)) / 4 - var(--grid-desktop-horizontal-spacing) * 3);
}
.slider--desktop.grid--3-col-desktop .grid__item {
width: calc((100% - var(--desktop-margin-left-first-item)) / 3 - var(--grid-desktop-horizontal-spacing) * 4);
}
.slider--desktop.grid--2-col-desktop .grid__item {
width: calc((100% - var(--desktop-margin-left-first-item)) / 2 - var(--grid-desktop-horizontal-spacing) * 5);
}
.slider--desktop.grid--1-col-desktop .grid__item {
width: calc((100% - var(--desktop-margin-left-first-item)) - var(--grid-desktop-horizontal-spacing) * 9);
}
.slider.slider--desktop.contains-card--standard .slider__slide:not(.collection-list__item--no-media) {
padding-bottom: var(--focus-outline-padding);
}
.slider.slider--desktop.contains-content-container .slider__slide {
--focus-outline-padding: 0rem;
}
}
@media (prefers-reduced-motion) {
.slider {
scroll-behavior: auto;
}
}
/* Scrollbar */
.slider {
scrollbar-color: rgb(var(--color-foreground)) rgba(var(--color-foreground), 0.04);
-ms-overflow-style: none;
scrollbar-width: none;
}
.slider::-webkit-scrollbar {
height: 0.4rem;
width: 0.4rem;
display: none;
}
.no-js .slider {
-ms-overflow-style: auto;
scrollbar-width: auto;
}
.no-js .slider::-webkit-scrollbar {
display: initial;
}
.slider::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-foreground));
border-radius: 0.4rem;
border: 0;
}
.slider::-webkit-scrollbar-track {
background: rgba(var(--color-foreground), 0.04);
border-radius: 0.4rem;
}
.slider-counter {
display: flex;
justify-content: center;
min-width: 4.4rem;
}
@media screen and (min-width: 750px) {
.slider-counter--dots {
margin: 0 1.2rem;
}
}
.slider-counter__link {
padding: 1rem;
}
@media screen and (max-width: 749px) {
.slider-counter__link {
padding: 0.7rem;
}
}
.slider-counter__link--dots .dot {
width: 1rem;
height: 1rem;
border-radius: 50%;
border: 0.1rem solid rgba(var(--color-foreground), 0.5);
padding: 0;
display: block;
}
.slider-counter__link--active.slider-counter__link--dots .dot {
background-color: rgb(var(--color-foreground));
}
@media screen and (forced-colors: active) {
.slider-counter__link--active.slider-counter__link--dots .dot {
background-color: CanvasText;
}
}
.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot {
border-color: rgb(var(--color-foreground));
}
.slider-counter__link--dots .dot,
.slider-counter__link--numbers {
transition: transform 0.2s ease-in-out;
}
.slider-counter__link--active.slider-counter__link--numbers,
.slider-counter__link--dots:not(.slider-counter__link--active):hover .dot,
.slider-counter__link--numbers:hover {
transform: scale(1.1);
}
.slider-counter__link--numbers {
color: rgba(var(--color-foreground), 0.5);
text-decoration: none;
}
.slider-counter__link--numbers:hover {
color: rgb(var(--color-foreground));
}
.slider-counter__link--active.slider-counter__link--numbers {
text-decoration: underline;
color: rgb(var(--color-foreground));
}
.slider-buttons {
display: flex;
align-items: center;
justify-content: center;
}
@media screen and (min-width: 990px) {
.slider:not(.slider--everywhere):not(.slider--desktop) + .slider-buttons {
display: none;
}
}
@media screen and (max-width: 989px) {
.slider--desktop:not(.slider--tablet) + .slider-buttons {
display: none;
}
}
@media screen and (min-width: 750px) {
.slider--mobile + .slider-buttons {
display: none;
}
}
.slider-button {
color: rgba(var(--color-foreground), 0.75);
background: transparent;
border: none;
cursor: pointer;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.slider-button:not([disabled]):hover {
color: rgb(var(--color-foreground));
}
.slider-button .icon {
height: 0.6rem;
}
.slider-button[disabled] .icon {
color: rgba(var(--color-foreground), 0.3);
cursor: not-allowed;
}
.slider-button--next .icon {
transform: rotate(-90deg);
}
.slider-button--prev .icon {
transform: rotate(90deg);
}
.slider-button--next:not([disabled]):hover .icon {
transform: rotate(-90deg) scale(1.1);
}
.slider-button--prev:not([disabled]):hover .icon {
transform: rotate(90deg) scale(1.1);
}
Liquid/HTML of the featured collection(featured-collection.liquid)
{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{% if section.settings.image_shape == 'blob' %}
{{ 'mask-blobs.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- if section.settings.enable_quick_add -%}
{{ 'quick-add.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- 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;
}
footer#footernew{
display: none;
}
main{
display: flex !Important;
justify-content: space-evenly;
flex-direction: column;
}
@media screen and (min-width: 2000px){
main{
justify-content: flex-end;
}
}
hr{
border: 0.25px solid black;
}
@media screen and (max-width: 600px){
.fixdestages, footer#footermobile.footer-row0{
display: none !important;
}
}
slider-component.slider-mobile-gutter.slider-component-desktop{
width: 100% !important;
}
.slider-buttons.no-js-hidden{
margin-left: -12px !Important;
}slider-component#GalleryViewer-template--19556783751492__main
@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 products_to_display = section.settings.collection.all_products_count
if section.settings.collection.all_products_count > section.settings.products_to_show
assign products_to_display = section.settings.products_to_show
assign more_in_collection = true
endif
assign columns_mobile_int = section.settings.columns_mobile | plus: 0
assign show_mobile_slider = false
if section.settings.swipe_on_mobile and products_to_display > columns_mobile_int
assign show_mobile_slider = true
endif
assign show_desktop_slider = false
if section.settings.enable_desktop_slider and products_to_display > section.settings.columns_desktop
assign show_desktop_slider = true
endif
-%}
{%- if section.settings.title != blank -%}
##
{{ section.settings.title }}
{%- endif -%}
{%- if section.settings.description != blank
or section.settings.show_description
and section.settings.collection.description != empty
-%}
{%- if section.settings.show_description -%}
{{ section.settings.collection.description }}
{%- else -%}
{{ section.settings.description -}}
{%- endif %}
{%- endif -%}
{%- if section.settings.show_view_all and more_in_collection -%}
{{ 'sections.featured_collection.view_all' | t }}
{%- endif -%}
{% if section.settings.image_shape == 'arch' %}
{% render 'mask-arch' %}
{%- endif -%}
{% schema %}
{
"name": "t:sections.featured-collection.name",
"tag": "section",
"class": "section",
"disabled_on": {
"groups": ["header", "footer"]
},
"settings": [
{
"type": "inline_richtext",
"id": "title",
"default": "Featured collection",
"label": "t:sections.featured-collection.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": "richtext",
"id": "description",
"label": "t:sections.featured-collection.settings.description.label"
},
{
"type": "checkbox",
"id": "show_description",
"label": "t:sections.featured-collection.settings.show_description.label",
"default": false
},
{
"type": "select",
"id": "description_style",
"label": "t:sections.featured-collection.settings.description_style.label",
"options": [
{
"value": "body",
"label": "t:sections.featured-collection.settings.description_style.options__1.label"
},
{
"value": "subtitle",
"label": "t:sections.featured-collection.settings.description_style.options__2.label"
},
{
"value": "uppercase",
"label": "t:sections.featured-collection.settings.description_style.options__3.label"
}
],
"default": "body"
},
{
"type": "collection",
"id": "collection",
"label": "t:sections.featured-collection.settings.collection.label"
},
{
"type": "range",
"id": "products_to_show",
"min": 2,
"max": 25,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.products_to_show.label"
},
{
"type": "range",
"id": "columns_desktop",
"min": 1,
"max": 5,
"step": 1,
"default": 4,
"label": "t:sections.featured-collection.settings.columns_desktop.label"
},
{
"type": "checkbox",
"id": "full_width",
"label": "t:sections.featured-collection.settings.full_width.label",
"default": false
},
{
"type": "checkbox",
"id": "show_view_all",
"default": true,
"label": "t:sections.featured-collection.settings.show_view_all.label"
},
{
"type": "select",
"id": "view_all_style",
"label": "t:sections.featured-collection.settings.view_all_style.label",
"options": [
{
"value": "link",
"label": "t:sections.featured-collection.settings.view_all_style.options__1.label"
},
{
"value": "outline",
"label": "t:sections.featured-collection.settings.view_all_style.options__2.label"
},
{
"value": "solid",
"label": "t:sections.featured-collection.settings.view_all_style.options__3.label"
}
],
"default": "solid"
},
{
"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": "background-1"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header.content"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.options__1.label"
},
{
"value": "portrait",
"label": "t:sections.featured-collection.settings.image_ratio.options__2.label"
},
{
"value": "square",
"label": "t:sections.featured-collection.settings.image_ratio.options__3.label"
}
],
"default": "adapt",
"label": "t:sections.featured-collection.settings.image_ratio.label"
},
{
"type": "select",
"id": "image_shape",
"options": [
{
"value": "default",
"label": "t:sections.all.image_shape.options__1.label"
},
{
"value": "arch",
"label": "t:sections.all.image_shape.options__2.label"
},
{
"value": "blob",
"label": "t:sections.all.image_shape.options__3.label"
},
{
"value": "chevronleft",
"label": "t:sections.all.image_shape.options__4.label"
},
{
"value": "chevronright",
"label": "t:sections.all.image_shape.options__5.label"
},
{
"value": "diamond",
"label": "t:sections.all.image_shape.options__6.label"
},
{
"value": "parallelogram",
"label": "t:sections.all.image_shape.options__7.label"
},
{
"value": "round",
"label": "t:sections.all.image_shape.options__8.label"
}
],
"default": "default",
"label": "t:sections.all.image_shape.label",
"info": "t:sections.all.image_shape.info"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": false,
"label": "t:sections.featured-collection.settings.show_secondary_image.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": false,
"label": "t:sections.featured-collection.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_rating",
"default": false,
"label": "t:sections.featured-collection.settings.show_rating.label",
"info": "t:sections.featured-collection.settings.show_rating.info"
},
{
"type": "checkbox",
"id": "enable_quick_add",
"default": false,
"label": "t:sections.featured-collection.settings.enable_quick_buy.label"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header_mobile.content"
},
{
"type": "select",
"id": "columns_mobile",
"default": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.label",
"options": [
{
"value": "1",
"label": "t:sections.featured-collection.settings.columns_mobile.options__1.label"
},
{
"value": "2",
"label": "t:sections.featured-collection.settings.columns_mobile.options__2.label"
}
]
},
{
"type": "checkbox",
"id": "swipe_on_mobile",
"default": false,
"label": "t:sections.featured-collection.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
}
],
"presets": [
{
"name": "t:sections.featured-collection.presets.name"
}
]
}
{% endschema %}
Maybe also relevant(card-product.liquid)
{% comment %}
Renders a product card
Accepts:
- card_product: {Object} Product Liquid object (optional)
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- image_shape: {String} Image mask to apply to the product image card. Values are "arch", "blob", "chevronleft", "chevronright", "diamond", "parallelogram", and "round". (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_rating: {Boolean} Show the product rating. Default: false
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
- show_quick_add: {Boolean} Show the quick add button.
- section_id: {String} The ID of the section that contains this card.
- horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
- horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
- placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-2' (optional)
Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}
{%- if card_product.featured_media -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
{%- if card_product.media[1] != null and show_secondary_image -%}
{%- endif -%}
{%- endif -%}
###
{{ card_product.title | escape }}
{%- if card_product.available == false -%}
{{- 'products.product.sold_out' | t -}}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{- 'products.product.on_sale' | t -}}
{%- endif -%}
###
{{ card_product.title | escape }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}
{{ block.settings.description | escape }}
{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
{{- card_product.metafields.reviews.rating.value }} /
{{ card_product.metafields.reviews.rating.value.scale_max -}}
({{ card_product.metafields.reviews.rating_count }})
{{- card_product.metafields.reviews.rating_count }}
{{ 'accessibility.total_reviews' | t -}}
{%- endif -%}
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
{%- if card_product.quantity_price_breaks_configured? -%}
{{ 'products.product.volume_pricing.note' | t }}
{%- endif -%}
{%- if show_quick_add -%}
{%- liquid
assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
assign qty_rules = false
if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
assign qty_rules = true
endif
-%}
{%- if card_product.variants.size > 1 or qty_rules -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
{%- if card_product.available == false -%}
{{- 'products.product.sold_out' | t -}}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{- 'products.product.on_sale' | t -}}
{%- endif -%}
{%- else -%}
{%- if placeholder_image -%}
{{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
{%- else -%}
{{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
###
{{ 'onboarding.product_title' | t }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%}
{% render 'price', show_compare_at_price: true %}
{%- endif -%}