FROM CACHE - en_header

Different images for mobile than desktop web

Solved
nooreen
Tourist
7 0 3

Hello,

 

I am wondering what code I need to enter (and where!) to allow for different images on mobile web than desktop web view?

 

I currently am using a custom theme - does this determine where I need to be looking to add the code?

 

Thanks in advance!

Nooreen

 

Replies 196 (196)
PaulNewton
Shopify Partner
4335 322 932

@vapeshed wrote:

Hi @KrazyGear, where did you add this piece of code?


This will vary wildly by theme and sometimes even version of the same theme.

Merchants needing to buy this customization can contact me at paull.newton+shopifyforums@gmail.com with store url and theme name.

Finally Combinable Discounts - EARLY ACCESS ONLY - Use Free Shipping With Other Discounts

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org
Problem Solved? ✔Accept and Like solutions to help future merchants
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
vapeshed
Tourist
4 0 2

Hi Ninthony,

Is there a way to modify this code so that an SVG can be uploaded?

JWFOG
Tourist
4 0 2

Hi @Ninthony ,

So there are so many pages now I cannot find the answer.

How do I show different pictures on mobile vs desktop in the product description on the product page?

Also how do I implement lazy loading?

Thanks a lot for your help!

Jerem1
Tourist
4 0 2

Hello @Ninthony and thanks for your code with link ! I try to add an header (H1) in your code but it's no work...

---

Thanks in advance,

Jeremy

 

Ozcorp_Web
Shopify Partner
12 0 1

Hello @Ninthony , I know this thread was a long time ago, but if you are still looking into it, I would really apprecciate the help! as you are the hero of the topic haha, I'm using Prestige theme and need the same thing posted here, to display diferent images on Desktop and mobile. The section is "Image with text overlay", is there any chance you are still helping with this?

Thanks in advance, Oscar

Sherryko
Tourist
5 0 2

Hi @Ninthony,

I used one of your solutions and added a section to the Debut theme with the code below. I was wondering if there is anyway to make the images clickable by adding url to them? Your solutions have truly helped me a ton in the past. Thank you so much!

the code:

<style>
.banner-container img{
width: 100%;
}
.hidden-mobile {
display: none;
}
.hidden-desktop {
display: block;
}
@media (min-width: 767px){
.hidden-mobile {
display: block;
}
.hidden-desktop {
display: none;
}
}
</style>
{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
<div class="banner-container">
<img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
</div>
{% endif %}

{% schema %}
{
"name": "Desktop Mobile Banner",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "image_picker",
"label": "Desktop Image",
"id": "desktop_image"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "image_picker",
"label": "Mobile Image",
"id": "mobile_image"
}
],
"presets": [
{
"name": "Desktop Mobile Banner",
"category":"Image",
"settings": {
}
}
]

}
{% endschema %}


{% javascript %}
{% endjavascript %}

 

Sherryko
Tourist
5 0 2

@Ninthony

looked through all your comments and figured out the solution!!! Thank you soooo much you are amazing! It doesn't let me copy paste the updated code with url link option for some reason but as of now it is on page 6 of the comments for anyone wondering!

stinem123
Excursionist
24 0 9

Hello, can I please ask where you added this part? 

.template-index main.main-content{
margin-top: -100px;

 

JorgePereiraGap
Tourist
11 0 3

Hello everyone,

I'm new to Shopify and I've "created" my own store. With that said, there is a part that looks bad on mobile, because it's an image with a few key points, which is just far too small for mobile.

 

What I'd like to have is the exact image I have now on desktop, and another one (I still have to make it) to show up on mobile. My website is www.solgap.pt but I'll also add a picture to show what I'm on about (it's the bit with the stars)

It's the long picture with the stars that I'm referring toIt's the long picture with the stars that I'm referring to

 

Thank you in advance.

coraliegc
Tourist
8 0 3

Hello !

 

I am trying to do this for my slideshow.

 

