Images are too big on featured collection(trust me I've checked all existing threads, nothing works)
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 }}
<script src="{{ 'quick-add.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
{%- 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
-%}
<div class="color-{{ section.settings.color_scheme }} isolate gradient">
<div class="collection section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}">
<div class="collection__title title-wrapper title-wrapper--no-top-margin page-width{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% endif %}{% if show_desktop_slider %} collection__title--desktop-slider{% endif %}">
{%- if section.settings.title != blank -%}
<h2 class="title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{{ section.settings.title }}
</h2>
{%- endif -%}
{%- if section.settings.description != blank
or section.settings.show_description
and section.settings.collection.description != empty
-%}
<div class="collection__description {{ section.settings.description_style }} rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- if section.settings.show_description -%}
{{ section.settings.collection.description }}
{%- else -%}
{{ section.settings.description -}}
{%- endif %}
</div>
{%- endif -%}
</div>
<slider-component class="slider-mobile-gutter{% if section.settings.full_width %} slider-component-full-width{% endif %}{% if show_mobile_slider == false %} page-width{% endif %}{% if show_desktop_slider == false and section.settings.full_width == false %} page-width-desktop{% endif %}{% if show_desktop_slider %} slider-component-desktop{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<ul
id="Slider-{{ section.id }}"
class="grid product-grid contains-card contains-card--product{% if settings.card_style == 'standard' %} contains-card--standard{% endif %} grid--{{ section.settings.columns_desktop }}-col-desktop{% if section.settings.collection == blank %} grid--2-col-tablet-down{% else %} grid--{{ section.settings.columns_mobile }}-col-tablet-down{% endif %}{% if show_mobile_slider or show_desktop_slider %} slider{% if show_desktop_slider %} slider--desktop{% endif %}{% if show_mobile_slider %} slider--tablet grid--peek{% endif %}{% endif %}"
role="list"
aria-label="{{ 'general.slider.name' | t }}"
>
{%- for product in section.settings.collection.products limit: section.settings.products_to_show -%}
<li
id="Slide-{{ section.id }}-{{ forloop.index }}"
class="grid__item{% if show_mobile_slider or show_desktop_slider %} slider__slide{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{%- else -%}
{%- for i in (1..4) -%}
<li
class="grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
style="--animation-order: {{ forloop.index }};"
{% endif %}
>
{%- assign placeholder_image = 'product-apparel-' | append: forloop.rindex -%}
{% render 'card-product',
show_vendor: section.settings.show_vendor,
placeholder_image: placeholder_image
%}
</li>
{%- endfor -%}
{%- endfor -%}
</ul>
<footer id="footerex">
<div class="footer-row0">
<a href="/lookbook" class="lookbook" style="text-decoration: none;">lookbook</a>
{%- if show_mobile_slider or show_desktop_slider -%}
<div class="slider-buttons no-js-hidden">
<button
type="button"
class="slider-button slider-button--prev"
name="previous"
aria-label="{{ 'general.slider.previous_slide' | t }}"
aria-controls="Slider-{{ section.id }}"
>
{% render 'icon-caret' %}
</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">{{ products_to_display }}</span>
</div>
<button
type="button"
class="slider-button slider-button--next"
name="next"
aria-label="{{ 'general.slider.next_slide' | t }}"
aria-controls="Slider-{{ section.id }}"
>
{% render 'icon-caret' %}
</button>
</div>
{% else %}
<a href="/shop" class="shop" style="text-decoration: none;">shop</a>
{% endif %}
<a href="/pages/about" class="about" style="text-decoration: none;">about</a>
</div>
</footer>
</slider-component>
{%- if section.settings.show_view_all and more_in_collection -%}
<div class="center collection__view-all{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
<a
href="{{ section.settings.collection.url }}"
class="{% if section.settings.view_all_style == 'link' %}link underlined-link{% elsif section.settings.view_all_style == 'solid' %}button{% else %}button button--secondary{% endif %}"
aria-label="{{ 'sections.featured_collection.view_all_label' | t: collection_name: section.settings.collection.title }}"
>
{{ 'sections.featured_collection.view_all' | t }}
</a>
</div>
{%- endif -%}
{% if section.settings.image_shape == 'arch' %}
{% render 'mask-arch' %}
{%- endif -%}
</div>
</div>
<footer id="footerex">
<div class="fixdestages">
<div class="seperator">
<hr>
</div>
<div class="footer-row1">
<a href="/policies/legal-notice" class="legal" style="text-decoration: none;">Legal notice</a>
<a class="follow" style="text-decoration: none;">Follow Us on</a>
<a href="/support" class="support" style="text-decoration: none;">Support</a>
</div>
<div class="footer-row2">
<a href="/policies/terms-of-service" class="terms" style="text-decoration: none;">terms & conditions</a>
<a href="https://instagram.com/xdaysleftwear" class="instagram" style="text-decoration: none;">instagram</a>
<a href="https://tiktok.com/@xdaysleftwear" class="tiktok" style="text-decoration: none;">tiktok</a>
<a href="/newsletter" class="newsletter" style="text-decoration: none;">newsletter</a>
</div>
<div class="footer-row3">
<a href="/policies/refund-policy" class="shipping" style="text-decoration: none;">shipping & returns</a>
<a class="payments" style="text-decoration: none;">payment methods</a>
<a href="/myaccount" class="myaccount" style="text-decoration: none;">myaccount</a>
</div>
<div class="footer-row4">
<a href="/policies/privacy-policy" class="privacy" style="text-decoration: none;">privacy policy</a>
<ul class="list list-payment" role="list">
{%- for type in shop.enabled_payment_types -%}
<li class="list-payment__item">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{%- endfor -%}
</ul>
</div>
</div>
</footer>
{% 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
-%}
<div class="card-wrapper product-card-wrapper underline-links-hover">
<div
class="
card card--{{ settings.card_style }}
{% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
{% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
{% if image_shape and image_shape != 'default' %} card--shape{% endif %}
{% if extend_height %} card--extend-height{% endif %}
{% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}
{% if horizontal_class %} card--horizontal{% endif %}
"
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
>
<div
class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}"
style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
>
{%- if card_product.featured_media -%}
<div class="card__media{% if image_shape and image_shape != 'default' %} shape--{{ image_shape }} color-{{ settings.card_color_scheme }} gradient{% endif %}">
<div class="media media--transparent media--hover-effect">
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
<img
srcset="
{{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w
"
src="{{ card_product.featured_media | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ card_product.featured_media.alt | escape }}"
class="motion-reduce lazyload"
{% unless lazy_load == false %}
loading="lazy"
{% endunless %}
width="{{ card_product.featured_media.width }}"
height="{{ card_product.featured_media.height }}"
>
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
{%- if card_product.media[1] != null and show_secondary_image -%}
<img
srcset="
{%- if card_product.media[1].width >= 165 -%}{{ card_product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if card_product.media[1].width >= 360 -%}{{ card_product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if card_product.media[1].width >= 533 -%}{{ card_product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if card_product.media[1].width >= 720 -%}{{ card_product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if card_product.media[1].width >= 940 -%}{{ card_product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if card_product.media[1].width >= 1066 -%}{{ card_product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ card_product.media[1] | image_url }} {{ card_product.media[1].width }}w
"
src="{{ card_product.media[1] | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt=""
class="motion-reduce lazyload"
loading="lazy"
width="{{ card_product.media[1].width }}"
height="{{ card_product.media[1].height }}"
>
{%- endif -%}
</div>
</div>
{%- endif -%}
<div class="card__content">
<div class="card__information">
<h3
class="card__heading"
{% if card_product.featured_media == null and settings.card_style == 'standard' %}
id="title-{{ section_id }}-{{ card_product.id }}"
{% endif %}
>
<a
href="{{ card_product.url }}"
id="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }}"
class="full-unstyled-link"
aria-labelledby="StandardCardNoMediaLink-{{ section_id }}-{{ card_product.id }} NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
>
{{ card_product.title | escape }}
</a>
</h3>
</div>
<div class="card__badge {{ settings.badge_position }}">
{%- if card_product.available == false -%}
<span
id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
>
{{- 'products.product.sold_out' | t -}}
</span>
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
<span
id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
>
{{- 'products.product.on_sale' | t -}}
</span>
{%- endif -%}
</div>
</div>
</div>
<div class="card__content">
<div class="card__information">
<h3
class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h5{% endif %}"
{% if card_product.featured_media or settings.card_style == 'card' %}
id="title-{{ section_id }}-{{ card_product.id }}"
{% endif %}
>
<a
href="{{ card_product.url }}"
id="CardLink-{{ section_id }}-{{ card_product.id }}"
class="full-unstyled-link"
aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}"
>
{{ card_product.title | escape }}
</a>
</h3>
<div class="card-information">
{%- if show_vendor -%}
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
<div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
{%- endif -%}
<span class="caption-large light">{{ block.settings.description | escape }}</span>
{%- 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
%}
<div
class="rating"
role="img"
aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }}"
>
<span
aria-hidden="true"
class="rating-star"
style="--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"
></span>
</div>
<p class="rating-text caption">
<span aria-hidden="true">
{{- card_product.metafields.reviews.rating.value }} /
{{ card_product.metafields.reviews.rating.value.scale_max -}}
</span>
</p>
<p class="rating-count caption">
<span aria-hidden="true">({{ card_product.metafields.reviews.rating_count }})</span>
<span class="visually-hidden">
{{- card_product.metafields.reviews.rating_count }}
{{ 'accessibility.total_reviews' | t -}}
</span>
</p>
{%- endif -%}
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
{%- if card_product.quantity_price_breaks_configured? -%}
<div class="card__information-volume-pricing-note">
<span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
</div>
{%- endif -%}
</div>
</div>
{%- if show_quick_add -%}
<div class="quick-add no-js-hidden">
{%- 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 -%}
<modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add animate-arrow{% endif %}"
aria-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
data-product-url="{{ card_product.url }}"
>
{{ 'products.product.choose_options' | t }}
{%- if horizontal_quick_add -%}
<span class="icon-wrap">{% render 'icon-arrow' %}</span>
{%- endif -%}
<div class="loading-overlay__spinner hidden">
<svg
aria-hidden="true"
focusable="false"
class="spinner"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
</modal-opener>
<quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal">
<div
role="dialog"
aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}"
aria-modal="true"
class="quick-add-modal__content global-settings-popup"
tabindex="-1"
>
<button
id="ModalClose-{{ card_product.id }}"
type="button"
class="quick-add-modal__toggle"
aria-label="{{ 'accessibility.close' | t }}"
>
{% render 'icon-close' %}
</button>
<div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info"></div>
</div>
</quick-add-modal>
{%- else -%}
<product-form data-section-id="{{ section.id }}">
{%- form 'product',
card_product,
id: product_form_id,
class: 'form',
novalidate: 'novalidate',
data-type: 'add-to-cart-form'
-%}
<input
type="hidden"
name="id"
value="{{ card_product.selected_or_first_available_variant.id }}"
class="product-variant-id"
disabled
>
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary{% if horizontal_quick_add %} card--horizontal__quick-add{% endif %}"
aria-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
aria-live="polite"
data-sold-out-message="true"
{% if card_product.selected_or_first_available_variant.available == false %}
disabled
{% endif %}
>
<span>
{%- if card_product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
<span class="sold-out-message hidden">
{{ 'products.product.sold_out' | t }}
</span>
{%- if horizontal_quick_add -%}
<span class="icon-wrap">{% render 'icon-plus' %}</span>
{%- endif -%}
<div class="loading-overlay__spinner hidden">
<svg
aria-hidden="true"
focusable="false"
class="spinner"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/svg"
>
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
{%- endform -%}
</product-form>
{%- endif -%}
</div>
{%- endif -%}
<div class="card__badge {{ settings.badge_position }}">
{%- if card_product.available == false -%}
<span
id="Badge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}"
>
{{- 'products.product.sold_out' | t -}}
</span>
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
<span
id="Badge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
>
{{- 'products.product.on_sale' | t -}}
</span>
{%- endif -%}
</div>
</div>
</div>
</div>
{%- else -%}
<div class="card-wrapper product-card-wrapper underline-links-hover">
<div
class="
card card--{{ settings.card_style }}
{% if extend_height %} card--extend-height{% endif %}
{% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
"
style="--ratio-percent: 100%;"
>
<div
class="card__inner{% if settings.card_style == 'standard' %} color-{{ settings.card_color_scheme }} gradient{% endif %} ratio"
style="--ratio-percent: 100%;"
>
<div class="card__media">
<div class="media media--transparent">
{%- if placeholder_image -%}
{{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
{%- else -%}
{{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
</div>
</div>
</div>
<div class="card__content">
<div class="card__information">
<h3 class="card__heading card__heading--placeholder{% if settings.card_style == 'standard' %} h5{% endif %}">
<a role="link" aria-disabled="true" class="full-unstyled-link">
{{ 'onboarding.product_title' | t }}
</a>
</h3>
<div class="card-information">
{%- if show_vendor -%}
<span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
<div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
{%- endif -%}
{% render 'price', show_compare_at_price: true %}
</div>
</div>
</div>
</div>
</div>
{%- endif -%}
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