Shopify themes, liquid, logos, and UX
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!
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/
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.
can you please sent your store url
Hello @KetanKumar , how are you?
That tutorial link also works for Dawn theme?
Thank you
yes its work all theme
Hi,
I'm using the Dawn 2.0 theme but the section doesn't seem to be working. Please help.
Thank you.
try this
https://www.mojoin.com/show-shopify-banner-image/
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.
yes please share store url with code added
My url is www.letsglowshop.com
Is there a way to add buttons to the YX Mobile and Desktop banners?
yes please share code so in will update
also your store password protect
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 %}
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 %}
I just tried the code. It doesn't seem to be working. 😕
can you please sent your theme zip code so i will check and update
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 %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%}
{%- if current_page != 1 %} – Page {{ current_page }}{% endif -%}
{%- unless page_title contains shop.name %} – {{ 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>
thanks for this code
but i need full theme zip code
Sorry for the mix up. Here you go 🙂
Thank you!
Any solution?
Also need same solution, can you guide?
https://www.mojoin.com/show-shopify-banner-image/
Hi, the images are not showing up at all when I tried this. Can you help?
https://fullpetalalchemy.com/
thanks but i can't see that section can you show me!
Hi, attached is the screenshot. Can you tell me what I need to send to you to explain it?
yes please share both section code so i will update
<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 %}
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 %}
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024