I have managed to do the first thing you said, but do not understand the second step at all, when you talk about going in the html...

 

Is there anyway to have more details and explanations ?

 

I am quite lost...

coraliegc
Tourist
8 0 3

@Ninthony If you can help me please it would be so appreciated ! I have spend 10+ hours on this and still not able to do it 😞

mr_mason
Tourist
5 1 1

you lost   .

 

<style>
.mobile-image{
display: block;
}
.desktop-image{
display: none;
}
@media (min-width:992px){
.mobile-image{
display: none;
}
.desktop-image{
display: block;
}
}
</style>
<div class="image-container">
<div class="mobile-image">
<img src="path-to-your-mobile-image.jpg">
</div>
<div class="desktop-image">
<img src="path-to-your-desktop-image.jpg">
</div>
</div>

Hottuboutfitter
Tourist
3 0 1

Hi, Can you help for our website at www.hottuboutfitters.ca 

 

The problem I am having is very similar. The top banner picture shows up correctly on desktop but cuts off the sides on mobile viewing. I would love some help with this

JenceyK
Tourist
6 0 1

Hi I have a question on a mobile image that's not being displayed. This is the current code and it's not pulling through the mobile image. It's always showing the web header image.

 

{% comment %}
** Slideshow - homepage partial **
- Draggable section
- Uses blocks
{% endcomment %}

{% assign default = '1400x' %}
{% assign size1 = '480x' %}
{% assign size2 = '765x' %}
{% assign size3 = '900x' %}
{% assign size4 = '1000x' %}
{% assign size5 = '1100x' %}
{% assign size6 = '1300x' %}
{% assign size7 = '1500x' %}
{% assign size8 = '1700x' %}
{% assign size9 = '1900x' %}
{% assign size10 = '2000x' %}

{% if section.blocks.size > 0 %}
<section id="homepage_slider-{{section.id}}"
class="homepage-slideshow js-homepage-slideshow slideshow_animation--{{ section.settings.slideshow_animation }} {% if section.settings.slideshow_text_animation != '' %}text-animation--true{% endif %}"
data-slider-id="homepage_slider-{{section.id}}"
data-slideshow-speed="{{section.settings.slideshow_speed}}"
data-slideshow-text-animation="{{section.settings.slideshow_text_animation}}"
>
{% for block in section.blocks %}
<div class="gallery-cell slide-{{ forloop.index }}" {{ block.shopify_attributes }} data-block-id="{{block.id}}">
{% if block.settings.image != nil %}
<img alt="{{ block.settings.image.alt | escape }}"
class="lazyload dsktp-img {% if block.settings.image_mobile != nil %}has-mobile-img {% endif %}{{ settings.image_loading_style }}"
sizes="100vw"
data-src="{{ block.settings.image | img_url: default, format: 'pjpg' }}"
data-srcset="
{{ block.settings.image | img_url: default, format: 'pjpg' }} {{default | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size1, format: 'pjpg' }} {{size1 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size2, format: 'pjpg' }} {{size2 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size3, format: 'pjpg' }} {{size3 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size4, format: 'pjpg' }} {{size4 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size5, format: 'pjpg' }} {{size5 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size6, format: 'pjpg' }} {{size6 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size7, format: 'pjpg' }} {{size7 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size8, format: 'pjpg' }} {{size8 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size9, format: 'pjpg' }} {{size9 | replace: 'x', 'w'}},
{{ block.settings.image | img_url: size10, format: 'pjpg' }} {{size10 | replace: 'x', 'w'}}"
/>
{% else %}
{% capture i %}{% cycle "1", "2" %}{% endcapture %}
{{ 'lifestyle-' | append: i | placeholder_svg_tag: 'placeholder-svg placeholder-svg--slideshow' }}
{% endif %}

