Separate Banner For Mobile

Highlighted
New Member
2 0 0

Hello,

I currently use the Fashionopolism theme for my store https://www.theveganwarehouse.com/ 

I want to be able to create separate home page banners for mobile and for desktop. The banners that work well for desktop do not automatically resize on mobile and they end up being cut off.

Please advise if anyone has been able to figure this out!

Ewelina

0 Likes
Highlighted
Shopify Partner
1172 34 221

Hey, does your theme support sections? if yes you can duplicate the hero slideshow section and with the help of CSS media queries you can switch them based on screen sizes.

Available for hiring. Reach me at lixon@ecommercestudio.in
Highlighted
New Member
2 0 0

Hey- our theme does not support sections. Is there another way we can have seperate images for mobile vs. desktop? 

0 Likes
Highlighted
New Member
2 0 0

Hello - I'm trying to do the same thing and my template Parallax has sections. Can you explain further?


@Lixon_Louis wrote:

Hey, does your theme support sections? if yes you can duplicate the hero slideshow section and with the help of CSS media queries you can switch them based on screen sizes.


 

0 Likes
Highlighted
Shopify Partner
1172 34 221

First of all backup the original theme and try these steps on a duplicate one, because the theme code I'm showing is not parallax. This might not be a perfect solution, but it will give you an idea about what i said above.

 

#1 In the slideshow section, locate the image block and duplicate it with different id and label. Save that and Go to customize theme menu. You will get an option for mobile image.

 

#2 Next for displaying that image, Locate the image tag inside slideshow container and duplicate the same with different src   and  a css class  which will switch them based on screen sizes.

 

slideshow1.pngslideshow2.png

 

#3 Media Queries. This should go at the very bottom of your theme.scss.liquid Or styles.scss.liquid . Alternatively you can use theme's own helper classes if available. like `small--hide` && `medium-up--hide` 

 

/* For mobile */
@media (max-width:800px){
  .desktop-only{ display:none }
  .mobile-only{ display: block}
}
/* For Desktop */
@media (min-width:800px){
  .desktop-only{ display: block }
  .mobile-only{ display: none }
}

 

Available for hiring. Reach me at lixon@ecommercestudio.in
0 Likes
Highlighted
New Member
2 0 0

Thanks so much for this! I'm just getting to it now. 

 

So, here's what I encountered... 

 

Because parallax has a ton of dynamic features 'if' statements abound. I think I placed the code in the wrong spot in slideshow.liquid because I end up  with a placeholder image plopped under the main image (on both desktop and mobile). What would be the basic logic for working around the if statements?

0 Likes
Highlighted
New Member
1 0 0

Hi Lixon I am working on brooklyn theme i was able to add a separate section for mobile image in layout properties. However I am not able to call the image on mobile devices. here is a snapshot of theme.liquid code

<img class="hero__image hero__image--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %}"
{%- if forloop.first == true -%}


data-src="{{ img_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
alt="{{ block.settings.image.alt | escape }}"
style="object-position: {{ block.settings.image_position }}">

<div class="mobile_only-no-js"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '' }}');"{% endif %}></div>
{%- endif -%}
</noscript>
{%- assign img_url = block.settings.image | img_url: '' | replace: '.', '_{width}x.' -%}
<img class="mobile_only--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %}"
{%- if forloop.first == true -%}
{%- endif -%}

data-src="{{ img_url }}"
data-widths="[540, 720,]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
alt="{{ block.settings.image.alt | escape }}"
style="object-position: {{ block.settings.image_position }}">
{%- endif -%}

0 Likes
Highlighted
Tourist
4 0 1

Hello Louis,

 

Thank you for this detail, we have been able to follow steps one and three. But are struggling to identify where to place the code for step two. Can you please point us in the right direction?

 

Best wishes

Kelly 

 

 

 


@Lixon_Louis wrote:

First of all backup the original theme and try these steps on a duplicate one, because the theme code I'm showing is not parallax. This might not be a perfect solution, but it will give you an idea about what i said above.

 

#1 In the slideshow section, locate the image block and duplicate it with different id and label. Save that and Go to customize theme menu. You will get an option for mobile image.

 

#2 Next for displaying that image, Locate the image tag inside slideshow container and duplicate the same with different src   and  a css class  which will switch them based on screen sizes.

 

slideshow1.pngslideshow2.png

 

