Different home page banner image for desktop and mobile - North Theme

Store Design
1

Hi all,

Shopify newbie here. Is there a way to use a different image for the home page banner on desktop and mobile? Using the North Theme.

birdieandco.ca

pw:niegab

2

Hi @birdieandco
In this case you need edit the code in your theme, you can contact with theme supporter.
I know some video guide add separate image on mobile and desktop.
https://youtu.be/xBrZcbCHTcY
You can try to contact with him, maybe he can help you.

3

Hi @birdieandco ,

Are you referring to this section?

Screenshot.png
Screenshot.png1874Ă—581 172 KB

Please send me the code of hero.liquid file, I will help you add options for it

4

thank you!

{% if section.settings.bg_image %} {{ section.settings.bg_image.alt | escape }} {{ section.settings.bg_image.alt | escape }} {% else %} {{ 'lifestyle-1' | placeholder_svg_tag: 'thb-parallax-image placeholder_svg_tag' }} {% endif %}
{% for block in section.blocks %} {% if block.type == 'image' %} {% if block.settings.image %} {% assign small_width = block.settings.image.src.height | times: '320' | divided_by: block.settings.image.src.width %} {% assign master_width = block.settings.image.src.width | append: 'x' | append: block.settings.image.src.height %} {% assign width = '320x' | append: small_width | append: ',' | append: master_width %}
{%- render 'responsive-image', image: block.settings.image, sizes: width, retina: block.settings.retina -%}
{% else %}
{{ 'product-1' | placeholder_svg_tag }}
{% endif %} {% endif %} {% if block.type == 'title' %} {% if block.settings.title != blank %} <{{ block.settings.heading_size }} class="animation bottom-to-top" id="section-hero-heading-{{ block.id }}" {{ block.shopify_attributes }}>{{ block.settings.title }} {% if block.settings.color != blank %} {% style %} #section-hero-heading-{{ block.id }} { color: {{ block.settings.color }}; } {% endstyle %} {% endif %} {% endif %} {% endif %} {% if block.type == 'content' %} {% if block.settings.text != blank %}
{{ block.settings.text }}

{% if block.settings.color != blank %}
{% style %}
#section-hero-text-{{ block.id }},
#section-hero-text-{{ block.id }} a {
color: {{ block.settings.color }};
}
{% endstyle %}
{% endif %}

{% endif %} {% endif %} {% if block.type == 'button' %} {% if block.settings.button_text != blank %}
{% if block.settings.button_style != 'btn-text' %} {{ block.settings.button_text }} {% else %} {{ block.settings.button_text }}
{% render 'svg-icons' with 'thb-button-arrow' %} {% render 'svg-icons' with 'thb-button-arrow' %}
{% endif %} {% endif %} {% endif %} {% endfor %}

