i need your help. I want to use different images on slider for mobile and desktop. I am using the Theme “Dawn”. Attached you find to screenshots from desktop and mobile and the images which I want to use.
1 Like
You have to customize your theme for both different image for mobile and desktop,
try out this link:
https://github.com/Maxosys/Shopify-Theme/blob/master/sections/slideshow.liquid
or you can hire a developer, or you can purchase a paid theme which this have features,
thank you
Hi @ikkhuorganics ,
I am Ani From https://www.task4store.com/ - Shopify Small & Custom Tasks Experts ( By MS Web Designer - Top Rated Shopify Certified Experts and eCommerce Consultant from Singapore )
I will love to help you with your concern.
-Kindly Provide your Store Url,
-Kindly Provide your slider section code,
I will update that.
Note: If your store is protected with ‘store Font password’ please Send it here or DM me.
If you have any concerns feel free to ask me!
Regards,
Ani
1 Like
Thanks ani,
slider-component {
–desktop-margin-left-first-item: max(5rem, calc((100vw - 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));
–shadow-padding-bottom: calc(var(–shadow-vertical-offset) + var(–shadow-blur-radius));
scroll-snap-align: start;
flex-shrink: 0;
padding-bottom: 0;
}
@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;
}
.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;
}
.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);
}
.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 {
margin-left: var(–desktop-margin-left-first-item);
scroll-margin-left: var(–desktop-margin-left-first-item);
}
.slider.slider–desktop .slider__slide:last-child {
margin-right: 5rem;
}
.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;
}
.slider-component-full-width .slider–desktop .slider__slide:last-child {
margin-right: 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);
}
here i mentioned code of slideshow.liquid 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 -%}
{% render 'icon-caret' %}
{%- if section.settings.slider_visual == 'counter' -%}
1
/
{{ 'general.slider.of' | t }}
{{ section.blocks.size }}
{%- else-%}
{% render 'icon-caret' %}
{%- for block in section.blocks -%}
{%- if section.settings.slider_visual == 'numbers' -%}{{ forloop.index }}{% else %}{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- if section.settings.auto_rotate -%}
{%- render ‘icon-pause’ -%}
{%- render ‘icon-play’ -%}
{%- endif -%}
{%- for block in section.blocks -%}
{{ forloop.index }}
{%- endfor -%}
{%- for block in section.blocks -%}
#Slide-{{ section.id }}-{{ forloop.index }} .banner__media::after {
opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.0 }};
}
{%- endfor -%}
{%- if block.settings.image -%}
![{{ block.settings.image.alt | escape }}]()
{%- else -%}
{{ 'lifestyle-2' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endif -%}
{%- if block.settings.heading != blank -%}
{{ block.settings.heading | escape }}
{%- endif -%} {%- if block.settings.subheading != blank -%}
{{ block.settings.subheading | escape }}
{%- endif -%}
{%- if block.settings.button_label != blank -%}
{{ block.settings.button_label | escape }}
{%- endif -%}
{%- if section.blocks.size > 1 and section.settings.auto_rotate == false -%}
{% render 'icon-caret' %}
{%- if section.settings.slider_visual == 'counter' -%}
1
/
{{ 'general.slider.of' | t }}
{{ section.blocks.size }}
{%- else-%}
{% render 'icon-caret' %}
{%- for block in section.blocks -%}
{%- if section.settings.slider_visual == 'numbers' -%}{{ forloop.index }}{% else %}{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- if section.settings.auto_rotate -%}
{%- render ‘icon-pause’ -%}
{%- render ‘icon-play’ -%}
{%- endif -%}
{%- for block in section.blocks -%}
{{ forloop.index }}
{%- endfor -%}
{%- if request.design_mode -%}
{%- endif -%}
{% schema %}
{
“name”: “t:sections.slideshow.name”,
“tag”: “section”,
“class”: “section”,
“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”: “adapt_image”,
“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.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”: “text”,
“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”: “text”,
“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”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.all.colors.accent_1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.all.colors.accent_2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.all.colors.background_1.label”
},
{
“value”: “background-2”,
“label”: “t:sections.all.colors.background_2.label”
},
{
“value”: “inverse”,
“label”: “t:sections.all.colors.inverse.label”
}
],
“default”: “background-1”,
“label”: “t:sections.all.colors.label”,
“info”: “t:sections.slideshow.blocks.slide.settings.color_scheme.info”
},
{
“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 %}
Hi i have the same problem, how can i fix it?