#3 Media Queries. This should go at the very bottom of your theme.scss.liquid Or styles.scss.liquid . Alternatively you can use theme's own helper classes if available. like `small--hide` && `medium-up--hide` 

 

/* For mobile */
@media (max-width:800px){
  .desktop-only{ display:none }
  .mobile-only{ display: block}
}
/* For Desktop */
@media (min-width:800px){
  .desktop-only{ display: block }
  .mobile-only{ display: none }
}

 


 

 

 

0 Likes
Highlighted
New Member
1 0 0

Hi, I have done point 1 and 3 but struggling with point 2 about making the image appear. Please see slideshow code:

 

<div class="slideshow-section {% if section.settings.type == 'dual' %}slideshow-section--dual{% else %}slideshow-section--fs{% endif %} section section-{{ section.id }}" data-slideshow-type="{{ section.settings.type }}">
{%- if section.settings.type == 'dual' -%}
<div class="container">
<div class="dual-slideshow"
data-autoplay="{% if section.settings.autoplay and section.blocks.size > 1 %}true{% else %}false{% endif %}"
data-cycle-speed="{{ section.settings.cycle_speed | times: 1000 }}">
{%- if section.blocks.size > 1 -%}
<div class="slideshow slideshow--anchor">
{%- for block in section.blocks -%}
<div class="slideshow__slide {% if forloop.index == 2 %}slideshow__slide--active{% endif %} slideshow__slide--{{ block.type }}"
data-slide-type="{{ block.type }}"
data-slide-index="{{ forloop.index }}"
{{ block.shopify_attributes }}>
<div class="slideshow__media-container">
{%- if block.type == 'image' -%}
{%- if block.settings.image != blank -%}
<img class="hide-no-js slideshow__media lazyload image--fade-in"
data-src="{{ block.settings.image.src | img_url: '1300x875', format: 'pjpg' }}"
data-srcset="{{ block.settings.image.src | img_url: '650x430', format: 'pjpg' }} 650w, {{ block.settings.image.src | img_url: '1300x875', format: 'pjpg' }} 1300w"
alt="{{ block.settings.image.alt | escape }}">

<noscript>
<img class="slideshow__media"
src="{{ block.settings.image.src | img_url: '1300x875', format: 'pjpg' }}"
srcset="{{ block.settings.image.src | img_url: '650x430', format: 'pjpg' }} 650w, {{ block.settings.image.src | img_url: '1300x875', format: 'pjpg' }} 1300w"
alt="{{ block.settings.image.alt | escape }}">
</noscript>
{%- else -%}
{%- capture image_name -%}lifestyle-{% cycle 'anchor': '1', '2' %}{%- endcapture -%}
{{ image_name | placeholder_svg_tag: 'slideshow__media slideshow__media--placeholder' }}
{%- endif -%}
{%- else -%}
{% if block.settings.video_poster.src != blank or block.settings.video_url.type != 'youtube' %}
<img class="slideshow__media"
width="525"
height="800"
src="{{ block.settings.video_poster.src | img_url: '1300x875', format: 'pjpg' }}"
srcset="{{ block.settings.video_poster.src | img_url: '650x430', format: 'pjpg' }} 650w, {{ block.settings.video_poster.src | img_url: '1300x875', format: 'pjpg' }} 1300w"
sizes="80vw, (min-width: 80em) 800px"
alt="{{ block.settings.video_poster.alt | escape }}">
{% else %}
<img class="slideshow__media"
width="525"
height="800"
src="https://img.youtube.com/vi/{{ block.settings.video_url.id }}/hqdefault.jpg">
{% endif %}
{%- endif -%}
</div>
</div>
{%- endfor -%}

<div class="slideshow__slide-count">
<span class="slideshow__current-slide">1</span>
<span class="slideshow__total-slides">/ {{ section.blocks.size }}</span>
</div>
</div>
{%- endif -%}

<div class="slideshow slideshow--main">
{%- if section.blocks.size > 1 -%}
<div class="slideshow__nav">
<button class="slideshow__nav-button slideshow__nav-prev" data-action="previous-slide">{%- render 'icon' with 'arrow-left' -%}</button>
<button class="slideshow__nav-button slideshow__nav-next" data-action="next-slide">{%- render 'icon' with 'arrow-right' -%}</button>
</div>

