Dawn Theme Separate Mobile Image for Homepage Banner

Store Design
1

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!

1 Like
2

@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/

1 Like
3

@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.

1 Like
4

@motiv

can you please sent your store url

5

Hello @KetanKumar , how are you?

That tutorial link also works for Dawn theme?

Thank you

1 Like
6

@King-Kang

yes its work all theme

1 Like
7

Hi,

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

Thank you.

1 Like
8

@LGMM

try this

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

9

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.

1 Like
10

@LGMM

yes please share store url with code added

11

My url is www.letsglowshop.com

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

1 Like
12

@LGMM

yes please share code so in will update

also your store password protect

1 Like
13

Hello Katan,

Site password is: siento

Section > YX-desktop-banner.liquid

{% for block in section.blocks limit: 1 %}> > {% endfor %}>

{% 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

{% for block in section.blocks limit: 1 %}> > {% endfor %}>

{% 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 %}

1 Like
14

@LGMM

try this code first


{% for block in section.blocks limit: 1 %}

Shop now
{% endfor %}

{% 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 %}
15

I just tried the code. It doesn’t seem to be working. :confused:

1 Like
16

@LGMM

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

17

Sure this is my theme.liquid

{%- if settings.favicon != blank -%}> > {%- endif -%}> > {%- unless settings.type_header_font.system? and settings.type_body_font.system? -%}> > {%- endunless -%}> > > > {% if page_description %}> > {% endif %}> > {% render ‘meta-tags’ %}> > > {{ 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? -%}> > {%- endunless -%}> {%- unless settings.type_header_font.system? -%}> > {%- endunless -%}> > {%- if settings.predictive_search_enabled -%}> > {%- endif -%}> > > {% render ‘judgeme_core’ %}> > > > > {{ “accessibility.skip_to_text” | t }}> > > {% section ‘announcement-bar’ %}> {% section ‘header’ %}> > > {% section ‘footer’ %}> > > - {{ ‘accessibility.refresh_page’ | t }}>
{%- if settings.predictive_search_enabled -%}> > {%- endif -%}> >

1 Like
18

@LGMM

thanks for this code

but i need full theme zip code

19

Sorry for the mix up. Here you go :slightly_smiling_face:

Thank you!

20

Any solution?