How to Have Different Images for Mobile and Desktop Homepage Slideshow

New Member
2 0 0

Hi there,

I have already read some shopify articles on how to code this, but failed to code it for my own website. I want to be able to customise the homepage slideshow so that I can display different images for mobile and desktop. I have made custom images for both a mobile and a desktop slideshow on Canva (i.e. not used hero text through Shopify, but designed it as part of the image), and it is much easier to be able to design one image for a mobile slideshow, and one image for a desktop slideshow, rather than try to design an image that suits both mobile and desktop.

 

So, basically, I want to be able to customise my theme so that I can display one image for a mobile slideshow, and a different image for a desktop slideshow, to overcome formatting issues and not have to worry about designing a slideshow that suits both mobile and desktop.

 

I'm using the impulse theme and here's the code for my slideshow.liquid section (which from reading other articles is what needs to be coded):

 

Also sorry it's so long :(

 

<div

  data-section-id="{{ section.id }}"

  data-section-type="slideshow-section"

  data-align-top="true"

  class="hero-slideshow"

  {% if section.settings.parallax %}data-parallax="true"{% endif %}>



  {% if section.blocks.size > 0 %}

    <div class="slideshow-wrapper">

      {% if section.settings.autoplay and section.settings.style == 'bars' and section.blocks.size > 1 %}

        {% style %}

          .slick-slider[data-bars][data-autoplay="true"] .slick-dots li.slick-active button::before {

            animation-duration: {{ section.settings.autoplay_speed | times: 1000 }}ms;

          }

        {% endstyle %}



        <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>

      {% endif %}



      {%- assign natural_height = false -%}

      {% if section.settings.section_height == 'natural' %}

        {% comment %}

          Get first image's aspect ratio

        {% endcomment %}

        {% for block in section.blocks limit: 1 %}

          {% if block.settings.image != blank %}

            {%- assign natural_height = true -%}

            {%- capture natural_height_ratio -%}{{ 100 | divided_by: block.settings.image.aspect_ratio }}%{% endcapture %}

          {% endif %}

        {% endfor %}

      {% endif %}



      {% if natural_height %}

        {% style %}

          .hero-natural--{{ section.id }} {

            height: 0;

            padding-bottom: {{ natural_height_ratio }};

          }

        {% endstyle %}

      {% endif %}



      {% if natural_height %}

        <div class="hero-natural--{{ section.id }}">

      {% endif %}

        <div id="Slideshow-{{ section.id }}"

          class="hero hero--{{ section.settings.section_height }} hero--{{ section.id }} hero--mobile--{{ section.settings.mobile_height }} loading loading--delayed"

          {% if natural_height %}

            data-natural="true"

          {% endif %}

          data-autoplay="{{ section.settings.autoplay }}"

          data-speed="{{ section.settings.autoplay_speed | times: 1000 }}"

          data-aos="hero__animation"

          {% if section.settings.style == 'arrows' %}

            data-arrows="true"

          {% endif %}

          {% if section.settings.style == 'dots' %}

            data-dots="true"

          {% endif %}

          {% if section.settings.style == 'bars' %}

            data-dots="true"

            data-bars="true"

          {% endif %}

          data-slide-count="{{ section.blocks.size }}">

          {% for block in section.blocks %}

            <div

              {{ block.shopify_attributes }}

              class="slideshow__slide slideshow__slide--{{ block.id }}"

              data-id="{{ block.id }}">



              {% style %}

                .slideshow__slide--{{ block.id }} .hero__title {

                  font-size: {{ block.settings.title_size | times: 0.5 }}px;

                }

                @media only screen and (min-width: 769px) {

                  .slideshow__slide--{{ block.id }} .hero__title {

                    font-size: {{ block.settings.title_size }}px;

                  }

                }



                {% unless block.settings.color_accent contains 'rgba(0,0,0,0)' %}

                  .slideshow__slide--{{ block.id }} .btn {

                    background: {{ block.settings.color_accent }} !important;

                    border-color: {{ block.settings.color_accent }} !important;



                    {%- assign accent_brightness = block.settings.color_accent | color_extract: 'lightness' -%}



                    {% if accent_brightness > 40 %}

                      color: #000 !important;

                    {% endif %}

                  }



                  {% if settings.button_style == 'angled' %}

                    .slideshow__slide--{{ block.id }} .btn:before,

                    .slideshow__slide--{{ block.id }} .btn:after {

                      background: {{ block.settings.color_accent }} !important;

                      border-color: {{ block.settings.color_accent }} !important;

                    }

                  {% endif %}

                {% endunless %}

              {% endstyle %}



              {%- assign hero_text = false -%}

              {%- assign link_slide = false -%}

              {% if block.settings.top_subheading != blank or block.settings.title != blank or block.settings.subheading != blank or block.settings.link_text != blank %}

                {%- assign hero_text = true -%}

              {% endif %}

              {% if block.settings.link != blank and block.settings.link_2 == blank %}

                {%- assign link_slide = true -%}

              {% endif %}



              {% if section.settings.parallax %}

                {% if block.settings.image != blank %}

                  {% style %}

                    .hero__image--{{ block.id }} {

                      background-position: {{ block.settings.focal_point }};

                      background-size: cover;

                    }

                  {% endstyle %}

                {% endif %}

                <div class="parallax-container">

                  <div class="hero__image-wrapper">

                    <div

                      class="parallax-image hero__image hero__image--{{ block.id }}{% unless hero_text %} hero__image--no-overlay{% endunless %}{% if block.settings.image != blank %} lazyload{% else %} hero__image--svg{% endif %}"

                      {% if block.settings.image != blank %}

                        data-bgset="{% include 'bgset', image: block.settings.image %}"

                        data-sizes="auto"

                      {% endif %}>

                      {% if block.settings.image == blank %}

                        {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}

                      {% endif %}

                    </div>

                  </div>

                </div>

              {% else %}

                <div class="hero__image-wrapper{% unless hero_text %} hero__image-wrapper--no-overlay{% endunless %}">

                  {% if block.settings.image != blank %}

                    {% style %}

                      .hero__image--{{ block.id }} {

                        object-position: {{ block.settings.focal_point }};

                        font-family: "object-fit: cover; object-position: {{ block.settings.focal_point }};";

                      }

                    {% endstyle %}



                    {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}



                    <img class="image-fit hero__image hero__image--{{ block.id }} lazyload"

                      src=""

                      data-src="{{ img_url }}"

                      data-aspectratio="{{ block.settings.image.aspect_ratio }}"

                      data-sizes="auto"

                      data-parent-fit="cover"

                      alt="{{ block.settings.image.alt | escape }}">

                    <noscript>

                      <img class="image-fit hero__image hero__image--{{ block.id }}"

                        src="{{ block.settings.image | img_url: '1400x' }}"

                        alt="{{ block.settings.image.alt | escape }}">

                    </noscript>

                  {% else %}

                    {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}

                  {% endif %}

                </div>

              {% endif %}



              {% if link_slide %}

                <a href="{{ block.settings.link }}" class="hero__slide-link"></a>

              {% endif %}



              {% if hero_text %}

                <div class="hero__text-wrap">

                  <div class="page-width">

                    <div class="hero__text-content {{ block.settings.text_align }}">

                      <div class="hero__text-shadow">

                        {% unless block.settings.top_subheading == blank %}

                          <div class="hero__top-subtitle">

                            <div class="animation-cropper"><div class="animation-contents">

                              {{ block.settings.top_subheading | escape }}

                            </div></div>

                          </div>

                        {% endunless %}

                        {% unless block.settings.title == blank %}

                          <h2 class="h1 hero__title">

                            <div class="animation-cropper"><div class="animation-contents">

                            {{ block.settings.title | newline_to_br }}

                            </div></div>

                          </h2>

                        {% endunless %}

                        {% if block.settings.subheading or block.settings.link or block.settings.link_2 %}

                          {% unless block.settings.subheading == blank %}

                            <div class="hero__subtitle">

                              <div class="animation-cropper"><div class="animation-contents">

                                {{ block.settings.subheading | escape }}

                              </div></div>

                            </div>

                          {% endunless %}

                          {% if block.settings.link_text != blank or block.settings.link_text_2 != blank %}

                            <div class="hero__link">

                              {% if block.settings.link_text != blank %}

                                <a href="{{ block.settings.link }}" class="btn{% if block.settings.color_accent contains 'rgba(0,0,0,0)' %} btn--inverse{% endif %}">

                                  {{ block.settings.link_text }}

                                </a>

                              {% endif %}

                              {% if block.settings.link_text_2 != blank %}

                                <a href="{{ block.settings.link_2 }}" class="btn{% if block.settings.color_accent contains 'rgba(0,0,0,0)' %} btn--inverse{% endif %}">

                                  {{ block.settings.link_text_2 }}

                                </a>

                              {% endif %}

                            </div>

                          {% endif %}

                        {% endif %}

                      </div>

                    </div>

                  </div>

                </div>

              {% endif %}

            </div>

          {% endfor %}

        </div>

      {% if natural_height %}

        </div>

      {% endif %}

    </div>

  {% endif %}



  {% if section.blocks.size == 0 %}

    <div class="placeholder-noblocks">

      {{ 'home_page.onboarding.no_content' | t }}

    </div>

  {% endif %}