{% if block.settings.image_mobile != nil %}
<img src="{{ block.settings.image_mobile | img_url: '100x', format: 'pjpg' }}"
alt="{{ block.settings.image_mobile.alt | escape }}"
class="lazyload mobile-img {{ settings.image_loading_style }}"
sizes="100vw"
data-src="{{ block.settings.image | img_url: default, format: 'pjpg' }}"
data-srcset="
{{ block.settings.image_mobile | img_url: default, format: 'pjpg' }} {{default | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size1, format: 'pjpg' }} {{size1 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size2, format: 'pjpg' }} {{size2 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size3, format: 'pjpg' }} {{size3 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size4, format: 'pjpg' }} {{size4 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size5, format: 'pjpg' }} {{size5 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size6, format: 'pjpg' }} {{size6 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size7, format: 'pjpg' }} {{size7 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size8, format: 'pjpg' }} {{size8 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size9, format: 'pjpg' }} {{size9 | replace: 'x', 'w'}},
{{ block.settings.image_mobile | img_url: size10, format: 'pjpg' }} {{size10 | replace: 'x', 'w'}}"
/>
{% endif %}

{% unless block.settings.button1_link != blank and block.settings.button2_link != blank %}
{% if block.settings.button1_link != blank %}
<a href="{{ block.settings.button1_link }}" class="banner-full-link">
{{ block.settings.title }}
</a>
{% elsif block.settings.button2_link != blank %}
<a href="{{ block.settings.button2_link }}" class="banner-full-link">
{{ block.settings.title }}
</a>
{% endif %}
{% endunless %}
{% unless block.settings.pretext == blank and block.settings.title == blank and block.settings.subtitle == blank and block.settings.button1 == blank and block.settings.button2 == blank %}
<div class="caption position-{{block.settings.text_position}} js-caption">
<div class="caption-content
caption-background-{{block.settings.caption_background}}
caption-transparency-{{ block.settings.caption_background_transparency }}
align-{{block.settings.text_align}}">
{% if block.settings.pretext != blank %}
<div class="pretext"{%- if block.settings.custom_colors != false -%} style="color: {{ block.settings.preheading_color }};"{%- endif -%}>
{{ block.settings.pretext }}
</div>
{% endif %}
{% if forloop.first == true and block.settings.title != blank %}
<h1 class="headline"{%- if block.settings.custom_colors != false -%} style="color: {{ block.settings.heading_color }};"{%- endif -%}>
{{ block.settings.title }}
</h1>
{% elsif block.settings.title != blank %}
<p class="headline"{%- if block.settings.custom_colors != false -%} style="color: {{ block.settings.heading_color }};"{%- endif -%}>
{{ block.settings.title }}
</p>
{% endif %}
{% if block.settings.subtitle != blank %}
<div class="subtitle"{%- if block.settings.custom_colors != false -%} style="color: {{ block.settings.subheading_color }};"{%- endif -%}>
{{ block.settings.subtitle }}
</div>
{% endif %}
{% if block.settings.button1 != blank %}
{% if block.settings.first_button_type == 'solid' %}{% assign btnType = 'solid' %}{% else %}{% assign btnType = 'bordered' %}{% endif %}
<a {% if block.settings.button1_link != blank %}href="{{ block.settings.button1_link }}"{% endif %} class="action_button first_button highlight-{{block.settings.button1_highlight}} {{ btnType }}"{%- if block.settings.custom_colors != false -%} style="color:{{ block.settings.first_btn_color }};"{%- endif -%}>
{{ block.settings.button1 }}
</a>
{% endif %}
{% if block.settings.button2 != blank %}
<a {% if block.settings.button2_link != blank %}href="{{ block.settings.button2_link }}"{% endif %} class="action_button second_button highlight-{{block.settings.button2_highlight}}">
{{ block.settings.button2 }}
</a>
{% endif %}
</div>
</div>
{% endunless %}

