Shopify themes, liquid, logos, and UX
Hey There,
Im new to Shopify and am currently trying to add a Mobile banner section that will change the banner to a new image based on the screen size.
I've managed to add into the block of the liquid file the section to be able to upload the mobile banner image.
But i can't seem to manage to get the theme to pick the image based on the screen size.
Currently the banner only shows the mobile banner, regardless of screen size.
This is the liquid code that i have. I haven't added the schema part of the code, if that is needed to help with this question please let me know and i will add that in.
{%- liquid assign mobile_height = section.settings.mobile_height assign content_position = section.settings.content_position assign desktop_height = section.settings.desktop_height assign desktop_image_width = section.settings.desktop_image_width assign desktop_layout = section.settings.layout assign full_width = section.settings.full_width assign autoplay = section.settings.autoplay assign disable_top_spacing = section.settings.disable_top_spacing assign disable_bottom_spacing = section.settings.disable_bottom_spacing case mobile_height when 'mobile-height-350' assign mobile_image_height = 350 when 'mobile-height-400' assign mobile_image_height = 400 when 'mobile-height-450' assign mobile_image_height = 450 when 'mobile-height-500' assign mobile_image_height = 500 else assign mobile_image_height = 500 endcase if autoplay assign autoplay = section.settings.autoplay_length | times: 1000 endif assign dots = true if section.blocks.size < 2 assign dots = false endif if desktop_height == 'desktop-height-auto' assign image_carousel_class = 'adapt-to-content' endif if section.index == 1 assign priority = 'high' endif -%}
<div class="row{% if full_width %} full-width-row-full{% endif %}"> <div class="small-12 columns"> <div class="image-with-text-slideshow grid--image-{{ desktop_image_width }} {{ desktop_layout }} {{ content_position }} section-spacing{% if disable_top_spacing %} section-spacing--disable-top{% endif %}{% if disable_bottom_spacing %} section-spacing--disable-bottom{% endif %}"> <div class="image-with-text-slideshow__image carousel inner-carousel {{ image_carousel_class }}" data-fade="true"> {% for block in section.blocks %} <div class="image-with-text-slideshow__image-slide carousel__slide"> <div class="image-with-text-slideshow__image-media {{ mobile_height }} {{ desktop_height }}"> {% if block.settings.image %} {% assign image = block.settings.image %} {% assign small_width = image.src.height | times: '375' | divided_by: image.src.width %} {% assign master_width = image.src.width | append: 'x' | append: image.src.height %} {% assign width = '375x500' | append: small_width | append: master_width %} {%- render 'responsive-image', image: image, sizes: width, class: 'image-with-text-slideshow--desktop', priority: priority -%} {% else %} {%- assign index = forloop.index | modulo: 2 | plus: 1 -%} {{ 'hero-apparel-' | append: index | placeholder_svg_tag: 'placeholder_svg_tag' }} {% endif %} {% if block.settings.mobile_image %} {% assign image = block.settings.mobile_image %} {% assign master_width = image.src.width | append: 'x' | append: image.src.height %} {% assign width = '375x500' | append: mobile_image_height | append: ',' | append: master_width %} {%- render 'responsive-image', image: image, sizes: width, class: 'image-with-text-slideshow--mobile', priority: priority -%} {% else %} {%- assign index = forloop.index | modulo: 2 | plus: 1 -%} {{ 'hero-apparel-' | append: index | placeholder_svg_tag: 'placeholder_svg_tag' }} {% endif %} </div> </div> {% endfor %} </div> <div class="image-with-text-slideshow__content carousel inner-carousel" data-dots="{{ dots }}" data-autoplay="{{ autoplay }}" data-fade="true"> {% for block in section.blocks %} <div class="image-with-text-slideshow__content-content carousel__slide {{ desktop_height }}" {{ block.shopify_attributes }}> {% if block.settings.heading %} <h3>{{ block.settings.heading | newline_to_br }}</h3> {% endif %} {% if block.settings.content %} <p>{{ block.settings.content | newline_to_br }}</p> {% endif %} {% if block.settings.button_text != blank %} <a class="text-button" href="{{ block.settings.button_link }}" role="button" title="{{ block.settings.button_text | escape }}">{{ block.settings.button_text }}</a> {% endif %} </div> {% endfor %} </div> </div> </div> </div>
This is the css code that i added
.image-with-text-slideshow--mobile {
display: block; }
@media only screen and (min-width: 768px) {
.image-with-text-slideshow--mobile {
display: none; } }
.image-with-text-slideshow--desktop {
display: none; }
@media only screen and (min-width: 768px) {
.image-with-text-slideshow--desktop {
display: block; } }
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025