</div>



{% schema %}

  {

    "name": "Slideshow",

    "class": "index-section--hero",

    "max_blocks": 5,

    "settings": [

      {

        "type": "select",

        "id": "section_height",

        "label": "Desktop height",

        "default": "650px",

        "options": [

          {

            "label": "Natural",

            "value": "natural"

          },

          {

            "label": "450px",

            "value": "450px"

          },

          {

            "label": "550px",

            "value": "550px"

          },

          {

            "label": "650px",

            "value": "650px"

          },

          {

            "label": "750px",

            "value": "750px"

          },

          {

            "label": "Full screen",

            "value": "100vh"

          }

        ]

      },

      {

        "type": "select",

        "id": "mobile_height",

        "label": "Mobile height",

        "default": "auto",

        "info": "Not used if desktop height is set to natural",

        "options": [

          {

            "label": "Auto",

            "value": "auto"

          },

          {

            "label": "250px",

            "value": "250px"

          },

          {

            "label": "300px",

            "value": "300px"

          },

          {

            "label": "400px",

            "value": "400px"

          },

          {

            "label": "500px",

            "value": "500px"

          },

          {

            "label": "Full screen",

            "value": "100vh"

          }

        ]

      },

      {

        "type": "checkbox",

        "id": "parallax",

        "label": "Enable parallax",

        "default": true

      },

      {

        "type": "select",

        "id": "style",

        "label": "Slide navigation style",

        "default": "minimal",

        "options": [

          {

            "value": "minimal",

            "label": "Minimal"

          },

          {

            "value": "arrows",

            "label": "Arrows"

          },

          {

            "value": "bars",

            "label": "Bars"

          },

          {

            "value": "dots",

            "label": "Dots"

          }

        ]

      },

      {

        "type": "checkbox",

        "id": "autoplay",

        "label": "Auto-change slides",

        "default": true

      },

      {

        "type": "range",

        "id": "autoplay_speed",

        "label": "Change images every",

        "default": 7,

        "min": 5,

        "max": 10,

        "step": 1,

        "unit": "s"

      }

    ],

    "blocks": [

      {

        "type": "image",

        "name": "Slide",

        "settings": [

          {

            "type": "text",

            "id": "top_subheading",

            "label": "Subheading"

          },

          {

            "type": "textarea",

            "id": "title",

            "label": "Heading",

            "default": "Two line\ntitle slide."

          },

          {

            "type": "range",

            "id": "title_size",

            "label": "Heading text size",

            "default": 80,

            "min": 40,

            "max": 100,

            "unit": "px"

          },

          {

            "type": "text",

            "id": "subheading",

            "label": "Text",

            "default": "And optional subtext"

          },

          {

            "type": "url",

            "id": "link",

            "label": "Slide link"

          },

          {

            "type": "text",

            "id": "link_text",

            "label": "Slide link text",

            "default": "Optional button"

          },

          {

            "type": "url",

            "id": "link_2",

            "label": "Slide link 2"

          },

          {

            "type": "text",

            "id": "link_text_2",

            "label": "Slide link text 2"

          },

          {

            "type": "color",

            "id": "color_accent",

            "label": "Buttons",

            "default": "rgba(0,0,0,0)"

          },

          {

            "type": "select",

            "id": "text_align",

            "label": "Text alignment",

            "default": "vertical-center horizontal-center",

            "options": [

              {

                "value": "vertical-center horizontal-left",

                "label": "Center left"

              },

              {

                "value": "vertical-center horizontal-center",

                "label": "Center"

              },

              {

                "value": "vertical-center horizontal-right",

                "label": "Center right"

              },

              {

                "value": "vertical-bottom horizontal-left",

                "label": "Bottom left"

              },

              {

                "value": "vertical-bottom horizontal-center",

                "label": "Bottom center"

              },

              {

                "value": "vertical-bottom horizontal-right",

                "label": "Bottom right"

              }

            ]

          },

          {

            "type": "image_picker",

            "id": "image",

            "label": "Image"

          },

          {

            "type": "select",

            "id": "focal_point",

            "label": "Image focal point",

            "info": "Used to keep the subject of your photo in view.",

            "default": "center center",

            "options": [

              {

                "value": "20% 0",

                "label": "Top left"

              },

              {

                "value": "top center",

                "label": "Top center"

              },

              {

                "value": "80% 0",

                "label": "Top right"

              },

              {

                "value": "20% 50%",

                "label": "Left"

              },

              {

                "value": "center center",

                "label": "Center"

              },

              {

                "value": "80% 50%",

                "label": "Right"

              },

              {

                "value": "20% 100%",

                "label": "Bottom left"

              },

              {

                "value": "bottom center",

                "label": "Bottom center"

              },

              {

                "value": "80% 100%",

                "label": "Bottom right"

              }

            ]

          }

        ]

      }

    ],

    "presets": [{

      "name": "Slideshow",

      "category": "Image",

      "settings": {

        "autoplay": true,

        "autoplay_speed": 5

      },

      "blocks": [

        {

          "type": "image",

          "settings": {

            "title": "Endless\npossibilities.",

            "subheading": "Bring your brand to life"

          }

        },

        {

          "type": "image",

          "settings": {

            "title": "Two line\ntitle slide.",

            "subheading": "And big, beautiful imagery"

          }

        }

      ]

    }]

  }

{% endschema %}

 

 

Thanks,

Stewart

0 Likes
Shopify Partner
436 83 95

Hello Stewart,

The basic concept to show different images is show and hide with css media query.
Steps:
1) Copy same code and create new file under Sections named mobile-slideshow.
2) Change name Slideshow to Mobile Slideshow and remove unnecessary things which you don't want or leave it as it is.
3) Now check your theme setting, you find another option Mobile slideshow there. Add it and add you mobile images in it.
Last add css 

<style>
  #shopify-section-mobile-slideshow {
      display: none !important;
    }
  @media (max-width: 768px){ 
    #shopify-section-slideshow {
      display: none !important;
    }
    #shopify-section-mobile-slideshow {
      display: block !important;
    }
  }
</style>

Hope this will help you.

Thanks

Want to modify or custom changes on store hire me.
My Email: guleriathakur43@gmail.com
Skype: navrocks1
If helpful then please Like and Accept Solution.
If you are happy and want to donate small Click here (Its my paypal)
0 Likes
New Member
2 0 0

Thank you Guleria, I'm starting to get the hang of it. Just wondering where do I put the css?? And where do I put it in the code?

0 Likes