How to add different images for Mobile and Desktop on homepage banner!

JessNow
New Member
2 0 1

I want to add two different images to display on mobile and desktop. After a lot of testing with the available help documents, I've failed to add one properly.

Can anyone help me to set it up!

Here's the code on my theme's slideshow.liquid -

 

<div class="homepage-section no-fouc index-section slideshow-section" data-section-id="{{ section.id }}" data-section-type="slideshow-section">
  {% unless section.settings.full-width %}
  <div class="row">
    <div class="desktop-12 tablet-6 mobile-3">
      {% endunless %}
 
      {% if section.blocks.size > 0 %}
      <div class="flexslider index_Slider" id="Slideshow-{{ section.id }}" data-speed="{{ section.settings.slider_speed }}">
        <ul class="slides">
          {%- assign image_size = '2000x' -%}
          {% for block in section.blocks %}
          {%- assign img_url = block.settings.image | img_url: image_size -%}
          <li id="slide--{{ block.id }}" data-block-id="{{ block.id }}" class="slide--{{ block.id }} slide_image" data-flexslider-index="{{ forloop.index0 }}" {{ block.shopify_attributes }}>
            {% if block.settings.image != blank %}
            {% if block.settings.link != blank %}<a href="{{ block.settings.link }}">{% endif %}
              <img class="lazyload lazyload-fade" data-src="{{ img_url }}" data-sizes="auto"/>
            {% if block.settings.link != blank %}</a>{% endif %}
            {% endif %}            
 
            {% if block.settings.image == blank %}
            {% capture current %}{% cycle 1, 2 %}{% endcapture %}
            {%- assign placeholder = 'lifestyle-' | append: current -%}
            {{ placeholder | placeholder_svg_tag: 'placeholder-svg' }}
            {% endif %}
 
            <div class="flex-caption slide-{{ block.id }}">
              <div class="caption-inners">
                {% if block.settings.title != 'blank' %}
                <h2 class="slide-title">{{ block.settings.title }}</h2>
                {% endif %}
                {% if block.settings.subheading != 'blank' %}            
                <p class="caption">{{ block.settings.subheading }}</p>
                {% endif %}
                {% if block.settings_link != 'blank' %}
                <div class="cta">
                  {% if block.settings.link != blank %}<a href="{{ block.settings.link }}">{% endif %}
                  {{ block.settings.button_text }}
                  {% if block.settings.link != blank %}</a>{% endif %}
                </div>
                {% endif %}
              </div>
            </div>
          </li>
          <style>
            .flex-caption.slide-{{ block.id }} {
              top: {{ block.settings.caption_vertical }};
              text-align: {{ block.settings.caption_horizontal }};
            }      
            
            .flex-caption.slide-{{ block.id }} .caption-inners {
              {% if block.settings.caption_rgba %}
              background: rgba({{ block.settings.caption_rgba_color }});
              {% else %}
              background: {{ block.settings.caption_background }};
              {% endif %}               
            }
            .flex-caption.slide-{{ block.id }} h2.slide-title {
              color: {{ block.settings.slide_text_color }};
              text-align: {{ block.settings.caption_horizontal }};
            }
            .flex-caption.slide-{{ block.id }} p {
              color: {{ block.settings.slide_text_color }};
            }
            .flex-caption.slide-{{ block.id }} .cta a {
              color: {{ block.settings.cta_color }};
              background: {{ block.settings.cta_background }};
            }        
            .cta a, .cta {
              font-size: {{ section.settings.cta_size }};
              font-weight: {{ section.settings.cta_weight }}; 
            }
            .flex-caption h2.slide-title {
              font-size: {{ section.settings.slide-title-size }};
              font-family: {{ settings.headings_font }};
              font-weight:{{ section.settings.slide-title-weight }};
            }
            .flex-caption p {
              font-size: {{ section.settings.caption-size }};
            }
          </style>  
          {% endfor %}
        </ul>
      </div>
      {% endif %}
      {% if section.blocks.size == 0 %}
      {% include 'no-blocks' %}
      {% endif %}       
 
      {% unless section.settings.full-width %}
    </div>
  </div>
  {% endunless %}
</div>
<div class="clear"></div>
 