{% style %}
.slide-{{ forloop.index }} .caption-content .action_button.first_button.solid {
background: {{ block.settings.first_btn_bg }}!important;
}
.slide-{{ forloop.index }} .caption-content .action_button.first_button.bordered {
border: 2px solid {{ block.settings.first_btn_border }}!important;
}
.slide-{{ forloop.index }} .caption-content .action_button.second_button.solid {
background: {{ block.settings.second_btn_bg }};
}
.slide-{{ forloop.index }} .caption-content .action_button.second_button.bordered {
border: 2px solid {{ block.settings.second_btn_border }}!important;
}
{% endstyle %}

</div>
{% endfor %}
</section>
{% endif %}

{% schema %}

{
"name": "Slideshow",
"class": "slideshow-section under-menu",
"settings": [
{
"type": "select",
"id": "slideshow_text_animation",
"label": "Text animation",
"options": [
{
"value": "",
"label": "None"
},
{
"value": "fadeIn",
"label": "Fade In"
},
{
"value": "fadeInUp",
"label": "Fade Up"
},
{
"value": "fadeInDown",
"label": "Fade Down"
}
],
"default": "fadeInDown"
},
{
"type": "select",
"id": "slideshow_animation",
"label": "Gallery transition",
"options": [
{
"value": "slide",
"label": "Slide"
},
{
"value": "fade",
"label": "Fade"
}
],
"default": "slide"
},
{
"type": "range",
"id": "slideshow_speed",
"label": "Change slides every",
"min": 4,
"max": 12,
"step": 1,
"default": 6,
"unit": "sec"
}
],
"blocks": [
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1600 x 1000px recommended"
},
{
"type": "image_picker",
"id": "image_mobile",
"label": "Mobile Image",
"info": "750 x 800px recommended"
},
{
"type": "richtext",
"id": "pretext",
"label": "Preheading"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Your headline"
},
{
"type": "richtext",
"id": "subtitle",
"label": "Subheading"
},
{
"type": "select",
"id": "text_position",
"label": "Text position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "select",
"id": "text_align",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "checkbox",
"id": "caption_background",
"label": "Display text background"
},
{
"type": "checkbox",
"id": "caption_background_transparency",
"label": "Enable text background transparency"
},
{
"type": "text",
"id": "button1",
"label": "First button label"
},
{
"type": "url",
"id": "button1_link",
"label": "First button link"
},
{
"type": "radio",
"id": "first_button_type",
"label": "Button Type",
"options": [
{ "value": "solid", "label": "Solid" },
{ "value": "bordered", "label": "Bordered" }
],
"default": "solid"
},
{
"type": "checkbox",
"id": "button1_highlight",
"label": "Highlight first button"
},
{
"type": "text",
"id": "button2",
"label": "Second button label"
},
{
"type": "url",
"id": "button2_link",
"label": "Second button link"
},
{
"type": "radio",
"id": "second_button_type",
"label": "Button Type",
"options": [
{ "value": "solid", "label": "Solid" },
{ "value": "bordered", "label": "Bordered" }
],
"default": "solid"
},
{
"type": "checkbox",
"id": "button2_highlight",
"label": "Highlight second button"
},
{
"type": "header",
"content": "Custom Colors"
},
{
"type": "checkbox",
"id": "custom_colors",
"label": "Use Custom Colors",
"default": false
},
{
"type": "header",
"content": "Text"
},
{
"type": "color",
"id": "preheading_color",
"label": "Preheading",
"default": "#000000"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading",
"default": "#000000"
},
{
"type": "color",
"id": "subheading_color",
"label": "Subheading",
"default": "#000000"
},
{
"type": "header",
"content": "Button"
},
{
"type": "color",
"id": "first_btn_bg",
"label": "First Button Background",
"default": "#000000"
},
{
"type": "color",
"id": "first_btn_color",
"label": "First Button Text",
"default": "#000000"
},
{
"type": "color",
"id": "first_btn_border",
"label": "First Button Border",
"default": "#000000"
},
{
"type": "color",
"id": "second_btn_bg",
"label": "Second Button Background",
"default": "#000000"
},
{
"type": "color",
"id": "second_btn_color",
"label": "Second Button Text",
"default": "#000000"
},
{
"type": "color",
"id": "second_btn_border",
"label": "Second Button Border",
"default": "#000000"
}
]
}
],
"presets": [{
"name": "Slideshow",
"category": "Image",
"settings": {
},
"blocks": [
{
"type": "image",
"settings": {
"image": "",
"title": "Turbo Shopify Theme",
"subtitle": "",
"text_align": "center"
}
},
{
"type": "image",
"settings": {
"image": "",
"title": "",
"subtitle": "",
"text_align": "center"
}
}
]
}]
}