{% schema %}
{
“name”: “Image with text overlay”,
“settings”: [
{
“type”: “image_picker”,
“id”: “bg_image”,
“label”: “Image”
},
{
“type”: “checkbox”,
“id”: “parallax”,
“default”: true,
“label”: “Enable parallax”
},
{
“type”: “header”,
“content”: “Layout”
},
{
“type”: “select”,
“id”: “desktop_height”,
“label”: “Desktop height”,
“options”: [
{
“value”: “desktop-height-450”,
“label”: “Small”
},
{
“value”: “desktop-height-550”,
“label”: “Medium”
},
{
“value”: “desktop-height-650”,
“label”: “Large”
},
{
“value”: “desktop-height-full”,
“label”: “Full screen”
}
],
“default”: “desktop-height-550”
},
{
“type”: “select”,
“id”: “mobile_height”,
“label”: “Mobile height”,
“options”: [
{
“value”: “mobile-height-350”,
“label”: “Small”
},
{
“value”: “mobile-height-400”,
“label”: “Medium”
},
{
“value”: “mobile-height-500”,
“label”: “Large”
},
{
“value”: “mobile-height-full”,
“label”: “Full screen”
}
],
“default”: “mobile-height-400”
},
{
“type”: “select”,
“id”: “vertical_alignment”,
“label”: “Content position”,
“options”: [
{
“value”: “content-middle”,
“label”: “Middle”
},
{
“value”: “content-bottom”,
“label”: “Bottom”
}
],
“default”: “content-middle”
},
{
“type”: “select”,
“id”: “text_alignment”,
“label”: “Content alignment”,
“options”: [
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “left”,
“label”: “Left”
}
],
“default”: “center”
},
{
“type”: “header”,
“content”: “Colors”
},
{
“type”: “color”,
“id”: “overlay_color”,
“label”: “Overlay”,
“default”: “#000000”
},
{
“type”: “range”,
“id”: “overlay_opacity”,
“min”: 0,
“max”: 100,
“step”: 1,
“unit”: “%”,
“label”: “Overlay opacity”,
“default”: 0
},
{
“type”: “header”,
“content”: “Spacing”
},
{
“type”: “checkbox”,
“id”: “disable_top_spacing”,
“default”: true,
“label”: “Remove top spacing”
},
{
“type”: “checkbox”,
“id”: “disable_bottom_spacing”,
“default”: true,
“label”: “Remove bottom spacing”
}
],
“blocks”: [
{
“type”: “image”,
“name”: “Image”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “checkbox”,
“id”: “retina”,
“label”: “Enable retina”,
“default”: true,
“info”: “Image will be displayed at half the size, making it look crisp on retina screens.”
}
]
},
{
“type”: “title”,
“name”: “Heading”,
“settings”: [
{
“type”: “select”,
“id”: “heading_size”,
“label”: “Size”,
“options”: [
{
“value”: “h1”,
“label”: “Extra Large”
},
{
“value”: “h2”,
“label”: “Large”
},
{
“value”: “h3”,
“label”: “Medium”
},
{
“value”: “h4”,
“label”: “Small”
}
],
“default”: “h1”
},
{
“type”: “text”,
“id”: “title”,
“label”: “Text”,
“default”: “Heading”
},
{
“type”: “color”,
“id”: “color”,
“label”: “Color”,
“default”: “#fff”
}
]
},
{
“type”: “content”,
“name”: “Content”,
“settings”: [
{
“type”: “richtext”,
“id”: “text”,
“label”: “Text”,
“default”: “

Share information about your brand with your customers.

”
},
{
“type”: “color”,
“id”: “color”,
“label”: “Color”,
“default”: “#fff”
}
]
},
{
“type”: “button”,
“name”: “Button”,
“settings”: [
{
“id”: “button_text”,
“type”: “text”,
“label”: “Label”,
“default”: “Shop Now”,
“info”: “Leave the label blank to hide the button.”
},
{
“id”: “button_link”,
“type”: “url”,
“label”: “Link”,
“default”: “/collections/all”
},
{
“type”: “select”,
“id”: “button_style”,
“label”: “Style”,
“default”: “pill alt”,
“options”: [
{ “value”: “”, “label”: “Regular” },
{ “value”: “pill alt”, “label”: “Pill outline” },
{ “value”: “border-fill”, “label”: “Fill animation” },
{ “value”: “btn-text”, “label”: “Text with arrow” }
]
},
{
“type”: “select”,
“id”: “button_color”,
“label”: “Color”,
“default”: “white”,
“options”: [
{ “value”: “”, “label”: “Black” },
{ “value”: “white”, “label”: “White” }
]
}
]
}
],
“presets”: [
{
“name”: “Image with text overlay”,
“blocks”: [
{
“type”: “title”
},
{
“type”: “content”
},
{
“type”: “button”
}
]
}
]
}

{% endschema %}

5

Hi @birdieandco ,

Please change all code:


{% if section.settings.bg_image %}

{% else %}
{{ 'lifestyle-1' | placeholder_svg_tag: 'thb-parallax-image placeholder_svg_tag' }}
{% endif %}

{% if section.settings.bg_image_mobile %}

{% endif %}

{% for block in section.blocks %}
{% if block.type == 'image' %}
{% if block.settings.image %}
{% assign small_width = block.settings.image.src.height | times: '320' | divided_by: block.settings.image.src.width %}
{% assign master_width = block.settings.image.src.width | append: 'x' | append: block.settings.image.src.height %}
{% assign width = '320x' | append: small_width | append: ',' | append: master_width %}

{%- render 'responsive-image', image: block.settings.image, sizes: width, retina: block.settings.retina -%}

{% else %}

{{ 'product-1' | placeholder_svg_tag }}

{% endif %}
{% endif %}
{% if block.type == 'title' %}
{% if block.settings.title != blank %}
<{{ block.settings.heading_size }} class="animation bottom-to-top" id="section-hero-heading-{{ block.id }}" {{ block.shopify_attributes }}>{{ block.settings.title }}
{% if block.settings.color != blank %}
{% style %}
#section-hero-heading-{{ block.id }} {
color: {{ block.settings.color }};
}
{% endstyle %}
{% endif %}
{% endif %}
{% endif %}
{% if block.type == 'content' %}
{% if block.settings.text != blank %}

{{ block.settings.text }}

{% if block.settings.color != blank %}
{% style %}
#section-hero-text-{{ block.id }},
#section-hero-text-{{ block.id }} a {
color: {{ block.settings.color }};
}
{% endstyle %}
{% endif %}

{% endif %}
{% endif %}
{% if block.type == 'button' %}
{% if block.settings.button_text != blank %}