{% schema %}
{
  "name": "Slideshow",
  "max_blocks": 5,
  "blocks": [
    {
      "type": "image",
      "name": "Image slide",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "title",
          "label": "Title",
          "default": "Add a title to your image"
        },
        {
          "type": "text",
          "id": "subheading",
          "label": "Subheading",
          "default": "Tell your brand's story through images"
        },
        {
          "type": "text",
          "id": "button_text",
          "label": "Button text",
          "default": "Add a call to action"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Slide link"
        },
{
        "type": "select",
        "id": "caption_horizontal",
        "label": "Caption horizontal alignment",
        "options": [
          {
            "value": "left",
            "label": "Left"
          },
          {
            "value": "center",
            "label": "Center"
          },
          {
            "value": "right",
            "label": "Right"
          }
        ]
      },
      {
        "type": "text",
        "id": "caption_vertical",
        "label": "Caption vertical position (% or px)",
        "default": "45%",
        "info": "Vertically align the caption and button. % values are recommended, do not exceed 100%."
        },
      {
        "type": "color",
        "id": "slide_text_color",
        "label": "Text color",
        "default": "#000000"
      },
      {
        "type": "color",
        "id": "cta_color",
        "label": "Button text color",
        "default": "#ffffff"
      },
      {
        "type": "color",
        "id": "cta_background",
        "label": "Button background",
        "default": "#000000"
      }
      ]
    }
  ],
  "settings": [
    {
      "type": "checkbox",
      "id": "full-width",
      "label": "Enable full width"
    },
{
        "type": "select",
        "id": "slider_speed",
        "label": "Slideshow speed",
"default": "6000",
        "options": [
          {
            "value": "5000",
            "label": "5 seconds"
          },
          {
            "value": "6000",
            "label": "6 seconds"
          },
          {
            "value": "7000",
            "label": "7 seconds"
          },
          {
            "value": "8000",
            "label": "8 seconds"
          },
          {
            "value": "9000",
            "label": "9 seconds"
          },
          {
            "value": "10000",
            "label": "10 seconds"
          }
        ]
      },
    {
        "type": "header",
        "content": "Slideshow text"
      },
      {
        "type": "select",
        "id": "slide-title-size",
        "label": "Slide title Size",
"default": "24px",
        "options": [
                    {
            "value": "12px",
            "label": "12px"
          },
          {
            "value": "13px",
            "label": "13px"
          },
          {
            "value": "14px",
            "label": "14px"
          },
          {
            "value": "16px",
            "label": "16px"
          },
          {
            "value": "18px",
            "label": "18px"
          },
          {
            "value": "20px",
            "label": "20px"
          },
          {
            "value": "24px",
            "label": "24px"
          },
          {
            "value": "28px",
            "label": "28px"
          },
          {
            "value": "32px",
            "label": "32px"
          },
          {
            "value": "36px",
            "label": "36px"
          }
        ]
      },
      {
        "type": "select",
        "id": "slide-title-weight",
        "label": "Slide title weight",
"default": "700",
        "options": [
          {
            "value": "400",
            "label": "Normal"
          },
          {
            "value": "300",
            "label": "Light"
          },
          {
            "value": "700",
            "label": "Bold"
          }
        ]
      },     
      {
        "type": "select",
        "id": "caption-size",
        "label": "Slide caption size",
"default": "14px",
        "options": [
                    {
            "value": "12px",
            "label": "12px"
          },
          {
            "value": "13px",
            "label": "13px"
          },
          {
            "value": "14px",
            "label": "14px"
          },
          {
            "value": "16px",
            "label": "16px"
          },
          {
            "value": "18px",
            "label": "18px"
          },
          {
            "value": "20px",
            "label": "20px"
          },
          {
            "value": "24px",
            "label": "24px"
          },
          {
            "value": "28px",
            "label": "28px"
          },
          {
            "value": "32px",
            "label": "32px"
          },
          {
            "value": "36px",
            "label": "36px"
          }
        ]
      },
      {
        "type": "select",
        "id": "cta_size",
        "label": "Slide button size",
"default": "14px",
        "options": [
                   {
            "value": "12px",
            "label": "12px"
          },
          {
            "value": "13px",
            "label": "13px"
          },
          {
            "value": "14px",
            "label": "14px"
          },
          {
            "value": "16px",
            "label": "16px"
          },
          {
            "value": "18px",
            "label": "18px"
          },
          {
            "value": "20px",
            "label": "20px"
          },
          {
            "value": "24px",
            "label": "24px"
          },
          {
            "value": "28px",
            "label": "28px"
          },
          {
            "value": "32px",
            "label": "32px"
          },
          {
            "value": "36px",
            "label": "36px"
          }
        ]
      },
      {
        "type": "select",
        "id": "cta_weight",
        "label": "Slide button weight",
"default": "400",
        "options": [
          {
            "value": "300",
            "label": "Light"
          },
          {
            "value": "400",
            "label": "Normal"
          },
          {
            "value": "700",
            "label": "Bold"
          }
        ]
      }
  ],
  "presets": [{
    "name": "Slideshow",
    "category": "Image",
    "blocks": [
      {
        "type": "image"
      },
      {
        "type": "image"
      }
    ]
  }]
}
{% endschema %}
 
 
 
Thanks in advance.
KetanKumar
Shopify Partner
14248 1657 5128

@JessNow 

Sorry for facing this issue, it's my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question.

Please share your site URL,
So I will check and provide a solution here.

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
JessNow
New Member
2 0 1

Here's the theme & look, I'm working one. I want the to upload two photos & show them each on mobile & desktop.

https://fashionopolism-responsive.myshopify.com/

0 Likes
KetanKumar
Shopify Partner
14248 1657 5128

@JessNow 


It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes