Dawn Theme Separate Mobile Image for Homepage Banner

motiv
Shopify Partner
17 0 7

Hi,

I wanted to see if anyone has already added a homepage banner image option specifically for mobile. This way I can upload an image for desktop and a different image for mobile.

Thanks!

Replies 28 (28)

KetanKumar
Shopify Partner
36839 3635 11972

@motiv 

yes its already allow this please change the image banner section 

if no option you have to try this way

https://www.mojoin.com/show-shopify-banner-image/

 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
motiv
Shopify Partner
17 0 7

@KetanKumar 

I don't understand what you mean by change the image banner section. I am using the "Image banner" section.

Also, the link you provided doesn't work.

KetanKumar
Shopify Partner
36839 3635 11972

@motiv 

can you please sent your store url 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
King-Kang
Trailblazer
148 8 76

Hello @KetanKumar , how are you?

That tutorial link also works for Dawn theme?

Thank you

KetanKumar
Shopify Partner
36839 3635 11972

@King-Kang 

yes its work all theme

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LGMM
Tourist
7 0 6

Hi,

I'm using the Dawn 2.0 theme but the section doesn't seem to be working. Please help. 

Thank you.

KetanKumar
Shopify Partner
36839 3635 11972

@LGMM 

try this 

https://www.mojoin.com/show-shopify-banner-image/

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LGMM
Tourist
7 0 6

Hello. 

Thanks for the reply. I actually followed the steps in the website yesterday. The problem is the section appears on my Customise menu but the pictures don’t appear on the homepage. It only shows a white bar. 

KetanKumar
Shopify Partner
36839 3635 11972

@LGMM 

yes please share store url with code added 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LGMM
Tourist
7 0 6

My url is www.letsglowshop.com

Is there a way to add buttons to the YX Mobile and Desktop banners?

KetanKumar
Shopify Partner
36839 3635 11972

@LGMM 

yes please share code so in will update

also your store password protect 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LGMM
Tourist
7 0 6

Hello Katan,

Site password is: siento

Section > YX-desktop-banner.liquid