<div class="slideshow__slide-count">
<span class="slideshow__current-slide">1</span>
<span class="slideshow__total-slides">/ {{ section.blocks.size }}</span>
</div>
{%- endif -%}

{%- for block in section.blocks -%}
<div class="slideshow__slide {% if forloop.first %}slideshow__slide--active{% endif %} slideshow__slide--{{ block.type }}"
data-slide-type="{{ block.type }}"
data-slide-index="{{ forloop.index }}"
{{ block.shopify_attributes }}>
<div class="slideshow__content">
{%- if block.settings.subheading != blank -%}
<h3 class="slideshow__subheading" style="color: {{ block.settings.heading_color }}">{{ block.settings.subheading | escape }}</h3>
{%- endif -%}

{%- if block.settings.heading != blank -%}
<h2 class="slideshow__heading" style="color: {{ block.settings.heading_color }}">{{ block.settings.heading | truncate: 45 }}</h2>
{%- endif -%}

{%- if block.type == 'image' and block.settings.button_text != blank -%}
<a href="{{ block.settings.link }}" class="slideshow__button button button--secondary">{{ block.settings.button_text }}</a>
{%- endif -%}
</div>

<div class="slideshow__media-container">
{%- if block.type == 'image' -%}
{%- if block.settings.image != blank -%}
<img class="hide-no-js slideshow__media lazyload image--fade-in"
data-src="{{ block.settings.image.src | img_url: '1300x875', format: 'pjpg' }}"
data-srcset="{{ block.settings.image.src | img_url: '650x430', format: 'pjpg' }} 650w, {{ block.settings.image.src | img_url: '1300x875', format: 'pjpg' }} 1300w"
sizes="85vw">

<noscript>
<img class="slideshow__media"
src="{{ block.settings.image.src | img_url: '1300x875', format: 'pjpg' }}"
srcset="{{ block.settings.image.src | img_url: '650x430', format: 'pjpg' }} 650w, {{ block.settings.image.src | img_url: '1300x875', format: 'pjpg' }} 1300w"
sizes="85vw">
</noscript>
{%- else -%}
{%- capture image_name -%}lifestyle-{% cycle 'main': '1', '2' %}{%- endcapture -%}
{{ image_name | placeholder_svg_tag: 'slideshow__media slideshow__media--placeholder' }}
{%- endif -%}
{%- else -%}
<div class="slideshow__media">
<div class="slideshow__plyr-container">
<div class="plyr-video" data-type="{{ block.settings.video_url.type }}" data-video-id="{{ block.settings.video_url.id }}"></div>
</div>
</div>
{%- endif -%}
</div>
</div>
{%- endfor -%}
</div>
</div>
</div>
{%- else -%}
<div class="fs-slideshow">
<div class="fs-slideshow__slides"
data-autoplay="{% if section.settings.autoplay and section.blocks.size > 1 %}true{% else %}false{% endif %}"
data-cycle-speed="{{ section.settings.cycle_speed | times: 1000 }}">
{%- for block in section.blocks -%}
{%- if block.type == 'image' -%}
{%- capture slide_inner -%}
{%- if block.settings.image -%}
<div class="aspect-ratio" style="padding-bottom: {{ 100.0 | divided_by: block.settings.image.aspect_ratio }}%">
<img class="fs-slideshow__image"
src="{{ block.settings.image | img_url: '1600x800', format: 'pjpg' }}"
srcset="{{ block.settings.image.src | img_url: '800x400', format: 'pjpg' }} 800w, {{ block.settings.image.src | img_url: '1600x800', format: 'pjpg' }} 1600w"
alt="{{ block.settings.image.alt | escape }}">
</div>
{%- else -%}
{%- capture image_name -%}lifestyle-{% cycle 'anchor': '1', '2' %}{%- endcapture -%}
{{ image_name | placeholder_svg_tag: 'fs-slideshow__image fs-slideshow__image--placeholder' }}
{%- endif -%}

<div class="fs-slideshow__cover fs-slideshow__cover--{{ block.settings.position }}">
<div class="fs-slideshow__content">
{%- if block.settings.subheading != blank -%}
<h3 class="fs-slideshow__subheading" style="color: {{ block.settings.heading_color }}">{{ block.settings.subheading | escape }}</h3>
{%- endif -%}

{%- if block.settings.heading != blank -%}
<h2 class="fs-slideshow__heading" style="color: {{ block.settings.heading_color }}">{{ block.settings.heading | escape }}</h2>
{%- endif -%}