{% endschema %}

JoNg01
Tourist
5 0 2

Hi Ninthony,

Thank you for this solution as it has helped me change to a different image in mobile view. However, my desktop view now has two images.... Wondering if you would be able to help with this? I edited and inserted the code under "hero.liquid" as that is the element I'm using for my banner. Attached below is the issue I am facing now.

JoNg01_0-1649061498111.png

 

GillesB
New Member
1 0 0

Hello @Ninthony 
Thanks a lot for your help on this quite common issue for newbees !
I've copy/paste your code in my cart page and it's working almost well. 
It's fine on desktop, but on on mobile, the 2 images are displayed.

Here is the code I put in my CustomHTML field of www.pepites.co/cart

<style>
.mobile-image{
display: block;
}
desktop-image{
display: none;
}
@media (min-width:992px){
.mobile-image{
display: none;
}
desktop-image{
display: block;
}
}
</style>
<div class="image-container">
<div class="mobile-image">
<img src="https://cdn.shopify.com/s/files/1/0514/4258/1682/files/Icones-panier-mobile.jpg?v=1654039866">
</div>
<div class="desktop-image">
<img src="https://cdn.shopify.com/s/files/1/0514/4258/1682/files/Icones-panier-desktop.jpg?v=1654040550">
</div>
</div>

Do you have any idea of what I've missed ?

Many thanks in advance for your help, 

Gilles 



prapti
New Member
1 0 0

im facing the same issue but with boundless theme, 

 

here is slideshow.liquid from "section"

please advise

{%- if section.settings.hero_home_height == 'adapt' -%}
  {%- comment -%}
    'min_aspect_ratio' is the minimum aspect ratio of images shown without
    whitespace when 'hero_home_height' is set to 'adapt'.
    The aspect ratio values for the first image in the slideshow will be used
    unless it is blank, in that case a ratio of 2:1 will be used.
  {%- endcomment -%}

  {%- assign first_block = section.blocks[0] -%}
  {%- if first_block.settings.hero_slide.aspect_ratio == blank -%}
    {%- assign min_aspect_ratio = 2.0 -%}
  {%- else -%}
    {%- assign min_aspect_ratio = first_block.settings.hero_slide.aspect_ratio -%}
  {%- endif -%}
  {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}

  {%- style -%}
    .hero {
      height: {{- wrapper_height -}}vw !important;
      overflow: hidden;
    }
    .hero .slick-track,
    .hero .hero__slide:before {
      height: {{- wrapper_height -}}vw;
    }
  {%- endstyle -%}
{%- endif -%}

{%- style -%}
  .site-header__link,
  .site-header__logo-link {
    color: {{ section.settings.hero_icons_color }} !important;
  }

  .hero__text-title {
    color: {{ section.settings.hero_icons_color }};
  }

  .hero__slide:after {
    background-color: {{ section.settings.hero_overlay_color }};
    opacity: {{ section.settings.hero_overlay_amount | divided_by: 100.00 }};
  }

  .hero__button-circle {
    background: {{ section.settings.hero_overlay_color | color_modify: 'alpha', 0.30 }};
  }

  .slick-prev .icon:before,
  .slick-next .icon:before,
  .hero__pause .icon:before {
    color: {{ section.settings.hero_icons_color }};
  }

  .slick-dots {
    background: {{ section.settings.hero_overlay_color | color_modify: 'alpha', 0.30 }};
  }

  .hero__dots:before {
    background-color: {{ section.settings.hero_icons_color }};
    border-color: {{ section.settings.hero_icons_color }};
  }

  .slick-active .hero__dots:before {
    background-color: transparent;
    border: 2px solid {{ section.settings.hero_icons_color }};
  }
{%- endstyle -%}