<div class="page-width yx-desktop-banner-container yx-mobile-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<img class="img-responsive lazyload" data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX Desktop Banner",
"class": "yx-desktop-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Desktop Banner Image",
"settings": [
{
"label": "Desktop Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
}
]
}
],
"presets": [
{
"name": "YX Desktop Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

Section > YX-mobile-banner.liquid

<div class="page-width yx-mobile-banner-container yx-desktop-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<img class="img-responsive lazyload" data-src="{{ block.settings.yx_image_picker | img_url: '750x' }}" />
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX Mobile Banner",
"class": "yx-mobile-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Mobile Banner Image",
"settings": [
{
"label": "Mobile Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
}
]
}
],
"presets": [
{
"name": "YX Mobile Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

 

KetanKumar
Shopify Partner
36839 3635 11972

@LGMM 

try this code first

<div class="page-width yx-desktop-banner-container yx-mobile-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<img class="img-responsive lazyload" data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
<a href="">Shop now</a>
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX Desktop Banner",
"class": "yx-desktop-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Desktop Banner Image",
"settings": [
{
"label": "Desktop Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
}
]
}
],
"presets": [
{
"name": "YX Desktop Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LGMM
Tourist
7 0 6

I just tried the code. It doesn't seem to be working. 😕

KetanKumar
Shopify Partner
36839 3635 11972

@LGMM 

can you please sent your theme zip code so i will check and update

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LGMM
Tourist
7 0 6

Sure this is my theme.liquid

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="">
<link rel="canonical" href="{{ canonical_url }}">
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>

{%- if settings.favicon != blank -%}
<link rel="icon" type="image/png" href="{{ settings.favicon | img_url: '32x32' }}">
{%- endif -%}

{%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
{%- endunless -%}

<title>
{{ page_title }}
{%- if current_tags %} &ndash; tagged "{{ current_tags | join: ', ' }}"{% endif -%}
{%- if current_page != 1 %} &ndash; Page {{ current_page }}{% endif -%}
{%- unless page_title contains shop.name %} &ndash; {{ shop.name }}{% endunless -%}
</title>

{% if page_description %}
<meta name="description" content="{{ page_description | escape }}">
{% endif %}

{% render 'meta-tags' %}

<script src="{{ 'global.js' | asset_url }}" defer="defer"></script>
{{ content_for_header }}

{%- liquid
assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic'
%}

{% style %}
{{ settings.type_body_font | font_face: font_display: 'swap' }}
{{ body_font_bold | font_face: font_display: 'swap' }}
{{ body_font_italic | font_face: font_display: 'swap' }}
{{ body_font_bold_italic | font_face: font_display: 'swap' }}
{{ settings.type_header_font | font_face: font_display: 'swap' }}

:root {
--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
--font-body-style: {{ settings.type_body_font.style }};
--font-body-weight: {{ settings.type_body_font.weight }};

--font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
--font-heading-style: {{ settings.type_header_font.style }};
--font-heading-weight: {{ settings.type_header_font.weight }};

--color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
--color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
--color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};
--color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
--color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
--color-base-accent-1: {{ settings.colors_accent_1.red }}, {{ settings.colors_accent_1.green }}, {{ settings.colors_accent_1.blue }};
--color-base-accent-2: {{ settings.colors_accent_2.red }}, {{ settings.colors_accent_2.green }}, {{ settings.colors_accent_2.blue }};
--payment-terms-background-color: {{ settings.colors_background_1 }};

--gradient-base-background-1: {% if settings.gradient_background_1 != blank %}{{ settings.gradient_background_1 }}{% else %}{{ settings.colors_background_1 }}{% endif %};
--gradient-base-background-2: {% if settings.gradient_background_2 != blank %}{{ settings.gradient_background_2 }}{% else %}{{ settings.colors_background_2 }}{% endif %};
--gradient-base-accent-1: {% if settings.gradient_accent_1 != blank %}{{ settings.gradient_accent_1 }}{% else %}{{ settings.colors_accent_1 }}{% endif %};
--gradient-base-accent-2: {% if settings.gradient_accent_2 != blank %}{{ settings.gradient_accent_2 }}{% else %}{{ settings.colors_accent_2 }}{% endif %};

--page-width: {{ settings.page_width | divided_by: 10 }}rem;
--page-width-margin: {% if settings.page_width == '1600' %}2{% else %}0{% endif %}rem;
}

*,
*::before,
*::after {
box-sizing: inherit;
}

html {
box-sizing: border-box;
font-size: 62.5%;
height: 100%;
}

body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 100%;
min-height: 100%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.06rem;
line-height: 1.8;
font-family: var(--font-body-family);
font-style: var(--font-body-style);
font-weight: var(--font-body-weight);
}

@media screen and (min-width: 750px) {
body {
font-size: 1.6rem;
}
}
{% endstyle %}

{{ 'base.css' | asset_url | stylesheet_tag }}

{%- unless settings.type_body_font.system? -%}
<link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
{%- endunless -%}
{%- unless settings.type_header_font.system? -%}
<link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
{%- endunless -%}

{%- if settings.predictive_search_enabled -%}
<link rel="stylesheet" href="{{ 'component-predictive-search.css' | asset_url }}" media="print" onload="this.media='all'">
{%- endif -%}

<script>document.documentElement.className = document.documentElement.className.replace('no-js', 'js');</script>
{% render 'judgeme_core' %}
</head>

<body class="gradient">
<a class="skip-to-content-link button visually-hidden" href="#MainContent">
{{ "accessibility.skip_to_text" | t }}
</a>

{% section 'announcement-bar' %}
{% section 'header' %}
<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
{{ content_for_layout }}
</main>

{% section 'footer' %}

<ul hidden>
<li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>
</ul>

<script>
window.routes = {
cart_add_url: '{{ routes.cart_add_url }}',
cart_change_url: '{{ routes.cart_change_url }}',
cart_update_url: '{{ routes.cart_update_url }}',
predictive_search_url: '{{ routes.predictive_search_url }}'
};

window.cartStrings = {
error: `{{ 'sections.cart.cart_error' | t }}`,
quantityError: `{{ 'sections.cart.cart_quantity_error_html' | t }}`
}

window.variantStrings = {
addToCart: `{{ 'products.product.add_to_cart' | t }}`,
soldOut: `{{ 'products.product.sold_out' | t }}`,
unavailable: `{{ 'products.product.unavailable' | t }}`,
}

window.accessibilityStrings = {
shareSuccess: `{{ 'general.share.success_message' | t }}`,
}
</script>

{%- if settings.predictive_search_enabled -%}
<script src="{{ 'predictive-search.js' | asset_url }}" defer="defer"></script>
{%- endif -%}
</body>
</html>

KetanKumar
Shopify Partner
36839 3635 11972

@LGMM 

thanks for this code 

but i need full theme zip code 

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
LGMM
Tourist
7 0 6

Sorry for the mix up. Here you go 🙂 

Thank you!

Aemaay
Tourist
8 0 6

Any solution? 

Aemaay
Tourist
8 0 6

Also need same solution, can you guide?

KetanKumar
Shopify Partner
36839 3635 11972

@Aemaay 

https://www.mojoin.com/show-shopify-banner-image/

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
OmGirlMarketing
Shopify Partner
5 0 4

Hi, the images are not showing up at all when I tried this. Can you help?

https://fullpetalalchemy.com/

KetanKumar
Shopify Partner
36839 3635 11972

@OmGirlMarketing 

thanks but i can't see that section can you show me!

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
OmGirlMarketing
Shopify Partner
5 0 4

Hi, attached is the screenshot. Can you tell me what I need to send to you to explain it?Screen Shot 2021-12-07 at 12.40.15 AM.png

KetanKumar
Shopify Partner
36839 3635 11972

@OmGirlMarketing 

yes please share both section code so i will update

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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
OmGirlMarketing
Shopify Partner
5 0 4

<div class="page-width yx-mobile-banner-container yx-desktop-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<img class="img-responsive lazyload" data-src="{{ block.settings.yx_image_picker | img_url: '750x' }}" />
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX Mobile Banner",
"class": "yx-mobile-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Mobile Banner Image",
"settings": [
{
"label": "Mobile Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
}
]
}
],
"presets": [
{
"name": "YX Mobile Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

 

 

 

 

 

AND

 

 

 

 

<div class="page-width yx-desktop-banner-container yx-mobile-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<img class="img-responsive lazyload" data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX Desktop Banner",
"class": "yx-desktop-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Desktop Banner Image",
"settings": [
{
"label": "Desktop Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
}
]
}
],
"presets": [
{
"name": "YX Desktop Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

 

 

 

KetanKumar
Shopify Partner
36839 3635 11972

@OmGirlMarketing 

Thanks for code can you please update

Desktop

<div class="page-width yx-mobile-banner-container yx-desktop-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<img class="img-responsive lazyload"  src="{{ block.settings.yx_image_picker | img_url: '750x' }}"  data-src="{{ block.settings.yx_image_picker | img_url: '750x' }}" />
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX Mobile Banner",
"class": "yx-mobile-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Mobile Banner Image",
"settings": [
{
"label": "Mobile Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
}
]
}
],
"presets": [
{
"name": "YX Mobile Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

 

Mobile

<div class="page-width yx-desktop-banner-container yx-mobile-hidden">
<div class="container-full">
{% for block in section.blocks limit: 1 %}
<img class="img-responsive lazyload"  src="{{ block.settings.yx_image_picker | img_url: '2000x' }}"  data-src="{{ block.settings.yx_image_picker | img_url: '2000x' }}" />
{% endfor %}
</div>
</div>
{% schema %}
{
"name": "YX Desktop Banner",
"class": "yx-desktop-banner-section",
"max_blocks": 1,
"blocks": [
{
"type": "image_picker",
"name": "Desktop Banner Image",
"settings": [
{
"label": "Desktop Banner Image",
"id": "yx_image_picker",
"type": "image_picker"
}
]
}
],
"presets": [
{
"name": "YX Desktop Banner",
"category": "Home",
"blocks":[{"type" : "image_picker"}]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}

 
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 Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
OmGirlMarketing
Shopify Partner
5 0 4

Hello, it seems that both banners are displaying now. Thanks!

 

https://fullpetalalchemy.com/