Shopify themes, liquid, logos, and UX
Hi, so after looking for solution online I managed to edit the code by myself and created 2 new slides (one for mobile and one for desktop), I used the basic slideshow code to define the new ones.
Basically this is crated to allow load different images when your website is loaded on mobile phone.
The dimensions I use for my images are:
Mobile 800X800
Desktop 1900X1188
Go to Edit code on your website and in the Sections folder, choose Create new section:
Call the file: index-slideshow-mobile
Use the Create section button to complete.
Erase all the default code that's generated.
Replace with all the code:
<div class="slideshow-mobile" data-section-id="{{ section.id }}" data-section-type="slideshow-section">
{% if section.blocks.size > 0 %}
<div class="slideshow-wrapper">
<button type="button" class="visually-hidden slideshow__pause" data-id="{{ section.id }}" aria-live="polite">
<span class="slideshow__pause-stop">
{% include 'icon-pause' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
</span>
<span class="slideshow__pause-play">
{% include 'icon-play' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.play_slideshow' | t }}</span>
</span>
</button>
<div class="slideshow slideshow--{{ section.settings.slideshow_height }}" id="Slideshow-{{ section.id }}" data-autoplay="{{ section.settings.autoplay }}" data-speed="{{ section.settings.autoplay_speed | times: 1000 }}">
{% for block in section.blocks %}
{%- assign is_background_video = false -%}
{% if block.type == 'video' %}
{% if block.settings.video_type == 'background' or block.settings.video_type =='background-chrome' %}
{%- assign is_background_video = true -%}
{% endif %}
{% endif %}
<div class="slideshow__slide slideshow__slide--{{ block.id }}{% if is_background_video %} slideshow__slide--background-video{% endif %}" {{ block.shopify_attributes }}>
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}" class="slideshow__link">
{% endif %}
{% if block.type == 'video' %}
{% if block.settings.video_url != blank %}
<div class="video-loader"></div>
{% endif %}
{% unless block.settings.video_type == 'background' %}
<button type="button" class="text-link slideshow__video-control slideshow__video-control--close" data-controls="SlideshowVideo-{{ block.id }}">
{% include 'icon-close' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.close_video' | t }}</span>
</button>
{% endunless %}
{% if block.settings.video_url != blank %}
<div id="SlideshowVideo-{{ block.id }}" class="slideshow__video {% if is_background_video %}slideshow__video--background{% endif %} slideshow__video--{{ block.settings.video_type }}"
data-id="{{ block.settings.video_url.id }}"
data-type="{{ block.settings.video_type }}"
data-slideshow="Slideshow-{{ section.id }}"></div>
{% endif %}
{% endif %}
{% if block.settings.image == blank %}
<div class="slideshow__image js">
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{% else %}
<div class="slideshow__image box ratio-container lazyload{% unless forloop.first == true %} lazypreload{% endunless %} js"
data-bgset="{% include 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-position: {{ block.settings.alignment }};{% if forloop.first == true %} background-image: url('{{ block.settings.image | img_url: '300x300' }});{% endif %}">
</div>
{% endif %}
<noscript>
<div class="slideshow__image"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}'); background-position: {{ block.settings.alignment }};"{% endif %}>
{% if block.settings.image == blank %}
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}
</div>
</noscript>
<div class="slideshow__text-wrap{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__overlay{% endif %}">
<div class="slideshow__text-content">
<div class="page-width">
{% unless block.settings.title == blank %}
<h2 class="h1 mega-title slideshow__title{% if settings.link != blank %} slideshow__title--has-link{% endif %}{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
{{ block.settings.title | escape }}
</h2>
{% endunless %}
{% unless block.settings.subheading == blank %}
<span class="mega-subtitle slideshow__subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
{{ block.settings.subheading | escape }}
</span>
{% endunless %}
{% if block.type == 'video' %}
{% unless block.settings.video_type == 'background' %}
<div class="slideshow__video-control--play-wrapper{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__video-control--play-wrapper--push{% endif %}">
<button type="button" class="text-link slideshow__video-control slideshow__video-control--play" data-controls="SlideshowVideo-{{ block.id }}">
{% include 'icon-play-video' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.play_video' | t }}</span>
</button>
</div>
{% endunless %}
{% endif %}
</div>
</div>
</div>
{% if block.settings.link != blank %}
</a>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if section.blocks.size == 0 %}
<div class="placeholder-noblocks">
{{ 'homepage.onboarding.no_content' | t }}
</div>
{% endif %}
</div>
{% schema %}
{
"name": {
"en": "Slideshow Mobile",
"de": "Slideshow Mobile",
"fr": "Slideshow Mobile"
},
"class": "index-section index-section--flush",
"max_blocks": 8,
"settings": [
{
"type": "checkbox",
"id": "autoplay",
"label": {
"en": "Auto-rotate slides",
"de": "Auto-rotieren der Slides",
"fr": "Rotation automatique des diapositives"
},
"default": true
},
{
"type": "range",
"id": "autoplay_speed",
"label": {
"en": "Change slides every",
"de": "Slides überall ändern",
"fr": "Changer de diapositive toutes les"
},
"max": 10,
"min": 5,
"step": 1,
"unit": {
"en": "sec",
"de": "sek",
"fr": "sec"
},
"default": 7
},
{
"type": "select",
"id": "slideshow_height",
"label": {
"en": "Section height",
"de": "Höhe des Bereichs",
"fr": "Taille de la section"
},
"default": "small",
"options": [
{
"label": {
"en": "Small",
"de": "Klein",
"fr": "Petite"
},
"value": "small"
},
{
"label": {
"en": "Medium",
"de": "Mittel",
"fr": "Moyenne"
},
"value": "medium"
},
{
"label": {
"en": "Large",
"de": "Groß",
"fr": "Grande"
},
"value": "large"
}
]
},
{
"type": "select",
"id": "text_size",
"label": {
"en": "Text size",
"de": "Textgröße",
"fr": "Taille du texte"
},
"default": "medium",
"options": [
{
"label": {
"en": "Medium",
"de": "Mittel",
"fr": "Moyenne"
},
"value": "medium"
},
{
"label": {
"en": "Large",
"de": "Groß",
"fr": "Grande"
},
"value": "large"
}
]
}
],
"blocks": [
{
"type": "image",
"name": {
"en": "Image slide",
"de": "Foto-Slide",
"fr": "Diapositive (image)"
},
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"en": "Image",
"de": "Foto",
"fr": "Image"
}
},
{
"type": "select",
"id": "alignment",
"label": {
"en": "Image alignment",
"de": "Fotoausrichtung",
"fr": "Alignement de l'image"
},
"default": "top",
"options": [
{
"value": "top",
"label": {
"en": "Top",
"de": "Oben",
"fr": "Haut"
}
},
{
"value": "center",
"label": {
"en": "Middle",
"de": "Mitte",
"fr": "Milieu"
}
},
{
"value": "bottom",
"label": {
"en": "Bottom",
"de": "Unten",
"fr": "Bas"
}
}
]
},
{
"type": "text",
"id": "title",
"label": {
"en": "Heading",
"de": "Titel",
"fr": "En-tête"
},
"default": {
"en": "Image slide",
"de": "Foto-Slide",
"fr": "Diapositive (image)"
}
},
{
"type": "text",
"id": "subheading",
"label": {
"en": "Subheading",
"de": "Untertitel",
"fr": "Sous-titre"
},
"default": {
"en": "Tell your brand's story through video and images",
"de": "Erzählen Sie Ihre Geschichte mit Videos und Fotos",
"fr": "Racontez votre histoire avec des vidéos et des images"
}
},
{
"type": "url",
"id": "link",
"label": {
"en": "Slide link",
"de": "Slide-Link",
"fr": "Lien de la diapositive"
}
}
]
},
{
"type": "video",
"name": {
"en": "Video slide",
"de": "Video-Slide",
"fr": "Diapositive (vidéo)"
},
"settings": [
{
"type": "video_url",
"id": "video_url",
"label": {
"en": "Video link",
"de": "Video-Link",
"fr": "Lien de la vidéo"
},
"accept": ["youtube"],
"default": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc"
},
{
"type": "select",
"id": "video_type",
"label": {
"en": "Style",
"de": "Stil",
"fr": "Style"
},
"options": [
{
"value": "chrome",
"label": {
"en": "Image with play button",
"de": "Foto mit Play Button",
"fr": "Image avec bouton de lecture"
}
},
{
"value": "background-chrome",
"label": {
"en": "Background video with play button",
"de": "Hintergrund-Video mit Play Button",
"fr": "Vidéo d'arrière-plan avec bouton de lecture"
}
},
{
"value": "background",
"label": {
"en": "Background video",
"de": "Hintergrund-Video",
"fr": "Vidéo d'arrière-plan"
}
}
]
},
{
"type": "image_picker",
"id": "image",
"label": {
"en": "Image",
"de": "Foto",
"fr": "Image"
},
"info": {
"en": "Fallback when autoplaying video is not supported on mobile devices",
"de": "Ersatz, falls Video nicht automatisch auf Mobilgeräten abspielt",
"fr": "Image affichée lorsque la vidéo n'est pas supportée sur les appareils mobiles"
}
},
{
"type": "text",
"id": "title",
"label": {
"en": "Heading",
"de": "Titel",
"fr": "En-tête"
},
"default": {
"en": "Video slide",
"de": "Video-Slide",
"fr": "Diapositive (vidéo)"
}
},
{
"type": "text",
"id": "subheading",
"label": {
"en": "Subheading",
"de": "Untertitel",
"fr": "Sous-titre"
},
"default": {
"en": "Tell your brand's story through video and images",
"de": "Erzählen Sie Ihre Geschichte mit Videos und Fotos",
"fr": "Racontez votre histoire avec des vidéos et des images"
}
}
]
}
],
"presets": [{
"name": {
"en": "Slideshow Mobile",
"de": "Slideshow Mobile",
"fr": "Slideshow Mobile"
},
"category": {
"en": "Image",
"de": "Foto",
"fr": "Image"
},
"settings": {
"autoplay": true,
"autoplay_speed": 5
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}]
}
{% endschema %}
Save the file.
Next, create a second section file:
In the Sections folder, choose Create new section:
Call the file: index-slideshow-desktop
Use the Create section button to complete.
Erase all the default code that's generated:
Replace with all the code:
<div class="slideshow-desktop" data-section-id="{{ section.id }}" data-section-type="slideshow-section">
{% if section.blocks.size > 0 %}
<div class="slideshow-wrapper">
<button type="button" class="visually-hidden slideshow__pause" data-id="{{ section.id }}" aria-live="polite">
<span class="slideshow__pause-stop">
{% include 'icon-pause' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span>
</span>
<span class="slideshow__pause-play">
{% include 'icon-play' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.play_slideshow' | t }}</span>
</span>
</button>
<div class="slideshow slideshow--{{ section.settings.slideshow_height }}" id="Slideshow-{{ section.id }}" data-autoplay="{{ section.settings.autoplay }}" data-speed="{{ section.settings.autoplay_speed | times: 1000 }}">
{% for block in section.blocks %}
{%- assign is_background_video = false -%}
{% if block.type == 'video' %}
{% if block.settings.video_type == 'background' or block.settings.video_type =='background-chrome' %}
{%- assign is_background_video = true -%}
{% endif %}
{% endif %}
<div class="slideshow__slide slideshow__slide--{{ block.id }}{% if is_background_video %} slideshow__slide--background-video{% endif %}" {{ block.shopify_attributes }}>
{% if block.settings.link != blank %}
<a href="{{ block.settings.link }}" class="slideshow__link">
{% endif %}
{% if block.type == 'video' %}
{% if block.settings.video_url != blank %}
<div class="video-loader"></div>
{% endif %}
{% unless block.settings.video_type == 'background' %}
<button type="button" class="text-link slideshow__video-control slideshow__video-control--close" data-controls="SlideshowVideo-{{ block.id }}">
{% include 'icon-close' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.close_video' | t }}</span>
</button>
{% endunless %}
{% if block.settings.video_url != blank %}
<div id="SlideshowVideo-{{ block.id }}" class="slideshow__video {% if is_background_video %}slideshow__video--background{% endif %} slideshow__video--{{ block.settings.video_type }}"
data-id="{{ block.settings.video_url.id }}"
data-type="{{ block.settings.video_type }}"
data-slideshow="Slideshow-{{ section.id }}"></div>
{% endif %}
{% endif %}
{% if block.settings.image == blank %}
<div class="slideshow__image js">
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
{% else %}
<div class="slideshow__image box ratio-container lazyload{% unless forloop.first == true %} lazypreload{% endunless %} js"
data-bgset="{% include 'bgset', image: block.settings.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-position: {{ block.settings.alignment }};{% if forloop.first == true %} background-image: url('{{ block.settings.image | img_url: '300x300' }});{% endif %}">
</div>
{% endif %}
<noscript>
<div class="slideshow__image"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}'); background-position: {{ block.settings.alignment }};"{% endif %}>
{% if block.settings.image == blank %}
<div class="placeholder-background">
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{% endif %}
</div>
</noscript>
<div class="slideshow__text-wrap{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__overlay{% endif %}">
<div class="slideshow__text-content">
<div class="page-width">
{% unless block.settings.title == blank %}
<h2 class="h1 mega-title slideshow__title{% if settings.link != blank %} slideshow__title--has-link{% endif %}{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">
{{ block.settings.title | escape }}
</h2>
{% endunless %}
{% unless block.settings.subheading == blank %}
<span class="mega-subtitle slideshow__subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">
{{ block.settings.subheading | escape }}
</span>
{% endunless %}
{% if block.type == 'video' %}
{% unless block.settings.video_type == 'background' %}
<div class="slideshow__video-control--play-wrapper{% if block.settings.title != blank or block.settings.subheading != blank %} slideshow__video-control--play-wrapper--push{% endif %}">
<button type="button" class="text-link slideshow__video-control slideshow__video-control--play" data-controls="SlideshowVideo-{{ block.id }}">
{% include 'icon-play-video' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.play_video' | t }}</span>
</button>
</div>
{% endunless %}
{% endif %}
</div>
</div>
</div>
{% if block.settings.link != blank %}
</a>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% if section.blocks.size == 0 %}
<div class="placeholder-noblocks">
{{ 'homepage.onboarding.no_content' | t }}
</div>
{% endif %}
</div>
{% schema %}
{
"name": {
"en": "Slideshow Desktop",
"de": "Slideshow Desktop",
"fr": "Slideshow Desktop"
},
"class": "index-section index-section--flush",
"max_blocks": 8,
"settings": [
{
"type": "checkbox",
"id": "autoplay",
"label": {
"en": "Auto-rotate slides",
"de": "Auto-rotieren der Slides",
"fr": "Rotation automatique des diapositives"
},
"default": true
},
{
"type": "range",
"id": "autoplay_speed",
"label": {
"en": "Change slides every",
"de": "Slides überall ändern",
"fr": "Changer de diapositive toutes les"
},
"max": 10,
"min": 5,
"step": 1,
"unit": {
"en": "sec",
"de": "sek",
"fr": "sec"
},
"default": 7
},
{
"type": "select",
"id": "slideshow_height",
"label": {
"en": "Section height",
"de": "Höhe des Bereichs",
"fr": "Taille de la section"
},
"default": "small",
"options": [
{
"label": {
"en": "Small",
"de": "Klein",
"fr": "Petite"
},
"value": "small"
},
{
"label": {
"en": "Medium",
"de": "Mittel",
"fr": "Moyenne"
},
"value": "medium"
},
{
"label": {
"en": "Large",
"de": "Groß",
"fr": "Grande"
},
"value": "large"
}
]
},
{
"type": "select",
"id": "text_size",
"label": {
"en": "Text size",
"de": "Textgröße",
"fr": "Taille du texte"
},
"default": "medium",
"options": [
{
"label": {
"en": "Medium",
"de": "Mittel",
"fr": "Moyenne"
},
"value": "medium"
},
{
"label": {
"en": "Large",
"de": "Groß",
"fr": "Grande"
},
"value": "large"
}
]
}
],
"blocks": [
{
"type": "image",
"name": {
"en": "Image slide",
"de": "Foto-Slide",
"fr": "Diapositive (image)"
},
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"en": "Image",
"de": "Foto",
"fr": "Image"
}
},
{
"type": "select",
"id": "alignment",
"label": {
"en": "Image alignment",
"de": "Fotoausrichtung",
"fr": "Alignement de l'image"
},
"default": "top",
"options": [
{
"value": "top",
"label": {
"en": "Top",
"de": "Oben",
"fr": "Haut"
}
},
{
"value": "center",
"label": {
"en": "Middle",
"de": "Mitte",
"fr": "Milieu"
}
},
{
"value": "bottom",
"label": {
"en": "Bottom",
"de": "Unten",
"fr": "Bas"
}
}
]
},
{
"type": "text",
"id": "title",
"label": {
"en": "Heading",
"de": "Titel",
"fr": "En-tête"
},
"default": {
"en": "Image slide",
"de": "Foto-Slide",
"fr": "Diapositive (image)"
}
},
{
"type": "text",
"id": "subheading",
"label": {
"en": "Subheading",
"de": "Untertitel",
"fr": "Sous-titre"
},
"default": {
"en": "Tell your brand's story through video and images",
"de": "Erzählen Sie Ihre Geschichte mit Videos und Fotos",
"fr": "Racontez votre histoire avec des vidéos et des images"
}
},
{
"type": "url",
"id": "link",
"label": {
"en": "Slide link",
"de": "Slide-Link",
"fr": "Lien de la diapositive"
}
}
]
},
{
"type": "video",
"name": {
"en": "Video slide",
"de": "Video-Slide",
"fr": "Diapositive (vidéo)"
},
"settings": [
{
"type": "video_url",
"id": "video_url",
"label": {
"en": "Video link",
"de": "Video-Link",
"fr": "Lien de la vidéo"
},
"accept": ["youtube"],
"default": "https:\/\/www.youtube.com\/watch?v=_9VUPq3SxOc"
},
{
"type": "select",
"id": "video_type",
"label": {
"en": "Style",
"de": "Stil",
"fr": "Style"
},
"options": [
{
"value": "chrome",
"label": {
"en": "Image with play button",
"de": "Foto mit Play Button",
"fr": "Image avec bouton de lecture"
}
},
{
"value": "background-chrome",
"label": {
"en": "Background video with play button",
"de": "Hintergrund-Video mit Play Button",
"fr": "Vidéo d'arrière-plan avec bouton de lecture"
}
},
{
"value": "background",
"label": {
"en": "Background video",
"de": "Hintergrund-Video",
"fr": "Vidéo d'arrière-plan"
}
}
]
},
{
"type": "image_picker",
"id": "image",
"label": {
"en": "Image",
"de": "Foto",
"fr": "Image"
},
"info": {
"en": "Fallback when autoplaying video is not supported on mobile devices",
"de": "Ersatz, falls Video nicht automatisch auf Mobilgeräten abspielt",
"fr": "Image affichée lorsque la vidéo n'est pas supportée sur les appareils mobiles"
}
},
{
"type": "text",
"id": "title",
"label": {
"en": "Heading",
"de": "Titel",
"fr": "En-tête"
},
"default": {
"en": "Video slide",
"de": "Video-Slide",
"fr": "Diapositive (vidéo)"
}
},
{
"type": "text",
"id": "subheading",
"label": {
"en": "Subheading",
"de": "Untertitel",
"fr": "Sous-titre"
},
"default": {
"en": "Tell your brand's story through video and images",
"de": "Erzählen Sie Ihre Geschichte mit Videos und Fotos",
"fr": "Racontez votre histoire avec des vidéos et des images"
}
}
]
}
],
"presets": [{
"name": {
"en": "Slideshow Desktop",
"de": "Slideshow Desktop",
"fr": "Slideshow Desktop"
},
"category": {
"en": "Image",
"de": "Foto",
"fr": "Image"
},
"settings": {
"autoplay": true,
"autoplay_speed": 5
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}]
}
{% endschema %}
Open your theme.scss.liquid file
at the end add the following code:
@media screen and (max-width:749px){
.slideshow-desktop {display:none;
display: none;
}
}
@media screen and (min-width:750px){
.slideshow-mobile {display:none;
display: none;
}
}
Thats it, now do to "Customize" on your theme and you will see under "Sections":
Add both of them to your website and load 800X800 images on Mobile slideshow and 1900X1188 on Desktop slideshow.
🙂
Hi Valeria,
So you don't want to show the mobile image section on desktop and Desktop image section on the mobile right?
Please let me know.
Thanks.
Regards,
Priyanka.
This is great! do you have the same code for the Brooklyn theme??
Hi Valeria,
first of all, I would like to thank you for taking your time with this. It works perfect for me but I have one additional question. Is there any possible way to add "Adapt to first image" option in slide/section height like it is in original theme under "slideshow" element/section?
Thanks!
I hope it's clear what I want 🙂
Vasja
I did everything as described and it works although my desktop images are super low quality now.
Can you help me?
Found another glitch - first slideshow picture is showing but next ones do not.
Hello, it is not working and followed the instructions properly. any thing I'm missing?
Hey! Thank you for this!
I've followed the steps you posted but I'm still having some issues. Both slideshows (mobile and desktop version) elements seem to load into the page, and I can see they are pulling images but nothing is displayed. Basically, I can see the space where the slideshow should be, and I can see it loading if I inspect it but the slideshow itself doesn't seem to be working. Any ideas?
These are the errors I get in Console:
I followed all the steps but the options to chose do not appear under the Section when I go to customise.
Do you habe the new one?
Yeah it's working but i suggest you to contact Valeria as she edited my code
Hello everyone,
I'm new in Shopify. I'm using Debut theme and I would like to create 2 sections for the slideshow, one in mobile and the other one in desktop, as all my images are cropping and this is horrible.
Or maybe, is it possible to avoid cropping the images ?
Do you have the code for this ?
Thank you !
Emilie
Have the same problem.
I don't mind making both mobile and desktop the same but I expect the image adapt/respond differently with each screen instead of being stretched or cropped.
Thanks, hopefully this will solve it
Thanks Valeria !
Unfortunately I'm really bad with coding as I don't know anything !
Will it be possible to have directly the new code to paste it in the theme.css from you or @Balboshy ?
Thank you very much for your help !
I am not good at all in coding as well but searching for a way to make it. If I figured it out, will send you immediately.
This is very simple to do. You just wrap original code in Div and Id with mobile or desktop
Then use css @media tag to tell browser to display on desktop or mobile. CSS does all the work.
è possibile aggiungere un video per la slideshow?
For future viewers,
You can easily do this by adding a simple code snippet in your section. It can work on any section and of course slideshow, also it does not matter on what theme you have. Just follow the simple steps on the video
Hi @made4Uo
I tried your solution and then I got my page crush
but your solution does work
only make this error that crushed my website
when I'm adding the CSS part
the CSS part is causing this problem...
Do you know how can I fix it ?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024