{% if block.settings.button_style != 'btn-text' %}
{{ block.settings.button_text }}
{% else %}
{{ block.settings.button_text }}

{% render 'svg-icons' with 'thb-button-arrow' %}
{% render 'svg-icons' with 'thb-button-arrow' %}

{% endif %}
{% endif %}
{% endif %}
{% endfor %}

{% schema %}
{
"name": "Image with text overlay",
"settings": [
{
"type": "image_picker",
"id": "bg_image",
"label": "Image"
},
{
"type": "image_picker",
"id": "bg_image_mobile",
"label": "Image mobile"
},
{
"type": "checkbox",
"id": "parallax",
"default": true,
"label": "Enable parallax"
},
{
"type": "header",
"content": "Layout"
},
{
"type": "select",
"id": "desktop_height",
"label": "Desktop height",
"options": [
{
"value": "desktop-height-450",
"label": "Small"
},
{
"value": "desktop-height-550",
"label": "Medium"
},
{
"value": "desktop-height-650",
"label": "Large"
},
{
"value": "desktop-height-full",
"label": "Full screen"
}
],
"default": "desktop-height-550"
},
{
"type": "select",
"id": "mobile_height",
"label": "Mobile height",
"options": [
{
"value": "mobile-height-350",
"label": "Small"
},
{
"value": "mobile-height-400",
"label": "Medium"
},
{
"value": "mobile-height-500",
"label": "Large"
},
{
"value": "mobile-height-full",
"label": "Full screen"
}
],
"default": "mobile-height-400"
},
{
"type": "select",
"id": "vertical_alignment",
"label": "Content position",
"options": [
{
"value": "content-middle",
"label": "Middle"
},
{
"value": "content-bottom",
"label": "Bottom"
}
],
"default": "content-middle"
},
{
"type": "select",
"id": "text_alignment",
"label": "Content alignment",
"options": [
{
"value": "center",
"label": "Center"
},
{
"value": "left",
"label": "Left"
}
],
"default": "center"
},
{
"type": "header",
"content": "Colors"
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay",
"default": "#000000"
},
{
"type": "range",
"id": "overlay_opacity",
"min": 0,
"max": 100,
"step": 1,
"unit": "%",
"label": "Overlay opacity",
"default": 0
},
{
"type": "header",
"content": "Spacing"
},
{
"type": "checkbox",
"id": "disable_top_spacing",
"default": true,
"label": "Remove top spacing"
},
{
"type": "checkbox",
"id": "disable_bottom_spacing",
"default": true,
"label": "Remove bottom spacing"
}
],
"blocks": [
{
"type": "image",
"name": "Image",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "checkbox",
"id": "retina",
"label": "Enable retina",
"default": true,
"info": "Image will be displayed at half the size, making it look crisp on retina screens."
}
]
},
{
"type": "title",
"name": "Heading",
"settings": [
{
"type": "select",
"id": "heading_size",
"label": "Size",
"options": [
{
"value": "h1",
"label": "Extra Large"
},
{
"value": "h2",
"label": "Large"
},
{
"value": "h3",
"label": "Medium"
},
{
"value": "h4",
"label": "Small"
}
],
"default": "h1"
},
{
"type": "text",
"id": "title",
"label": "Text",
"default": "Heading"
},
{
"type": "color",
"id": "color",
"label": "Color",
"default": "#fff"
}
]
},
{
"type": "content",
"name": "Content",
"settings": [
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "

Share information about *your brand* with your customers.

"
},
{
"type": "color",
"id": "color",
"label": "Color",
"default": "#fff"
}
]
},
{
"type": "button",
"name": "Button",
"settings": [
{
"id": "button_text",
"type": "text",
"label": "Label",
"default": "Shop Now",
"info": "Leave the label blank to hide the button."
},
{
"id": "button_link",
"type": "url",
"label": "Link",
"default": "/collections/all"
},
{
"type": "select",
"id": "button_style",
"label": "Style",
"default": "pill alt",
"options": [
{ "value": "", "label": "Regular" },
{ "value": "pill alt", "label": "Pill outline" },
{ "value": "border-fill", "label": "Fill animation" },
{ "value": "btn-text", "label": "Text with arrow" }
]
},
{
"type": "select",
"id": "button_color",
"label": "Color",
"default": "white",
"options": [
{ "value": "", "label": "Black" },
{ "value": "white", "label": "White" }
]
}
]
}
],
"presets": [
{
"name": "Image with text overlay",
"blocks": [
{
"type": "title"
},
{
"type": "content"
},
{
"type": "button"
}
]
}
]
}

{% endschema %}

I have added option for mobile, you just need to upload it, it will display fine

1 Like
6

Thank you so much!!! That worked perfectly, you’re the best!

1 Like