{%- if block.settings.button_text != blank -%}
<a href="{{ block.settings.link }}" class="fs-slideshow__button button button--primary">{{ block.settings.button_text }}</a>
{%- endif -%}
</div>
</div>
{%- endcapture -%}

{%- if block.settings.button_text == blank and block.settings.link != blank -%}
<a href="{{ block.settings.link }}" class="fs-slideshow__slide" {{ block.shopify_attributes }} {% unless forloop.first %}style="display: none"{% endunless %} data-slide-index="{{ forloop.index0 }}">
{{ slide_inner }}
</a>
{%- else -%}
<div class="fs-slideshow__slide" {{ block.shopify_attributes }} {% unless forloop.first %}style="display: none"{% endunless %} data-slide-index="{{ forloop.index0 }}">
{{ slide_inner }}
</div>
{%- endif -%}
{%- else -%}
<div class="fs-slideshow__slide" {{ block.shopify_attributes }} {% unless forloop.first %}style="display: none"{% endunless %} data-slide-index="{{ forloop.index0 }}">
<div class="fs-slideshow__plyr-container">
<div class="plyr-video" data-type="{{ block.settings.video_url.type }}" data-video-id="{{ block.settings.video_url.id }}"></div>
</div>
</div>
{%- endif -%}
{%- endfor -%}
</div>

{%- if section.blocks.size > 1 -%}
<div class="fs-slideshow__slide-count hidden-thumb">
<div class="container">
<span class="fs-slideshow__current-slide">1</span>
<span class="fs-slideshow__total-slides">/ {{ section.blocks.size }}</span>
</div>
</div>

<span class="fs-slideshow__progress-bar">
<span class="fs-slideshow__progress-bar-advancement" style="width: {{ 100 | divided_by: section.blocks.size }}%"></span>
</span>
{%- endif -%}
</div>
{%- endif -%}
</div>

{% schema %}
{
"name": "Slideshow",
"class": "shopify-section__slideshow",
"max_blocks": 5,
"settings": [
{
"type": "select",
"id": "type",
"label": "Layout",
"options": [
{
"value": "dual",
"label": "Reveal next slide"
},
{
"value": "full_width",
"label": "Full width"
}
],
"default": "dual"
},
{
"type": "checkbox",
"id": "autoplay",
"label": "Auto rotate between slides",
"default": true
},
{
"type": "range",
"id": "cycle_speed",
"min": 3,
"max": 10,
"step": 1,
"unit": "sec",
"label": "Change slides every",
"default": 5
}
],
"blocks": [
{
"type": "image",
"name": "Image slide",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1560 x 1050px jpg recommended"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile_Image",
"info": "750 x 1500px jpg recommended. If none is set, desktop image will be cropped."
},
{
"type": "text",
"id": "subheading",
"label": "Subheading"
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"default": "Your slideshow",
"info": "45 characters maximum"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading color",
"default": "#000000"
},
{
"type": "text",
"id": "button_text",
"label": "Button text"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "select",
"id": "position",
"label": "Text position",
"info": "This setting is only applicable for the full-screen slideshow",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "left"
}
]
},
{
"type": "video",
"name": "Video slide",
"settings": [
{
"type": "video_url",
"id": "video_url",
"label": "Video URL",
"accept": ["youtube", "vimeo"],
"info": "Enter either a Vimeo or YouTube URL",
"default": "https://www.youtube.com/watch?v=_9VUPq3SxOc"
},
{
"type": "image_picker",
"id": "video_poster",
"label": "Video image placeholder",
"info": "1300 x 875px jpg recommended. This image is only used in the \"reveal next slide\" slideshow, for the preview slide. For YouTube, a default one is extracted from the video, but we recommend you to upload a custom image for best results."
},
{
"type": "text",
"id": "heading",
"label": "Heading",
"info": "Heading is not displayed if layout is full screen.",
"default": "Your slideshow"
},
{
"type": "color",
"id": "heading_color",
"label": "Heading color",
"default": "#000000"
}
]
}
],
"presets": [
{
"category": "Image",
"name": "Slideshow",
"settings": {
"autoplay": true,
"cycle_speed": 5
},
"blocks": [
{
"type": "image"
},
{
"type": "image"
}
]
}
]
}
{% endschema %}

0 Likes
Highlighted
New Member
1 0 0
0 Likes