<div data-section-id="{{ section.id }}" data-section-type="slideshow-section"
  {%- if section.settings.hero_home_height == 'adapt' -%}
    class="hero--adapt"
  {%- endif -%}>
  <div class="hero slideshow-{{ section.id }}"
        id="Hero"
        role="region"
        aria-label="slideshow"
        aria-describedby="slideshow-info"
        tabindex="-1"
        data-autoplay="{{ section.settings.hero_home_auto }}"
        data-autoplayspeed="{{ section.settings.hero_home_auto_speed | times: 1000 }}"
        data-adapt="{% if section.settings.hero_home_height == 'adapt' %}true{% else %}false{% endif %}"
        data-slide-nav-a11y="{{ 'homepage.slideshow.load_slide' | t: slide_number: '[slide_number]' }}"
        data-slide-nav-active-a11y="{{ 'homepage.slideshow.active_slide' | t: slide_number: '[slide_number]' }}">
    {%- if section.blocks.size > 0 -%}
      {%- for block in section.blocks -%}
        <div id="SlickSlide{{ forloop.index }}" aria-hidden="true" class="hero__slide hero__slide--{{ block.id }}{% if block.settings.hero_slide  == blank %} placeholder-background{% endif %}" {{ block.shopify_attributes }}>
          {%- if block.settings.hero_slide  == blank -%}
            {% capture current %}{% cycle 1, 2 %}{% endcapture %}
            {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'icon icon--placeholder' }}
          {%- else -%}
            {% assign img_url = block.settings.hero_slide | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
            <img class="hero__image hero__image--{{ block.id }} lazyload{% unless forloop.first == true %} lazypreload{% endunless %}"
              {%- if forloop.first == true -%}
                src="{{ block.settings.hero_slide | img_url: '300x' }}"
              {%- endif -%}
              data-src="{{ img_url }}"
              data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
              data-aspectratio="{{ block.settings.hero_slide.aspect_ratio }}"
              data-sizes="auto"
              data-parent-fit="cover"
              alt="{{ block.settings.hero_slide.alt | escape }}"
              style="object-position: {{ block.settings.image_position }}">
            {%- if forloop.first == true -%}
              <noscript>
                <div class="hero__image-no-js hero__image--{{ block.id }}" data-image="{{ block.id }}" style="background-image: url('{{ block.settings.hero_slide | img_url: "2048x2048" }}');"></div>
              </noscript>
            {%- endif -%}
          {%- endif -%}
          <div class="hero__content-wrapper">
            <div class="hero__content">
              <div class="hero__content-centered">
                {%- unless block.settings.hero_title == blank -%}
                  <h1 class="hero__text-title" itemscope itemtype="http://schema.org/Organization">
                    {{ block.settings.hero_title | escape }}
                  </h1>
                {%- endunless -%}
                {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
                  <a href="{{ block.settings.button_link }}" class="btn">
                    {{ block.settings.button_label | escape }}
                  </a>
                {%- endif -%}
              </div>
            </div>
          </div>
        </div>
      {%- endfor -%}
    {%- else -%}
      <div class="hero__slide placeholder-background">
        {{ 'lifestyle-1' | placeholder_svg_tag: 'icon icon--placeholder' }}
      </div>
    {%- endif -%}
    {%- if section.blocks.size > 1 -%}
      {%- capture arrows_slide -%}
        <ul>
          <li>
            <button class="hero__controls-icon slick-prev" aria-label="{{ 'homepage.slideshow.previous_slide' | t }}">
              <span class="hero__button-circle"></span>
              <span class="icon icon-arrow" aria-hidden="true"></span>
            </button>
          </li>
          <li>
            <button class="hero__controls-icon slick-next" aria-label="{{ 'homepage.slideshow.next_slide' | t }}">
              <span class="hero__button-circle"></span>
              <span class="icon icon-arrow" aria-hidden="true"></span>
            </button>
          </li>
        </ul>
      {%- endcapture -%}
      <div class="hero__controls">
        <div class="hero__dots-wrapper hero__dots-wrapper-desktop">
          {%- if section.settings.hero_home_auto -%}
            <button class="hero__pause hero__controls-icon" aria-live="polite" aria-label="{{ 'homepage.slideshow.pause' | t }}" data-label-pause="{{ 'homepage.slideshow.pause' | t }}" data-label-play="{{ 'homepage.slideshow.play' | t }}">
              <span class="hero__button-circle"></span>
              <span class="icon icon-pause" aria-hidden="true"></span>
              <span class="icon icon-play" aria-hidden="true"></span>
            </button>
          {%- endif -%}
        </div>
        {{ arrows_slide }}
      </div>
    {%- endif -%}
  </div>
  {%- if section.settings.hero_home_height == 'adapt' -%}
    <div class="hero__content-wrapper-mobile">
      {%- if section.blocks.size > 1 -%}
        <div class="hero__controls">
          <div class="hero__dots-wrapper">
            {%- if section.settings.hero_home_auto -%}
              <button class="hero__pause hero__controls-icon" aria-live="polite" aria-label="{{ 'homepage.slideshow.pause' | t }}" data-label-pause="{{ 'homepage.slideshow.pause' | t }}" data-label-play="{{ 'homepage.slideshow.play' | t }}">
                <span class="icon icon-pause" aria-hidden="true"></span>
                <span class="icon icon-play" aria-hidden="true"></span>
              </button>
            {%- endif -%}
            {{ arrows_slide }}
          </div>
        </div>
      {%- endif -%}
      {%- for block in section.blocks -%}
        {%- assign show_link_button = false -%}
        {%- if block.settings.button_label != blank and block.settings.button_link != blank -%}
          {%- assign show_link_button = true -%}
        {%- endif -%}
        {%- if block.settings.hero_title != blank or show_link_button -%}
          <div class="hero__content-mobile text-center{% if section.blocks.size == 1 %} is-active{% endif %}" data-index="{{ forloop.index }}">
            {%- unless block.settings.hero_title == blank -%}
              <h2 class="{% if section.blocks.size == 1 %}hero-title-empty {% endif %}hero-title-mobile h1">
                {{ block.settings.hero_title | escape }}
              </h2>
            {%- endunless -%}
            {%- if show_link_button -%}
              <a href="{{ block.settings.button_link }}" class="hero-btn-mobile btn">
                {{ block.settings.button_label | escape }}
              </a>
            {%- endif -%}
          </div>
        {%- endif -%}
      {%- endfor -%}
    </div>
  {%- endif -%}
</div>
<p id="slideshow-info" class="visually-hidden" aria-hidden="true">
  {{- 'homepage.slideshow.navigation_instructions' | t -}}
</p>

{% schema %}
{
  "name": {
    "cs": "Prezentace",
    "da": "Diasshow",
    "de": "Slideshow",
    "en": "Slideshow",
    "es": "Diapositivas",
    "fi": "Diaesitys",
    "fr": "Diaporama",
    "it": "Presentazione",
    "ja": "スライドショー",
    "ko": "슬라이드 쇼",
    "nb": "Lysbildefremvisning",
    "nl": "Diavoorstelling",
    "pl": "Pokaz slajdów",
    "pt-BR": "Apresentação de slides",
    "pt-PT": "Apresentação de diapositivos",
    "sv": "Bildspel",
    "th": "สไลด์โชว์",
    "tr": "Slayt gösterisi",
    "vi": "Bản trình chiếu",
    "zh-CN": "幻灯片",
    "zh-TW": "素材輪播"
  },
  "max_blocks": 5,
  "settings": [
    {
      "type": "select",
      "id": "hero_home_height",
      "label": {
        "cs": "Výška snímku",
        "da": "Diashøjde",
        "de": "Diahöhe",
        "en": "Slide height",
        "es": "Altura de diapositiva",
        "fi": "Dian korkeus",
        "fr": "Hauteur de la diapositive",
        "it": "Altezza slide",
        "ja": "スライドの高さ",
        "ko": "슬라이드 높이",
        "nb": "Lysbildehøyde",
        "nl": "Diahoogte",
        "pl": "Wysokość slajdu",
        "pt-BR": "Altura do slide",
        "pt-PT": "Altura do diapositivo",
        "sv": "Bildhöjd",
        "th": "ความสูงของสไลด์",
        "tr": "Slayt yüksekliği",
        "vi": "Chiều cao trang chiếu",
        "zh-CN": "幻灯片高度",
        "zh-TW": "投影片高度"
      },
      "default": "full",
      "info": {
        "cs": "Prostudujte si [nápovědu k prezentaci](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "da": "Få mere at vide om [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "de": "Erfahre mehr über die [Richtlinien für Slideshows](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)",
        "en": "Learn more about [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "es": "Más información sobre [pautas de presentación de diapositivas](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "fi": "Lisätietoja [diaesitysohjeet](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "fr": "En savoir plus sur [directives de diaporama](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)",
        "it": "Maggiori informazioni sulle [linee guida per le presentazioni](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "ja": "[スライドショーのガイドライン](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)に関して詳しくはこちら。",
        "ko": "[슬라이드 쇼 가이드라인에 대해 자세히 알아보기](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)",
        "nb": "Finn ut mer om [retningslinjer for lysbilder](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "nl": "Meer informatie over [richtlijnen voor diavoorstellingen](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "pl": "Dowiedz się więcej o [wytycznych dotyczących pokazu slajdów](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "pt-BR": "Saiba mais sobre [diretrizes de apresentação de slides](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)",
        "pt-PT": "Saiba mais sobre [diretrizes de apresentação de diapositivos](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "sv": "Läs mer om [bildspelets riktlinjer](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "th": "ดูข้อมูลเพิ่มเติมเกี่ยวกับ [แนวทางสไลด์โชว์](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)",
        "tr": "[Slayt gösterisi yönergeleri](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific) hakkında daha fazla bilgi edinin.",
        "vi": "Tìm hiểu thêm về [hướng dẫn trình chiếu](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific).",
        "zh-CN": "详细了解[幻灯片指南](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)",
        "zh-TW": "深入瞭解 [素材輪播準則](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/boundless#slideshow-sections-specific)。"
      },
      "options": [
        {
          "value": "full",
          "label": {
            "cs": "Celá obrazovka",
            "da": "Fuld skærm",
            "de": "Vollbild",
            "en": "Full screen",
            "es": "Pantalla completa",
            "fi": "Kokonäyttö",
            "fr": "Plein écran",
            "it": "A schermo intero",
            "ja": "全画面表示",
            "ko": "전체 화면",
            "nb": "Fullskjerm",
            "nl": "Volledig scherm",
            "pl": "Tryb pełnoekranowy",
            "pt-BR": "Tela cheia",
            "pt-PT": "Ecrã inteiro",
            "sv": "Helskärm",
            "th": "โหมดเต็มหน้าจอ",
            "tr": "Tam ekran",
            "vi": "Toàn màn hình",
            "zh-CN": "全屏",
            "zh-TW": "全螢幕"
          }
        },