Different slide show images for mobile and desktop - debutify

Chaitunat
New Member
3 0 0

Hey there,

I wanted to create a different set of slideshow images for mobile and desktop. I use the theme - debutify.
I understood the basic concept of how it is done from this following discussion:

https://community.shopify.com/c/Shopify-Design/Separate-Banner-For-Mobile/td-p/427835

I was able to follow the first and third step mentioned in the above link but facing a lot of trouble figuring out how to go about the second step. I am not able to find the image tags as mentioned in the link. I have very little knowledge about code. 

Can someone help me figure out where and what to change in the code. Any help is appreciated.

Posting the current code from the "hero.liquid" below. Thanks in advance

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

  {% if section.blocks.size > 1 %}
    {% assign hero_slick = true %}
  {% else %}
    {% assign hero_slick = false %}
  {% endif %}

  <div id="section-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="hero-section">
    
    {% include 'hero-header' %}
    
    <div id="Hero-{{ section.id }}" class="hero-container hero-index hero-header{% if hero_slick %} hero-slick{% endif %}"
      {% if hero_slick %}
         data-hero-slick="{{ hero_slick }}"
         data-autoplay="{{ section.settings.autoplay }}"
         data-autoplayspeed="{{ section.settings.autoplayspeed | times: 1000 }}"
         data-dots="{{ section.settings.dots }}"
         data-arrows="{{ section.settings.arrows }}"
      {% endif %}>

      <!-- Blocks -->
      {% for block in section.blocks %}
        <div class="hero hero-{{ block.id }}
                    hero--{{ section.settings.section_height }}
                    hero-mobile-{{ section.settings.section_height_mobile }}
                    overlay
                    lazyload
                    hero-parallax
                    {% unless forloop.first == true %}lazypreload{% endunless %}
                    {% if hero_slick %}hero__slide slide--{{ block.id }}{% endif %}"
             {% if block.settings.image %}
             data-bgset="{% include 'bgset', image: block.settings.image %}"
             data-sizes="auto"
             data-parent-fit="cover"
             style="background-position: {{ block.settings.image_position }}; background-image: url('{{ block.settings.image | img_url: 'medium' }});"
             {% endif %}
             {{ block.shopify_attributes }}>

          {% if block.settings.image == blank %}
            <div class="placeholder-background">
              {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
            </div>
          {% endif %}
          <div class="hero__inner">
            <div class="hero__text-wrapper {{ block.settings.text_alignment }}">
              <div class="grid">
                <div class="grid__item large--eight-twelfths push--large--two-twelfths one-whole hero-content">
                  {% if block.settings.title != blank %}
                    <h2 class="hero__title">{{ block.settings.title | escape }}</h2>
                  {% endif %}
                  {% if block.settings.text != blank %}
                    <div class="rte hero__text">{{ block.settings.text }}</div>
                  {% endif %}
                  {% if block.settings.button_label != blank and block.settings.button_link != blank %}
                    <a href="{{ block.settings.button_link }}" class="btn {{ block.settings.button_style }} hero__btn">
                      {{ block.settings.button_label | escape }} <span class="fas fa-arrow-right" aria-hidden="true"></span>
                    </a>
                  {% endif %}
                </div>
              </div>
             </div>
          </div>

          {% unless block.settings.overlay %}
            <style>
              .hero-{{ block.id }}.overlay:after{
                background-color: transparent;
              }
            </style>
          {% endunless %}
        </div>
      {% endfor %}
    </div>
  
    <div class="slick-navigation">
      <button class="slick-arrows slick-prev">
        <span class="fas fa-arrow-left"></span>
      </button>
      <div class="slick-dots-container"></div>
      <button class="slick-arrows slick-next">
        <span class="fas fa-arrow-right"></span>
      </button>
    </div>

  </div>
{% endif %}

{% schema %}
  {
    "name": "Slideshow",
	"class": "hero-section",
	"max_blocks": 4,
    "settings": [
	  {
        "type": "select",
        "id": "section_height",
        "label": "Section height (desktop)",
        "default": "xlarge",
        "options": [
          {
            "label": "Extra Small",
            "value": "xsmall"
          },
		  {
            "label": "Small",
            "value": "small"
          },
          {
            "label": "Medium",
            "value": "medium"
          },
          {
            "label": "Large",
            "value": "large"
          },
		  {
            "label": "Full",
            "value": "xlarge"
          }
        ]
      },
      {
        "type": "select",
        "id": "section_height_mobile",
        "label": "Section height (mobile)",
        "default": "xlarge",
        "options": [
          {
            "label": "Extra Small",
            "value": "xsmall"
          },
          {
            "label": "Small",
            "value": "small"
          },
          {
            "label": "Medium",
            "value": "medium"
          },
          {
            "label": "Large",
            "value": "large"
          },
          {
            "label": "Full",
            "value": "xlarge"
          }
        ]
      },
	  {
		"type": "header",
		"content": "Slider options"
	  },
	  {
        "type": "checkbox",
        "id": "autoplay",
        "label": "Auto rotate",
        "default": true
      },
	  {
        "type": "checkbox",
        "id": "dots",
        "label": "Show dots",
        "default": true
      },
	  {
        "type": "checkbox",
        "id": "arrows",
        "label": "Show arrows",
        "default": true
      },
      {
        "type": "range",
        "id": "autoplayspeed",
        "label": "Slide changes every",
        "min": 3,
        "max": 10,
        "step": 1,
        "unit": "s",
        "default": 5
      }
    ],
	"blocks" : [
      {
        "type": "slide",
        "name": "Slide",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Image"
          },
          {
            "type": "image_picker",
            "id": "mobile_image",
            "label": "Mobile Image"
          },
          {
            "type": "select",
            "id": "image_position",
            "label": "Image position",
            "default": "center center",
            "options": [
              {
                "label": "Top left",
                "value": "top left"
              },
              {
                "label": "Top center",
                "value": "top center"
              },
              {
                "label": "Top right",
                "value": "top right"
              },
              {
                "label": "Middle left",
                "value": "center left"
              },
              {
                "label": "Middle center",
                "value": "center center"
              },
              {
                "label":"Middle right",
                "value": "center right"
              },
              {
                "label":"Bottom left",
                "value": "bottom left"
              },
              {
                "label": "Bottom center",
                "value": "bottom center"
              },
              {
                "label": "Bottom right",
                "value": "bottom right"
              }
            ]
          },
		  {
            "type": "checkbox",
            "id": "overlay",
            "label": "Show overlay",
            "default": true
          },
          {
            "type": "text",
            "id": "title",
            "label": "Heading",
            "default": "Slideshow."
          },
          {
            "type": "richtext",
            "id": "text",
            "label": "Text",
            "default": "<p>Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.</p>"
          },
          {
            "type": "select",
            "id": "text_alignment",
            "label": "Text alignment",
            "default": "text-center",
            "options": [
              {
                "value": "",
                "label": "Left"
              },
              {
                "value": "text-center",
                "label": "Center"
              },
              {
                "value": "text-right",
                "label": "Right"
              }
            ]
          },	
          {
            "type": "text",
            "id": "button_label",
            "label": "Button label",
			"default": "Shop now"
          },
          {
            "type": "url",
            "id": "button_link",
            "label": "Button link",
			"default": "/collections/all"
          },
          {
            "type": "select",
            "id": "button_style",
            "label": "Button style",
            "default": "btn--primary",
            "options": [
              {
                "value": "",
                "label": "Default"
              },
              {
                "value": "btn--primary",
                "label": "Full"
              },
              {
                "value": "btn-outline-primary",
                "label": "Outline"
              }
            ]
          }
        ]
      }
    ],
    "presets": [
      {
        "name": "Slideshow",
        "category": "Image",
        "blocks": [
          {
            "type": "slide"
          }
        ]
      }
    ]
  }
{% endschema %}

 

0 Likes