Shopify themes, liquid, logos, and UX
Hello,
I am wondering what code I need to enter (and where!) to allow for different images on mobile web than desktop web view?
I currently am using a custom theme - does this determine where I need to be looking to add the code?
Thanks in advance!
Nooreen
Solved! Go to the solution
This is an accepted solution.
It's completely understandable you're lost. At first the way that shopify does things doesnt make a whole lot of sense. Your template pages are they key parts of your site. So when you want to edit the homepage, you want to edit index.liquid. Now, if you have not developed the theme yourself, probably all you're going to even see inside of index.liquid is "{{ content_for_index }}" <--- That's a liquid object. Basically that renders everything that you've specified inside of your Customize section, your visual editor.
Take the section you posted, "banner.liquid" -- That's probably one of your sections you can edit when you open your visual editor. All of that:
{{ section.settings.link }}
stuff is referring to all the options in your customize editor. All that stuff underneath it inbetween the {% schema %} tags are where you define what kinds of things you want to have in your section. I have not worked with sections much, but I'm fairly certain I can walk you through so you can make this change. Duplicate your theme just to be sure you have a copy in case anything goes wrong.
First go into your {% schema %} tags and look for this portion:
{ "type": "image_picker", "id": "image", "label": "Banner Image" },
Copy that and paste it below it and change the ID to "mobile_image":
{ "type": "image_picker", "id": "image", "label": "Banner Image" }, { "type": "image_picker", "id": "mobile_image", "label": "Banner Image" },
Be sure to keep the comma after the closing curly bracket.
Then you're going to want to go into the html and duplicate the image portion kind of the same way and we're going to set it up so image 2 displays. You're also going to give your <img> tags a class name of "hidden_desktop" and "hidden_mobile" -- I separated the duplicate part with a comment:
<style> .hidden_desktop{ display:block; } .hidden_mobile { display: none; } @media (min-width:992px){ .hidden_desktop{ display:none; } .hidden_mobile { display: block; } } </style> <div class="velaBanner" style="{% if section.settings.margin_block !=blank %}margin:{{section.settings.margin_block}}; {% endif %} {% if section.settings.padding_block !=blank %}padding:{{section.settings.padding_block}}; {% endif %}"> <div class="container{% if section.settings.full_with %}-full{% endif %}"> <div class="{{ section.settings.effect }}"> {% if section.settings.link != blank %}<a href="{{ section.settings.link }}" title="{{ block.settings.image.alt | default: shop.name }}">{% endif %} {% if section.settings.image != blank %} <img class="img-responsive hidden_mobile" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.image | img_url: '2000x' }}" /> {% else %} <img class="img-responsive hidden_mobile" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" /> {% endif %} {% comment %}Above will be the desktop image and below will be the mobile image{% endcomment %} {% if section.settings.mobile_image != blank %} <img class="img-responsive hidden_desktop" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.mobile_image | img_url: '992x' }}" /> {% else %} <img class="img-responsive hidden_desktop" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" /> {% endif %} {% if section.settings.link != blank %}</a>{% endif %} </div> </div> </div>
Now you should be able to go into your customize section and find the portion for mobile image and upload an image there. I think this will work, like I said I have not worked in sections a whole lot but the logic seems there for me. I didn't change the other sections like image_size and whatnot, but this shouldn't matter unless you don't have an image uploaded there. Like I said, be sure to duplicate your theme and give this a shot. Let me know how it turns out.
Your question is a little vague. You'll need to have both of the images coded into wherever you want to add them, give them class names, and then use media queries to hide them and show them based on the screen width. For instance:
<style> .mobile-image{ display: block; } desktop-image{ display: none; } @media (min-width:992px){ .mobile-image{ display: none; } desktop-image{ display: block; } } </style> <div class="image-container"> <div class="mobile-image"> <img src="path-to-your-mobile-image.jpg"> </div> <div class="desktop-image"> <img src="path-to-your-desktop-image.jpg"> </div> </div>
This is a mobile first approach, mobile styles will load before the media queries that are looking at screen widths above 992 pixels. If it's less than 992px, mobile is displayed and desktop is hidden, if greater desktop is displayed and mobile is hidden.
As for where you add the code, that depends on where you want it to show up. Home page, collection page, blog page, a page, product page, etc.
Thank you very much for your response - I am understanding the basic concept of this but just figuring out where to place code.
Would that first bit (within the <style> </style> section) be entered into the theme.liquid file? In the theme I am using, the images that I'm trying to apply this too are called 'banners' and there is also two 'banner-liquid' files (one within Sections, and one within Snippets), so I'm unsure if it should go within one of those.
I have a feeling I need to add in the Sections banner-liquid file, is this right? The code for this currently is:
<div class="velaBanner" style="{% if section.settings.margin_block !=blank %}margin:{{section.settings.margin_block}}; {% endif %} {% if section.settings.padding_block !=blank %}padding:{{section.settings.padding_block}}; {% endif %}"> <div class="container{% if section.settings.full_with %}-full{% endif %}"> <div class="{{ section.settings.effect }}"> {% if section.settings.link != blank %}<a href="{{ section.settings.link }}" title="{{ block.settings.image.alt | default: shop.name }}">{% endif %} {% if section.settings.image != blank %} <img class="img-responsive" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.image | img_url: '2000x' }}" /> {% else %} <img class="img-responsive" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" /> {% endif %} {% if section.settings.link != blank %}</a>{% endif %} </div> </div> </div> {% schema %} { "name": "Vela Banner", "class": "velaFramework", "settings": [ { "type": "header", "content": "Design Block" }, { "type": "checkbox", "id": "full_with", "label": "Enabel Full Width?" }, { "type": "text", "id": "margin_block", "label": "Margin", "placeholder": "0px 0px" }, { "type": "text", "id": "padding_block", "label": "Padding", "placeholder": "0px 0px" }, { "type": "header", "content": "General Settings" }, { "type": "text", "id": "image_size", "label": "Image Size", "info": "Image Size is required." }, { "type": "text", "id": "link", "label": "Image Link" }, { "type": "image_picker", "id": "image", "label": "Banner Image" }, { "type": "select", "id": "effect", "label": "Effect", "default": "effectOne", "options": [ { "value": "effectOne", "label": "Effect one" }, { "value": "effectTwo", "label": "Effect two" } ] } ], "presets": [ { "name": "Vela Banner", "category": "4. Vela Image" } ] } {% endschema %}
And then the other bit you mentioned (starting with <div class="image container">) - should that be entered in the locations where I want the specific images to be placed? If so, I'm struggling to find the 'homepage' within the 'Edit Code' section in my code where the 'banners' are currently.... is it normally in the 'templates', 'sections' .?
Appreciate any further help!
This is an accepted solution.
It's completely understandable you're lost. At first the way that shopify does things doesnt make a whole lot of sense. Your template pages are they key parts of your site. So when you want to edit the homepage, you want to edit index.liquid. Now, if you have not developed the theme yourself, probably all you're going to even see inside of index.liquid is "{{ content_for_index }}" <--- That's a liquid object. Basically that renders everything that you've specified inside of your Customize section, your visual editor.
Take the section you posted, "banner.liquid" -- That's probably one of your sections you can edit when you open your visual editor. All of that:
{{ section.settings.link }}
stuff is referring to all the options in your customize editor. All that stuff underneath it inbetween the {% schema %} tags are where you define what kinds of things you want to have in your section. I have not worked with sections much, but I'm fairly certain I can walk you through so you can make this change. Duplicate your theme just to be sure you have a copy in case anything goes wrong.
First go into your {% schema %} tags and look for this portion:
{ "type": "image_picker", "id": "image", "label": "Banner Image" },
Copy that and paste it below it and change the ID to "mobile_image":
{ "type": "image_picker", "id": "image", "label": "Banner Image" }, { "type": "image_picker", "id": "mobile_image", "label": "Banner Image" },
Be sure to keep the comma after the closing curly bracket.
Then you're going to want to go into the html and duplicate the image portion kind of the same way and we're going to set it up so image 2 displays. You're also going to give your <img> tags a class name of "hidden_desktop" and "hidden_mobile" -- I separated the duplicate part with a comment:
<style> .hidden_desktop{ display:block; } .hidden_mobile { display: none; } @media (min-width:992px){ .hidden_desktop{ display:none; } .hidden_mobile { display: block; } } </style> <div class="velaBanner" style="{% if section.settings.margin_block !=blank %}margin:{{section.settings.margin_block}}; {% endif %} {% if section.settings.padding_block !=blank %}padding:{{section.settings.padding_block}}; {% endif %}"> <div class="container{% if section.settings.full_with %}-full{% endif %}"> <div class="{{ section.settings.effect }}"> {% if section.settings.link != blank %}<a href="{{ section.settings.link }}" title="{{ block.settings.image.alt | default: shop.name }}">{% endif %} {% if section.settings.image != blank %} <img class="img-responsive hidden_mobile" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.image | img_url: '2000x' }}" /> {% else %} <img class="img-responsive hidden_mobile" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" /> {% endif %} {% comment %}Above will be the desktop image and below will be the mobile image{% endcomment %} {% if section.settings.mobile_image != blank %} <img class="img-responsive hidden_desktop" alt="{{ section.settings.image.alt | default: shop.name }}" src="{{ section.settings.mobile_image | img_url: '992x' }}" /> {% else %} <img class="img-responsive hidden_desktop" alt="{{ shop.name }}" src="//placehold.it/{{ section.settings.image_size }}" /> {% endif %} {% if section.settings.link != blank %}</a>{% endif %} </div> </div> </div>
Now you should be able to go into your customize section and find the portion for mobile image and upload an image there. I think this will work, like I said I have not worked in sections a whole lot but the logic seems there for me. I didn't change the other sections like image_size and whatnot, but this shouldn't matter unless you don't have an image uploaded there. Like I said, be sure to duplicate your theme and give this a shot. Let me know how it turns out.
Oh my gosh, Ninthony - this has worked even better than I hoped! I thought I'd have to manually add the alternative images in the code each time, but the way you've done it is I can do it via the Customize visual editor - which makes it so simple. Also your explanations have helped me to make sense of it and learn. THANK YOU for your kind help and effort in answering my question, it's really appreciated.
At the risk of being 'greedy', would I be able to ask how you would suggest to add a similar configurable item to the 'Customize visual editor' where I can add text over an image? Right now I've basically written my text into the images before uploading, which I totally know is not the right way to handle it! If it's complicated, no worries, you've helped me already a lot.
It's not a problem, Im glad it helped. The logic for words over text depends on the element's "position" as defined in CSS. Take for instance:
https://codepen.io/ninthony/pen/arrrEz
You have a container element, an image, and some content. You set the image-content-container's position to relative and display: inline-block, and the content's position to absolute. Since the content is a CHILD of the container, when content's position is set to absolute it's position is RELATIVE to it's container. So you see in the css the styles "top: 20px", "right: 10px" -- That means 20px from the top of the container, and 10px from the right. Also, the container is set to inline-block. If you change this to block you can see the difference. Block level elements span the entire width of their screen (or their container, if they are inside one smaller than the screen), where as inline-block will match their content.
You can apply similar logic to what we did earlier to your {% schema %} by adding another text field with a different id like "banner-content" and changing it's type to text instead of image picker. Then do something like:
{% if section.settings.banner-content != blank %} <div class="banner-content">{{ section.settings.banner-content }}</div> {% endif %}
Give the banner-content similar style and it's container similar styles to the codepen. Try making a couple examples in codepen yourself with the relative and absolute positioning to get a hang on how you do it. If you have any questions you can send me a direct message on here, but you'll have to enable it in your profile.
hello i am trying to do the same thing on the Debut Theme I cant understand where to put what code can you help me?
@Ninthony I am trying to add just a mobile or desktop image that would link to a page, I do not need text overlay or slides.
The newest version of Debut uses lazyload to load the image,
{%- if section.settings.image != blank -%}
<img class="hero-fixed-width__image lazyload lazypreload"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-sizes="auto"
style="{%- if slide_width <= max_width -%}
{%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
min-width: {{ min_width }}%;
{%- endif -%}
object-position: {{ section.settings.alignment }};"
alt="{{ section.settings.image.alt | escape }}">
{%- else -%}
<span>
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</span>
{%- endif -%}
<noscript>
<div class="hero-fixed-width__image"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
</noscript>
</div>
{%- else -%}
<div class="hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
id="Hero-{{ section.id }}"
data-layout="{{ section.settings.hero_layout }}"
{%- if section.settings.image -%}
{% unless section.settings.image.alt == blank %}
role="img"
aria-label="{{ section.settings.image.alt | escape }}"
data-alt="{{ section.settings.image.alt | escape }}"
{% endunless %}
data-bg="{{ section.settings.image | img_url: '300x300' }}"
data-bgset="{% include 'bgset', image: section.settings.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-position: {{ section.settings.alignment }};"
data-image-loading-animation
{%- endif -%}>
I tried using code from a previous reply:
<style>
.hidden_desktop{
display:block;
}
.hidden_mobile {
display: none;
}
@media (min-width:992px){
.hidden_desktop{
display:none;
}
.hidden_mobile {
display: block;
}
}
</style>
<div class=" hero__slide slide--{{ block.id }}{% if block.settings.image == blank %} slide--placeholder{% endif %}"
data-hero-slide
{{ block.shopify_attributes }}>
{%- if block.settings.image == blank -%}
<div class="placeholder-background">
{%- capture current -%}{% cycle 1, 2 %}{%- endcapture -%}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- else -%}
<noscript>
{%- if forloop.first == true -%}
<div class="hero__image-no-js"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div>
{%- endif -%}
</noscript>
{%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign mobile_img_url = block.settings.mobile_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="hero__image hero__image--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %} hidden-mobile"
{%- if forloop.first == true -%}
src="{{ block.settings.image | img_url: '300x' }}"
{%- endif -%}
data-src="{{ img_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
data-hero-image
alt="{{ block.settings.image.alt | escape }}"
style="object-position: {{ block.settings.image_position }}">
<img class="hero__image hero__image--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %} hidden-desktop"
{%- if forloop.first == true -%}
src="{{ section.settings.mobile_image | img_url: '300x' }}"
{%- endif -%}
data-src="{{ mobile_img_url }}"
data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]"
data-aspectratio="{{ block.settings.image.aspect_ratio }}"
data-sizes="auto"
data-parent-fit="cover"
data-hero-image
alt="{{ block.settings.image.alt | escape }}"
style="object-position: {{ block.settings.image_position }}">
{%- endif -%}
{% schema %}
{
"name": "Desktop Mobile Banner",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "image_picker",
"label": "Desktop Image",
"id": "desktop_image"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "image_picker",
"label": "Mobile Image",
"id": "mobile_image"
},
{
"type": "text",
"label": "Banner Link",
"id": "banner_link"
}
],
"presets": [
{
"name": "Desktop Mobile Banner",
"category":"Image",
"settings": {
}
}
]
}
{% endschema %}
{% javascript %}
{% endjavascript %}
but the images dont show up......
I tried
<style>
.banner-container img{
width: 100%;
}
.hidden-mobile {
display: none;
}
.hidden-desktop {
display: block;
}
@media (min-width: 767px){
.hidden-mobile {
display: block;
}
.hidden-desktop {
display: none;
}
}
</style>
{% if section.settings.desktop_image != blank and section.settings.mobile_image != blank %}
<div class="banner-container">
<a href="{{ section.settings.banner_link }}">
<img class="hidden-mobile" src="{{ section.settings.desktop_image | img_url: "master" }}">
<img class="hidden-desktop" src="{{ section.settings.mobile_image | img_url: "master" }}">
</a>
</div>
{% endif %}
{% schema %}
{
"name": "Desktop Mobile Banner",
"class": "desktop-mobile-banner",
"tag": "section",
"settings": [
{
"type": "header",
"content": "Desktop Settings"
},
{
"type": "image_picker",
"label": "Desktop Image",
"id": "desktop_image"
},
{
"type": "header",
"content": "Mobile Settings"
},
{
"type": "image_picker",
"label": "Mobile Image",
"id": "mobile_image"
},
{
"type": "text",
"label": "Banner Link",
"id": "banner_link"
}
],
"presets": [
{
"name": "Desktop Mobile Banner",
"category":"Image",
"settings": {
}
}
]
}
{% endschema %}
{% javascript %}
{% endjavascript %}
Which doesnt use lazy load and for some reason desktop image doesnt show up and mobile shows up for both.
In my case I think my best option is to add an additional section that is very simple, but can't seem to figure it out. Any ideas?
How do I inbox you? Is it via here?
Can you explain it here please dont know how to inbox you.
Thank you very much, i have a parallax theme by the way.
It will be done no problem
can you give me the code of the section you want to customize in parallax theme
i have few knowledge on coding. But do you mean this?
<section class="parallax-banner parallax-slide slide parallax_effect--{{ section.settings.parallax_effect }}" id="slide-{{ section.id }}">
<div class="lazyload bcg {% if section.settings.image == nil %}bcg-placeholder{% endif %}"
{% if section.settings.parallax_effect %}
{% if section.settings.image != nil %}
data-bgset=" {{ section.settings.image | img_url: '2048x' }} 2048w,
{{ section.settings.image | img_url: '1600x' }} 1600w,
{{ section.settings.image | img_url: '1200x' }} 1200w,
{{ section.settings.image | img_url: '1000x' }} 1000w,
{{ section.settings.image | img_url: '800x' }} 800w,
{{ section.settings.image | img_url: '600x' }} 600w,
{{ section.settings.image | img_url: '400x' }} 400w"
data-sizes="100vw"
{% else %}
style="background-image:url({{ 'placeholder.svg' | asset_url }})"
{% endif %}
data-bottom-top="background-position: 50% 10vh;"
data-top-bottom="background-position: 50% -10vh;"
{% endif %}
>
<div class="hsContainer">
<img alt="{{ section.settings.image.alt }}"
{% if section.settings.image != nil %}
src="{{ section.settings.image | img_url: '100x' }}"
data-src="{{ section.settings.image | img_url: '2048x' }}"
class="lazyload lazyload--fade-in hsContainer__image"
sizes="100vw"
srcset=" {{ section.settings.image | img_url: '2048x' }} 2048w,
{{ section.settings.image | img_url: '1600x' }} 1600w,
{{ section.settings.image | img_url: '1200x' }} 1200w,
{{ section.settings.image | img_url: '1000x' }} 1000w,
{{ section.settings.image | img_url: '800x' }} 800w,
{{ section.settings.image | img_url: '600x' }} 600w,
{{ section.settings.image | img_url: '400x' }} 400w"
{% else %}
src="{{ 'placeholder.svg' | asset_url }}"
class="hsContainer__image"
{% endif %}
/>
<div class="hsContent">
{% if section.settings.link != blank and section.settings.button_label == blank %}
<a href="{{ section.settings.link }}" class="full-link">
{{ section.settings.link }}
</a>
{% endif %}
<div class="container">
<div class="columns {% if section.settings.text_position == 'left' %} eight offset-by-one {% elsif section.settings.text_position == 'right' %} eight offset-by-eight {% else %} twelve offset-by-two {% endif %} align_{{ section.settings.text_alignment }}">
<div class="{{ section.settings.headline_animation }}">
{% if section.settings.title != blank %}
<h1 class="headline">
{{ section.settings.title | escape }}
</h1>
{% endif %}
{% if section.settings.subtitle != blank %}
<div class="subtitle">
{{ section.settings.subtitle }}
</div>
{% endif %}
{% if section.settings.button_label != blank %}
<a {% if section.settings.link != blank %}href="{{ section.settings.link }}"{% endif %} class="action_button">
{{ section.settings.button_label | escape }}
</a>
{% endif %}
</div>
</div>
</div>
{% if section.settings.homepage_arrow %}
<a href="#slide-{{ section.id }}-content" class="scroll-arrow scroll-animate_down">
<span class="icon-arrow-down"></span>
</a>
{% endif %}
</div>
</div>
</div>
</section>
<a name="slide-{{ section.id }}-content" id="slide-{{ section.id }}-content"></a>
<style>
{% if section.settings.parallax_effect %}
#slide-{{ section.id }} .hsContainer {
height: {{ section.settings.parallax_image_height }}px;
}
{% endif %}
@media (max-width: 767px) {
{% if settings.slideshow_images_crop %}
#slide-{{ section.id }} .hsContainer {
height: {{ section.settings.parallax_image_height | divided_by: 2 }}px;
}
{% else %}
#slide-{{ section.id }} .hsContainer {
height: auto;
}
{% endif %}
}
</style>
{% schema %}
{
"name": "Image with text overlay",
"class": "image-with-text-overlay-section under-menu",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1600 x 1000px recommended"
},
{
"type": "select",
"id": "headline_animation",
"label": "Heading text animation",
"options": [
{
"value": "",
"label": "None"
},
{
"value": "animate_in",
"label": "Fade In"
},
{
"value": "animate_up",
"label": "Fade Up"
},
{
"value": "animate_down",
"label": "Fade Down"
}
],
"default": "animate_down"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Your headline here"
},
{
"type": "richtext",
"id": "subtitle",
"label": "Subheading",
"default": "<p>This is a short subheading for your banner image</p>"
},
{
"type": "select",
"id": "text_position",
"label": "Text position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "text",
"id": "button_label",
"label": "Button label"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "checkbox",
"id": "homepage_arrow",
"label": "Show scroll down arrow",
"default": true
},
{
"type": "header",
"content": "Parallax"
},
{
"type": "checkbox",
"id": "parallax_effect",
"label": "Enable parallax scrolling",
"default": true
},
{
"type": "range",
"id": "parallax_image_height",
"label": "Parallax section height",
"min": 300,
"max": 1000,
"step": 20,
"default": 600,
"unit": "px"
}
],
"presets": [{
"name": "Image with text overlay",
"category": "Image",
"settings": {
}
}]
}
{% endschema %}
create an new section .... named custom_image.liquid than clear everything and paste this hope this works ...
please give a feedback..
copy and paste from here_---------->
<section class="parallax-banner parallax-slide slide parallax_effect--{{ section.settings.parallax_effect }}" id="slide-{{ section.id }}">
<div class="lazyload bcg {% if section.settings.image == nil %}bcg-placeholder{% endif %}"
{% if section.settings.parallax_effect %}
{% if section.settings.image != nil %}
data-bgset=" {{ section.settings.image | img_url: '2048x' }} 2048w,
{{ section.settings.image | img_url: '1600x' }} 1600w,
{{ section.settings.image | img_url: '1200x' }} 1200w,
{{ section.settings.image | img_url: '1000x' }} 1000w,
{{ section.settings.image | img_url: '800x' }} 800w,
{{ section.settings.image | img_url: '600x' }} 600w,
{{ section.settings.image | img_url: '400x' }} 400w"
data-sizes="100vw"
{% else %}
style="background-image:url({{ 'placeholder.svg' | asset_url }})"
{% endif %}
data-bottom-top="background-position: 50% 10vh;"
data-top-bottom="background-position: 50% -10vh;"
{% endif %}
>
<div class="hsContainer">
<img alt="{{ section.settings.image.alt }}"
{% if section.settings.image != nil %}
src="{{ section.settings.image | img_url: '100x' }}"
data-src="{{ section.settings.image | img_url: '2048x' }}"
class="lazyload lazyload--fade-in hsContainer__image hidden_mobile"
sizes="100vw"
srcset=" {{ section.settings.image | img_url: '2048x' }} 2048w,
{{ section.settings.image | img_url: '1600x' }} 1600w,
{{ section.settings.image | img_url: '1200x' }} 1200w,
{{ section.settings.image | img_url: '1000x' }} 1000w,
{{ section.settings.image | img_url: '800x' }} 800w,
{{ section.settings.image | img_url: '600x' }} 600w,
{{ section.settings.image | img_url: '400x' }} 400w"
{% else %}
src="{{ 'placeholder.svg' | asset_url }}"
class="hsContainer__image"
{% endif %}
/>
<img alt="{{ section.settings.mobile_image.alt }}"
{% if section.settings.mobile_image != nil %}
src="{{ section.settings.mobile_image | img_url: '100x' }}"
data-src="{{ section.settings.mobile_image | img_url: '2048x' }}"
class="lazyload lazyload--fade-in hsContainer__image hidden_desktop"
sizes="100vw"
srcset=" {{ section.settings.mobile_image| img_url: '2048x' }} 2048w,
{{ section.settings.mobile_image | img_url: '1600x' }} 1600w,
{{ section.settings.mobile_image | img_url: '1200x' }} 1200w,
{{ section.settings.mobile_image | img_url: '1000x' }} 1000w,
{{ section.settings.mobile_image | img_url: '800x' }} 800w,
{{ section.settings.mobile_image | img_url: '600x' }} 600w,
{{ section.settings.mobile_image | img_url: '400x' }} 400w"
{% else %}
src="{{ 'placeholder.svg' | asset_url }}"
class="hsContainer__image"
{% endif %}
/>
<div class="hsContent">
{% if section.settings.link != blank and section.settings.button_label == blank %}
<a href="{{ section.settings.link }}" class="full-link">
{{ section.settings.link }}
</a>
{% endif %}
<div class="container">
<div class="columns {% if section.settings.text_position == 'left' %} eight offset-by-one {% elsif section.settings.text_position == 'right' %} eight offset-by-eight {% else %} twelve offset-by-two {% endif %} align_{{ section.settings.text_alignment }}">
<div class="{{ section.settings.headline_animation }}">
{% if section.settings.title != blank %}
<h1 class="headline">
{{ section.settings.title | escape }}
</h1>
{% endif %}
{% if section.settings.subtitle != blank %}
<div class="subtitle">
{{ section.settings.subtitle }}
</div>
{% endif %}
{% if section.settings.button_label != blank %}
<a {% if section.settings.link != blank %}href="{{ section.settings.link }}"{% endif %} class="action_button">
{{ section.settings.button_label | escape }}
</a>
{% endif %}
</div>
</div>
</div>
{% if section.settings.homepage_arrow %}
<a href="#slide-{{ section.id }}-content" class="scroll-arrow scroll-animate_down">
<span class="icon-arrow-down"></span>
</a>
{% endif %}
</div>
</div>
</div>
</section>
<a name="slide-{{ section.id }}-content" id="slide-{{ section.id }}-content"></a>
<style>
{% if section.settings.parallax_effect %}
#slide-{{ section.id }} .hsContainer {
height: {{ section.settings.parallax_image_height }}px;
}
{% endif %}
@media (max-width: 767px) {
{% if settings.slideshow_images_crop %}
#slide-{{ section.id }} .hsContainer {
height: {{ section.settings.parallax_image_height | divided_by: 2 }}px;
}
{% else %}
#slide-{{ section.id }} .hsContainer {
height: auto;
}
{% endif %}
}
.hidden_desktop{
display: none;
}
.hidden_mobile{
display: block;
}
@media (max-width: 767px){
.hidden_desktop{
display: block;
}
.hidden_mobile{
display: none;
}
}
</style>
{% schema %}
{
"name": "Image with text overlay",
"class": "image-with-text-overlay-section under-menu",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image",
"info": "1600 x 1000px recommended"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Image",
"info": "400 x 800px recommended"
},
{
"type": "select",
"id": "headline_animation",
"label": "Heading text animation",
"options": [
{
"value": "",
"label": "None"
},
{
"value": "animate_in",
"label": "Fade In"
},
{
"value": "animate_up",
"label": "Fade Up"
},
{
"value": "animate_down",
"label": "Fade Down"
}
],
"default": "animate_down"
},
{
"type": "text",
"id": "title",
"label": "Title",
"default": "Your headline here"
},
{
"type": "richtext",
"id": "subtitle",
"label": "Subheading",
"default": "<p>This is a short subheading for your banner image</p>"
},
{
"type": "select",
"id": "text_position",
"label": "Text position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "select",
"id": "text_alignment",
"label": "Text alignment",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
],
"default": "center"
},
{
"type": "text",
"id": "button_label",
"label": "Button label"
},
{
"type": "url",
"id": "link",
"label": "Link"
},
{
"type": "checkbox",
"id": "homepage_arrow",
"label": "Show scroll down arrow",
"default": true
},
{
"type": "header",
"content": "Parallax"
},
{
"type": "checkbox",
"id": "parallax_effect",
"label": "Enable parallax scrolling",
"default": true
},
{
"type": "range",
"id": "parallax_image_height",
"label": "Parallax section height",
"min": 300,
"max": 1000,
"step": 20,
"default": 600,
"unit": "px"
}
],
"presets": [{
"name": "Image with text overlay",
"category": "Image",
"settings": {
}
}]
}
{% endschema %}
Hey it didnt work, it does show different image size but when i switch to mobile through shopify the image doesnt change but only shows the deskstop size.
@unofficial2321 Would the code be the same for any theme? I tried it on Debut and Envy and it didn't work on either. It doesn't even show as a section in the customizer.
@unofficial2321 was the no in response to me?
Is there any code that could be added to a new section and could be used on any theme?
The code that you sent for parallax looks very similar to Envy and Debut including the lazy loading, it looks like only the class names are different.
@unofficial2321 here is the code for debut hero.liquid, could you tell me how I could add the desktop/mobile choice to this?
{%- if section.settings.hero_layout == 'full_width' and section.settings.hero_size == 'adapt' -%}
{%- if section.settings.image.aspect_ratio == blank -%}
{%- assign min_aspect_ratio = 2.0 -%}
{%- else -%}
{%- assign min_aspect_ratio = section.settings.image.aspect_ratio -%}
{%- endif -%}
{%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%}
{%- style -%}
.hero-{{ section.id }} {
height: {{- wrapper_height -}}vw !important;
}
{%- endstyle -%}
{%- endif -%}
<div data-section-id="{{ section.id }}" data-section-type="hero-section">
{%- if section.settings.hero_layout == 'fixed_width' -%}
<div class="page-width">
{%- endif -%}
{%- if section.settings.hero_layout == 'fixed_width' and section.settings.hero_size == 'adapt' -%}
{%- assign slide_width = 1090 -%}
{%- assign min_aspect_ratio = section.settings.image.aspect_ratio | default: 2.0 -%}
<div class="hero-fixed-width hero--adapt"
id="Hero-{{ section.id }}"
data-layout="{{ section.settings.hero_layout }}"
data-image-loading-animation>
{%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- if section.settings.image.width < max_width -%}
{%- assign slide_width = section.settings.image.width -%}
{%- endif -%}
<div class="hero-fixed-width__content">
<div class="page-width text-center">
{%- if section.settings.title != blank -%}
<h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
{%- endif -%}
{%- if section.settings.text != blank -%}
<div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
{%- endif -%}
{%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
<a href="{{ section.settings.button_link }}" class="btn hero__btn">
{{ section.settings.button_label | escape }}
</a>
{%- endif -%}
</div>
</div>
{%- if section.settings.image != blank -%}
<img class="hero-fixed-width__image lazyload lazypreload"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]"
data-aspectratio="{{ section.settings.image.aspect_ratio }}"
data-sizes="auto"
style="{%- if slide_width <= max_width -%}
{%- assign min_width = slide_width | times: 100 | divided_by: max_width -%}
min-width: {{ min_width }}%;
{%- endif -%}
object-position: {{ section.settings.alignment }};"
alt="{{ section.settings.image.alt | escape }}">
{%- else -%}
<span>
{% capture current %}{% cycle 1, 2 %}{% endcapture %}
{{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</span>
{%- endif -%}
<noscript>
<div class="hero-fixed-width__image"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
</noscript>
</div>
{%- else -%}
<div class="hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js"
id="Hero-{{ section.id }}"
data-layout="{{ section.settings.hero_layout }}"
{%- if section.settings.image -%}
{% unless section.settings.image.alt == blank %}
role="img"
aria-label="{{ section.settings.image.alt | escape }}"
data-alt="{{ section.settings.image.alt | escape }}"
{% endunless %}
data-bg="{{ section.settings.image | img_url: '300x300' }}"
data-bgset="{% include 'bgset', image: section.settings.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-position: {{ section.settings.alignment }};"
data-image-loading-animation
{%- endif -%}>
{%- if section.settings.image == blank -%}
<div class="placeholder-background">
{{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }}
</div>
{%- endif -%}
<div class="hero__inner">
<div class="page-width text-center">
{%- if section.settings.title != blank -%}
<h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2>
{%- endif -%}
{%- if section.settings.text != blank -%}
<div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div>
{%- endif -%}
{%- if section.settings.button_label != blank and section.settings.button_link != blank -%}
{%- capture ariaLabel -%}
{{- section.settings.button_label -}}
{%- if section.settings.button_link.type == 'frontpage_link' -%}
: {{ 'homepage.general.title' | t -}}
{%- elsif section.settings.button_link.type == 'catalog_link' -%}
: {{ 'collections.catalog.title' | t -}}
{%- elsif section.settings.button_link.object.title -%}
: {{ section.settings.button_link.object.title -}}
{%- endif -%}
{%- endcapture -%}
<a href="{{ section.settings.button_link }}"
class="btn hero__btn"
aria-label="{{ ariaLabel }}">
{{- section.settings.button_label | escape -}}
</a>
{%- endif -%}
</div>
</div>
</div>
<noscript>
<div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %}"{% if section.settings.image %}{% unless section.settings.image.alt == blank %} role="img" aria-label="{{ section.settings.image.alt | escape }}"{% endunless %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div>
</noscript>
{%- endif -%}
{%- if section.settings.hero_layout == 'fixed_width' -%}
</div>
{%- endif -%}
</div>
{% schema %}
{
"name": {
"cs": "Obrázek s textovým překryvem",
"da": "Billede med tekstoverlejring",
"de": "Foto mit überlegtem Text",
"en": "Image with text overlay",
"es": "Imagen con texto superpuesto",
"fi": "Kuva päällä olevalla tekstillä",
"fr": "Image avec calque texte",
"it": "Immagine con testo",
"ja": "テキストオーバーレイ付き画像",
"ko": "텍스트 오버레이 포함 이미지",
"nb": "Bilde med tekstoverlegg",
"nl": "Foto met tekstoverlay",
"pl": "Obraz z nakładką tekstową",
"pt-BR": "Imagem com texto",
"pt-PT": "Imagem com sobreposição de texto",
"sv": "Bild med textöverlagring",
"th": "การวางซ้อนรูปภาพพร้อมข้อความ",
"tr": "Metin katmanı içeren görsel",
"vi": "Hình ảnh có lớp phủ văn bản",
"zh-CN": "带文本叠加的图片",
"zh-TW": "附文字疊加層的圖片"
},
"class": "index-section index-section--flush",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": {
"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
}
},
{
"type": "select",
"id": "alignment",
"label": {
"cs": "Zarovnání obrázku",
"da": "Justering af billede",
"de": "Fotoausrichtung",
"en": "Image alignment",
"es": "Alineación de imagen",
"fi": "Kuvan tasaus",
"fr": "Alignement de l'image",
"it": "Allineamento immagine",
"ja": "画像アラインメント",
"ko": "이미지 정렬",
"nb": "Bildejustering",
"nl": "Afbeelding uitlijnen",
"pl": "Wyrównanie obrazu",
"pt-BR": "Alinhamento da imagem",
"pt-PT": "Alinhamento da imagem",
"sv": "Bildjustering",
"th": "การจัดวางรูปภาพ",
"tr": "Görsel hizalaması",
"vi": "Căn chỉnh hình ảnh",
"zh-CN": "图片对齐方式",
"zh-TW": "圖片對齊"
},
"default": "center",
"options": [
{
"value": "top",
"label": {
"cs": "Nahoru",
"da": "Top",
"de": "Oben",
"en": "Top",
"es": "Superior",
"fi": "Ylös",
"fr": "Haut",
"it": "In alto",
"ja": "上",
"ko": "위쪽",
"nb": "Topp",
"nl": "Boven",
"pl": "Do góry",
"pt-BR": "Acima",
"pt-PT": "Acima",
"sv": "Högst upp",
"th": "ด้านบน",
"tr": "Üst",
"vi": "Bên trên",
"zh-CN": "顶部",
"zh-TW": "頂部"
}
},
{
"value": "center",
"label": {
"cs": "Na střed",
"da": "I midten",
"de": "Mitte",
"en": "Middle",
"es": "Centrada",
"fi": "Keskelle",
"fr": "Milieu",
"it": "Al centro",
"ja": "中央",
"ko": "중간",
"nb": "Midten",
"nl": "Midden",
"pl": "Do środka",
"pt-BR": "Meio",
"pt-PT": "Meio",
"sv": "Mitten",
"th": "ตรงกลาง",
"tr": "Orta",
"vi": "Ở giữa",
"zh-CN": "中间",
"zh-TW": "中央"
}
},
{
"value": "bottom",
"label": {
"cs": "Dolů",
"da": "Bund",
"de": "Unten",
"en": "Bottom",
"es": "Inferior",
"fi": "Alas",
"fr": "Bas",
"it": "In basso",
"ja": "下",
"ko": "아래쪽",
"nb": "Bunn",
"nl": "Onder",
"pl": "Do dołu",
"pt-BR": "Abaixo",
"pt-PT": "Abaixo",
"sv": "Längst ner",
"th": "ด้านล่าง",
"tr": "Alt",
"vi": "Bên dưới",
"zh-CN": "底部",
"zh-TW": "底部"
}
}
]
},
{
"type": "select",
"id": "hero_layout",
"label": {
"cs": "Rozvržení",
"da": "Layout",
"de": "Layout",
"en": "Layout",
"es": "Diseño",
"fi": "Asettelu",
"fr": "Mise en page",
"it": "Layout",
"ja": "レイアウト",
"ko": "레이아웃",
"nb": "Oppsett",
"nl": "Opmaak",
"pl": "Układ",
"pt-BR": "Layout",
"pt-PT": "Esquema",
"sv": "Layout",
"th": "เลย์เอาต์",
"tr": "Düzen",
"vi": "Bố cục",
"zh-CN": "布局",
"zh-TW": "版面配置"
},
"default": "full_width",
"options": [
{
"label": {
"cs": "Plná šířka",
"da": "Fuld bredde",
"de": "Volle Breite",
"en": "Full width",
"es": "Ancho completo",
"fi": "Täysi leveys",
"fr": "Pleine largeur",
"it": "Intera larghezza",
"ja": "全幅",
"ko": "전체 폭",
"nb": "Full bredde",
"nl": "Volledige breedte",
"pl": "Pełna szerokość",
"pt-BR": "Largura completa",
"pt-PT": "Largura total",
"sv": "Full bredd",
"th": "เต็มความกว้าง",
"tr": "Tam genişlik",
"vi": "Độ rộng đầy đủ",
"zh-CN": "全宽",
"zh-TW": "全寬度"
},
"value": "full_width"
},
{
"label": {
"cs": "Pevná šířka",
"da": "Fast bredde",
"de": "Feste Breite",
"en": "Fixed width",
"es": "Ancho fijo",
"fi": "Kiinteä leveys",
"fr": "Largeur fixe",
"it": "Larghezza fissa",
"ja": "固定幅",
"ko": "고정 폭",
"nb": "Fast bredde",
"nl": "Vaste breedte",
"pl": "Stała szerokość",
"pt-BR": "Largura fixa",
"pt-PT": "Largura fixa",
"sv": "Fast bredd",
"th": "ความกว้างตายตัว",
"tr": "Sabit genişlik",
"vi": "Độ rộng cố định",
"zh-CN": "固定宽度",
"zh-TW": "固定寬度"
},
"value": "fixed_width"
}
]
},
{
"type": "select",
"id": "hero_size",
"label": {
"cs": "Výška sekce",
"da": "Højde på afsnit",
"de": "Bereichs-Höhe",
"en": "Section height",
"es": "Altura de la sección",
"fi": "Osan korkeus",
"fr": "Hauteur de la section",
"it": "Altezza sezione",
"ja": "セクションの高さ",
"ko": "섹션 높이",
"nb": "Høyde på del",
"nl": "Sectiehoogte",
"pl": "Wysokość sekcji",
"pt-BR": "Altura da seção",
"pt-PT": "Altura da secção",
"sv": "Sektionshöjd",
"th": "ความสูงของส่วน",
"tr": "Bölüm yüksekliği",
"vi": "Chiều cao mục",
"zh-CN": "分区高度",
"zh-TW": "區塊高度"
},
"default": "medium",
"options": [
{
"label": {
"cs": "Přizpůsobení obrázku",
"da": "Tilpas til billede",
"de": "An Bild anpassen",
"en": "Adapt to image",
"es": "Adaptar a la imagen",
"fi": "Sovita kuvaan",
"fr": "S'adapter à l'image",
"it": "Adatta all'immagine",
"ja": "画像に対応",
"ko": "이미지에 맞춤",
"nb": "Tilpass til bilde",
"nl": "Aanpassen aan afbeelding",
"pl": "Dostosuj do obrazu",
"pt-BR": "Adaptar à imagem",
"pt-PT": "Adaptar à imagem",
"sv": "Anpassa till bild",
"th": "ปรับตามรูปภาพ",
"tr": "Görsele uyarla",
"vi": "Điều chỉnh theo hình ảnh",
"zh-CN": "适应图片",
"zh-TW": "配合圖片"
},
"value": "adapt"
},
{
"label": {
"cs": "Extra malá",
"da": "Ekstra lille",
"de": "Extra klein",
"en": "Extra Small",
"es": "Extra pequeña",
"fi": "Erikoispieni",
"fr": "Très petite",
"it": "Molto piccola",
"ja": "極小",
"ko": "특소",
"nb": "Ekstra liten",
"nl": "Extra klein",
"pl": "Bardzo mała",
"pt-BR": "Extra pequeno",
"pt-PT": "Extra pequeno",
"sv": "Extra liten",
"th": "ขนาดเล็กพิเศษ",
"tr": "Çok Küçük",
"vi": "Cực nhỏ",
"zh-CN": "特小",
"zh-TW": "超小型"
},
"value": "x-small"
},
{
"label": {
"cs": "Malá",
"da": "Lille",
"de": "Klein",
"en": "Small",
"es": "Pequeña",
"fi": "Pieni",
"fr": "Petite",
"it": "Small",
"ja": "小",
"ko": "스몰",
"nb": "Liten",
"nl": "Klein",
"pl": "Mała",
"pt-BR": "Pequeno",
"pt-PT": "Pequeno",
"sv": "Liten",
"th": "เล็ก",
"tr": "Küçük",
"vi": "Nhỏ",
"zh-CN": "小",
"zh-TW": "小型"
},
"value": "small"
},
{
"label": {
"cs": "Střední",
"da": "Medium",
"de": "Mitte",
"en": "Medium",
"es": "Mediana",
"fi": "Keskisuuri",
"fr": "Moyenne",
"it": "Medium",
"ja": "中",
"ko": "보통",
"nb": "Middels",
"nl": "Gemiddeld",
"pl": "Średnia",
"pt-BR": "Médio",
"pt-PT": "Médio",
"sv": "Medium",
"th": "ปานกลาง",
"tr": "Orta",
"vi": "Trung bình",
"zh-CN": "中等",
"zh-TW": "中等"
},
"value": "medium"
},
{
"label": {
"cs": "Velká",
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "Grande",
"fi": "Suuri",
"fr": "Grande",
"it": "Large",
"ja": "大",
"ko": "라지",
"nb": "Stor",
"nl": "Groot",
"pl": "Duża",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"tr": "Büyük",
"vi": "Lớn",
"zh-CN": "大",
"zh-TW": "大型"
},
"value": "large"
},
{
"label": {
"cs": "Extra velká",
"da": "Ekstra stor",
"de": "Extra groß",
"en": "Extra Large",
"es": "Extra grande",
"fi": "Erikoissuuri",
"fr": "Très grande",
"it": "Molto grande",
"ja": "特大",
"ko": "특대",
"nb": "Ekstra stort",
"nl": "Extra groot",
"pl": "Bardzo duża",
"pt-BR": "Extra grande",
"pt-PT": "Extra grande",
"sv": "Extra stor",
"th": "ขนาดใหญ่พิเศษ",
"tr": "Çok Büyük",
"vi": "Cực lớn",
"zh-CN": "特大",
"zh-TW": "超大型"
},
"value": "x-large"
}
]
},
{
"type": "select",
"id": "text_size",
"label": {
"cs": "Velikost textu",
"da": "Tekststørrelse",
"de": "Textgröße",
"en": "Text size",
"es": "Tamaño del texto",
"fi": "Tekstin koko",
"fr": "Taille du texte",
"it": "Dimensione testo",
"ja": "文字サイズ",
"ko": "텍스트 사이즈",
"nb": "Tekststørrelse",
"nl": "Tekengrootte",
"pl": "Rozmiar czcionki",
"pt-BR": "Tamanho do texto",
"pt-PT": "Tamanho do texto",
"sv": "Textstorlek",
"th": "ขนาดตัวอักษร",
"tr": "Metin boyutu",
"vi": "Cỡ văn bản",
"zh-CN": "文本大小",
"zh-TW": "文字尺寸"
},
"default": "medium",
"options": [
{
"label": {
"cs": "Střední",
"da": "Medium",
"de": "Mitte",
"en": "Medium",
"es": "Mediano",
"fi": "Keskisuuri",
"fr": "Moyenne",
"it": "Medium",
"ja": "中",
"ko": "보통",
"nb": "Middels",
"nl": "Gemiddeld",
"pl": "Średnia",
"pt-BR": "Médio",
"pt-PT": "Intermédio",
"sv": "Medium",
"th": "ปานกลาง",
"tr": "Orta",
"vi": "Trung bình",
"zh-CN": "中等",
"zh-TW": "中等"
},
"value": "medium"
},
{
"label": {
"cs": "Velká",
"da": "Stor",
"de": "Groß",
"en": "Large",
"es": "Grande",
"fi": "Suuri",
"fr": "Grande",
"it": "Large",
"ja": "大",
"ko": "라지",
"nb": "Stor",
"nl": "Groot",
"pl": "Duża",
"pt-BR": "Grande",
"pt-PT": "Grande",
"sv": "Stor",
"th": "ใหญ่",
"tr": "Büyük",
"vi": "Lớn",
"zh-CN": "大",
"zh-TW": "大型"
},
"value": "large"
}
]
},
{
"type": "text",
"id": "title",
"label": {
"cs": "Nadpis",
"da": "Overskrift",
"de": "Titel",
"en": "Heading",
"es": "Título",
"fi": "Otsake",
"fr": "En-tête",
"it": "Heading",
"ja": "見出し",
"ko": "제목",
"nb": "Overskrift",
"nl": "Kop",
"pl": "Nagłówek",
"pt-BR": "Título",
"pt-PT": "Título",
"sv": "Rubrik",
"th": "ส่วนหัว",
"tr": "Başlık",
"vi": "Tiêu đề",
"zh-CN": "标题",
"zh-TW": "標題"
},
"default": {
"cs": "Obrázek s textovým překryvem",
"da": "Billede med tekstoverlejring",
"de": "Foto mit überlegtem Text",
"en": "Image with text overlay",
"es": "Imagen con texto superpuesto",
"fi": "Kuva päällä olevalla tekstillä",
"fr": "Image avec calque texte",
"it": "Immagine con testo",
"ja": "テキストオーバーレイ付き画像",
"ko": "텍스트 오버레이 포함 이미지",
"nb": "Bilde med tekstoverlegg",
"nl": "Foto met tekstoverlay",
"pl": "Obraz z nakładką tekstową",
"pt-BR": "Imagem com sobreposição de texto",
"pt-PT": "Imagem com sobreposição de texto",
"sv": "Bild med textöverlagring",
"th": "การวางซ้อนรูปภาพพร้อมข้อความ",
"tr": "Metin katmanı içeren görsel",
"vi": "Hình ảnh có lớp phủ văn bản",
"zh-CN": "带文本叠加的图片",
"zh-TW": "附文字疊加層的圖片"
}
},
{
"type": "richtext",
"id": "text",
"label": {
"cs": "Text",
"da": "Tekst",
"de": "Text",
"en": "Text",
"es": "Texto",
"fi": "Teksti",
"fr": "Texte",
"it": "Testo",
"ja": "テキスト",
"ko": "텍스트",
"nb": "Tekst",
"nl": "Tekst",
"pl": "Tekst",
"pt-BR": "Texto",
"pt-PT": "Texto",
"sv": "Text",
"th": "ข้อความ",
"tr": "Metin",
"vi": "Văn bản",
"zh-CN": "文本",
"zh-TW": "文字"
},
"default": {
"cs": "<p>Prostřednictvím textového překryvu můžete zákazníkům prezentovat svoji značku. Vyberte obrázky, design a text, který reflektuje váš styl i firmu.</p>",
"da": "<p>Brug tekstoverlejring til at give dine kunder indblik i dit brand. Vælg billeder og tekst, der passer til din stil og historie.</p>",
"de": "<p>Nutzen Sie überlegten Text, um Kunden über Ihre Marke zu informieren. Wählen Sie Fotos und Text aus, die zu Ihrer Marke passen.</p>",
"en": "<p>Use overlay text to give your customers insight into your brand. Select imagery and text that relates to your style and story.</p>",
"es": "<p>Usa el texto superpuesto para darles información útil a tus clientes sobre tu marca. Selecciona imágenes y textos que se relacionen con tu estilo e historia.</p>",
"fi": "<p>Käytä taustan päällä olevaa tekstiä, jotta asiakkaat voivat tutustua tuotemerkkisi. Valitse tyylisi ja tarinasi liittyvät kuvat ja teksti.</p>",
"fr": "<p>Utilisez la superposition de texte pour donner un aperçu de votre marque à vos clients. Utilisez une image et du texte qui se rapportent au style et à l'histoire de votre marque.</p>",
"it": "<p>Utilizza il testo in sovrapposizione per dare ai clienti informazioni sul tuo brand. Seleziona immagini e testo legati al tuo stile e alla tua storia.</p>",
"ja": "<p>オーバーレイテキストを使用して、お客様があなたのブランドについてよく理解できるようにします。あなたのスタイルやストーリーに関連する画像やテキストを選択してください。</p>",
"ko": "<p>오버레이 텍스트를 사용하여 고객에게 브랜드에 대한 통찰력을 부여하십시오. 자신의 스타일과 이야기와 관련된 이미지와 텍스트를 선택하십시오.</p>",
"nb": "<p>Bruk overleggstekst til å gi kundene dine innsikt i merkevaren din. Velg bildebruk og tekst som er relatert til din stil og historie.</p>",
"nl": "<p>Gebruik overlay-tekst om je klanten inzicht te geven in je merk. Selecteer afbeeldingen en tekst die betrekking hebben op je stijl en verhaal.</p>",
"pl": "<p>Użyj tekstu nakładki, aby dać swoim klientom wgląd w Twoją markę. Wybierz obrazy i teksty, które odnoszą się do Twojego stylu i historii.</p>",
"pt-BR": "<p>Use o texto de sobreposição para apresentar insights sobre sua marca aos clientes. Selecione imagens e textos que reflitam seu estilo e sua história.</p>",
"pt-PT": "<p>Utilize o texto de sobreposição para fornecer informações sobre a sua marca aos clientes. Selecione imagens e textos que reflitam o seu estilo e a sua história.</p>",
"sv": "<p>Använd överläggningstext för att ge dina kunder inblick i ditt varumärke. Välj bildspråk och text som gäller din stil och historia.</p>",
"th": "<p>ใช้ข้อความซ้อนทับเพื่อให้ลูกค้าของคุณทราบถึงรายละเอียดเกี่ยวกับแบรนด์ เลือกรูปภาพและข้อความที่มีความเกี่ยวข้องกับสไตล์กับเรื่องราวของคุณ</p>",
"tr": "<p>Yer paylaşımlı metin kullanarak müşterilerinizin kafasında mağazanız hakkında fikir oluşmasını sağlayın. Stilinize ve öykünüze uyan görseller ve metinler seçin.</p>",
"vi": "<p>Sử dụng lớp phủ văn bản để đưa thông tin chi tiết khách hàng vào thương hiệu của bạn. Chọn hình ảnh và văn bản phù hợp với phong cách và câu chuyện của bạn.</p>",
"zh-CN": "<p>使用叠加文本让客户深入了解您的品牌。选择与您的风格和故事相关的图片和文本。</p>",
"zh-TW": "<p>運用文字疊加層讓顧客更加瞭解您的品牌。選擇與您風格和品牌故事相關的圖像和文字。</p>"
}
},
{
"type": "text",
"id": "button_label",
"label": {
"cs": "Text tlačítka",
"da": "Knaptekst",
"de": "Button-Etikett",
"en": "Button label",
"es": "Etiqueta de botón",
"fi": "Tekstipainike",
"fr": "Texte du bouton",
"it": "Etichetta pulsante",
"ja": "ボタンのラベル",
"ko": "버튼 레이블",
"nb": "Knappetikett",
"nl": "Knoplabel",
"pl": "Przycisk z etykietą",
"pt-BR": "Etiqueta de botão",
"pt-PT": "Etiqueta do botão",
"sv": "Knappetikett",
"th": "ป้ายกำกับปุ่ม",
"tr": "Düğme etiketi",
"vi": "Nhãn nút",
"zh-CN": "按钮标签",
"zh-TW": "按鈕標籤"
}
},
{
"type": "url",
"id": "button_link",
"label": {
"cs": "Tlačítkový odkaz",
"da": "Knaplink",
"de": "Button-Etikett",
"en": "Button link",
"es": "Enlace de botón",
"fi": "Painikelinkki",
"fr": "Lien du bouton",
"it": "Link pulsante",
"ja": "ボタンのリンク",
"ko": "버튼 링크",
"nb": "Kobling for knapp",
"nl": "Knoplink",
"pl": "Link przycisku",
"pt-BR": "Link de botão",
"pt-PT": "Ligação do botão",
"sv": "Knapplänk",
"th": "ลิงก์ปุ่ม",
"tr": "Düğme bağlantısı",
"vi": "Liên kết trên nút",
"zh-CN": "按钮链接",
"zh-TW": "按鈕連結"
}
}
],
"presets": [
{
"name": {
"cs": "Obrázek s textovým překryvem",
"da": "Billede med tekstoverlejring",
"de": "Foto mit überlegtem Text",
"en": "Image with text overlay",
"es": "Imagen con texto superpuesto",
"fi": "Kuva päällä olevalla tekstillä",
"fr": "Image avec calque texte",
"it": "Immagine con testo",
"ja": "テキストオーバーレイ付き画像",
"ko": "텍스트 오버레이 포함 이미지",
"nb": "Bilde med tekstoverlegg",
"nl": "Foto met tekstoverlay",
"pl": "Obraz z nakładką tekstową",
"pt-BR": "Imagem com sobreposição de texto",
"pt-PT": "Imagem com sobreposição de texto",
"sv": "Bild med textöverlagring",
"th": "การวางซ้อนรูปภาพพร้อมข้อความ",
"tr": "Metin katmanı içeren görsel",
"vi": "Hình ảnh có lớp phủ văn bản",
"zh-CN": "带文本叠加的图片",
"zh-TW": "附文字疊加層的圖片"
},
"category": {
"cs": "Obrázek",
"da": "Billede",
"de": "Foto",
"en": "Image",
"es": "Imagen",
"fi": "Kuva",
"fr": "Image",
"it": "Immagine",
"ja": "画像",
"ko": "이미지",
"nb": "Bilde",
"nl": "Afbeelding",
"pl": "Obraz",
"pt-BR": "Imagem",
"pt-PT": "Imagem",
"sv": "Bild",
"th": "รูปภาพ",
"tr": "Görsel",
"vi": "Hình ảnh",
"zh-CN": "图片",
"zh-TW": "圖片"
}
}
]
}
{% endschema %}
An expert has resolved the issue for me. Thanks for your time in ensuring the issue is resolved.
Idk how to delete a post but this one had an error in the code. Reposted updated version
Hi. I'm trying to implement this in my theme (Debut). The only issue I'm having is on mobile I want a portrait image and on desktop a landscape image. But I can't figure out how to make the mobile image resize to portrait.
{%- if section.settings.hero_layout == 'full_width' and section.settings.hero_size == 'adapt' -%} {%- if section.settings.image.aspect_ratio == blank -%} {%- assign min_aspect_ratio = 2.0 -%} {%- else -%} {%- assign min_aspect_ratio = section.settings.image.aspect_ratio -%} {%- endif -%} {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%} {%- style -%} .hero-{{ section.id }} { height: {{- wrapper_height -}}vw !important; } {%- endstyle -%} {%- endif -%} <div data-section-id="{{ section.id }}" data-section-type="hero-section"> {%- if section.settings.hero_layout == 'fixed_width' -%} <div class="page-width"> {%- endif -%} {%- if section.settings.hero_layout == 'fixed_width' and section.settings.hero_size == 'adapt' -%} {%- assign slide_width = 1090 -%} {%- assign min_aspect_ratio = section.settings.image.aspect_ratio | default: 2.0 -%} <div class="hero-fixed-width hero--adapt" id="Hero-{{ section.id }}" data-layout="{{ section.settings.hero_layout }}"> {%- assign img_url = section.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {%- if section.settings.image.width < max_width -%} {%- assign slide_width = section.settings.image.width -%} {%- endif -%} <div class="hero-fixed-width__content"> <div class="page-width text-center"> {%- if section.settings.title != blank -%} <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2> {%- endif -%} {%- if section.settings.text != blank -%} <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div> {%- endif -%} {%- if section.settings.button_label != blank and section.settings.button_link != blank -%} <a href="{{ section.settings.button_link }}" class="btn hero__btn"> {{ section.settings.button_label | escape }} </a> {%- endif -%} </div> </div> {%- if section.settings.image != blank -%} <img class="hero-fixed-width__image lazyload lazypreload" src="{{ section.settings.image | img_url: '300x300' }}" data-src="{{ img_url }}" data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]" data-aspectratio="{{ section.settings.image.aspect_ratio }}" data-sizes="auto" style="{%- if slide_width <= max_width -%} {%- assign min_width = slide_width | times: 100 | divided_by: max_width -%} min-width: {{ min_width }}%; {%- endif -%} object-position: {{ section.settings.alignment }};" alt="{{ section.settings.image.alt | escape }}"> {%- else -%} <span> {% capture current %}{% cycle 1, 2 %}{% endcapture %} {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }} </span> {%- endif -%} <noscript> <div class="hero-fixed-width__image"{% if section.settings.image %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div> </noscript> </div> {%- else -%} <div class="hidden_mobile hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js" id="Hero-{{ section.id }}" data-layout="{{ section.settings.hero_layout }}" {%- if section.settings.image -%} data-bgset="{% include 'bgset', image: section.settings.image %}" data-sizes="auto" data-parent-fit="cover" style="background-position: {{ section.settings.alignment }}; background-image: url('{{ section.settings.image | img_url: '300x300' }});" {%- endif -%}> {%- if section.settings.image == blank -%} <div class="hidden_mobile placeholder-background"> {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }} </div> {%- endif -%} <div class="hero__inner"> <div class="page-width text-center"> {%- if section.settings.title != blank -%} <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2> {%- endif -%} {%- if section.settings.text != blank -%} <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div> {%- endif -%} {%- if section.settings.button_label != blank and section.settings.button_link != blank -%} <a href="{{ section.settings.button_link }}" class="btn hero__btn"> {{ section.settings.button_label | escape }} </a> {%- endif -%} </div> </div> </div> <noscript> <div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %}"{% if section.settings.image %} style="background-image: url('{{ section.settings.image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div> </noscript> {%- endif -%} {%- if section.settings.hero_layout == 'fixed_width' -%} </div> {% comment %}Above will be the desktop image and below will be the mobile image{% endcomment %} <div class="page-width"> {%- endif -%} {%- if section.settings.hero_layout == 'fixed_width' and section.settings.hero_size == 'adapt' -%} {%- assign slide_width = 1090 -%} {%- assign min_aspect_ratio = section.settings.mobile_image.aspect_ratio | default: 2.0 -%} <div class="hero-fixed-width hero--adapt" id="Hero-{{ section.id }}" data-layout="{{ section.settings.hero_layout }}"> {%- assign img_url = section.settings.mobile_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {%- if section.settings.mobile_image.width < max_width -%} {%- assign slide_width = section.settings.mobile_image.width -%} {%- endif -%} <div class="hero-fixed-width__content"> <div class="page-width text-center"> {%- if section.settings.title != blank -%} <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2> {%- endif -%} {%- if section.settings.text != blank -%} <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div> {%- endif -%} {%- if section.settings.button_label != blank and section.settings.button_link != blank -%} <a href="{{ section.settings.button_link }}" class="btn hero__btn"> {{ section.settings.button_label | escape }} </a> {%- endif -%} </div> </div> {%- if section.settings.mobile_image != blank -%} <img class="hero-fixed-width__image lazyload lazypreload" src="{{ section.settings.mobile_image | img_url: '300x300' }}" data-src="{{ img_url }}" data-widths="[180, 360, 470, 600, 770, 970, 1060, 1280, 1512, 1728, 2048]" data-aspectratio="{{ section.settings.mobile_image.aspect_ratio }}" data-sizes="auto" style="{%- if slide_width <= max_width -%} {%- assign min_width = slide_width | times: 100 | divided_by: max_width -%} min-width: {{ min_width }}%; {%- endif -%} object-position: {{ section.settings.alignment }};" alt="{{ section.settings.mobile_image.alt | escape }}"> {%- else -%} <span> {% capture current %}{% cycle 1, 2 %}{% endcapture %} {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }} </span> {%- endif -%} <noscript> <div class="hero-fixed-width__image"{% if section.settings.mobile_image %} style="background-image: url('{{ section.settings.mobile_image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div> </noscript> </div> {%- else -%} <div class="hidden_desktop hero hero--{{ section.settings.hero_size }} hero-{{ section.id }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %} box ratio-container lazyload js" id="Hero-{{ section.id }}" data-layout="{{ section.settings.hero_layout }}" {%- if section.settings.mobile_image -%} data-bgset="{% include 'bgset', mobile_image: section.settings.mobile_image %}" data-sizes="auto" data-parent-fit="cover" style="background-position: {{ section.settings.alignment }}; background-image: url('{{ section.settings.mobile_image | img_url: '300x300' }});" {%- endif -%}> {%- if section.settings.mobile_image == blank -%} <div class="hidden_desktop placeholder-background"> {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }} </div> {%- endif -%} <div class="hero__inner"> <div class="page-width text-center"> {%- if section.settings.title != blank -%} <h2 class="h1 mega-title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}">{{ section.settings.title | escape }}</h2> {%- endif -%} {%- if section.settings.text != blank -%} <div class="rte-setting mega-subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}">{{ section.settings.text }}</div> {%- endif -%} {%- if section.settings.button_label != blank and section.settings.button_link != blank -%} <a href="{{ section.settings.button_link }}" class="btn hero__btn"> {{ section.settings.button_label | escape }} </a> {%- endif -%} </div> </div> </div> <noscript> <div class="hero hero--{{ section.settings.hero_size }}{% if section.settings.title != blank or section.settings.text != blank or section.settings.button_label != blank %} hero__overlay{% endif %}"{% if section.settings.mobile_image %} style="background-image: url('{{ section.settings.mobile_image | img_url: '2048x' }}'); background-position: center {{ section.settings.alignment }};"{% endif %}></div> </noscript> {%- endif -%} {%- if section.settings.hero_layout == 'fixed_width' -%} </div> {%- endif -%} </div> {% schema %} { "name": { "da": "Billede med tekstoverlejring", "de": "Foto mit überlegtem Text", "en": "Image with text overlay", "es": "Imagen con texto", "fi": "Kuva päällä olevalla tekstillä", "fr": "Image avec texte", "hi": "पाठ ओवरले के साथ इमेज", "it": "Immagine con testo", "ja": "テキストオーバーレイ付き画像", "ko": "텍스트 오버레이 포함 이미지", "ms": "Imej dengan tindanan teks", "nb": "Bilde med tekstoverlegg", "nl": "Foto met tekstoverlay", "pt-BR": "Imagem com texto", "pt-PT": "Imagem com sobreposição de texto", "sv": "Bild med textöverlagring", "th": "การวางซ้อนรูปภาพพร้อมข้อความ", "zh-CN": "带文本叠加的图片", "zh-TW": "附文字疊加的圖片" }, "class": "index-section index-section--flush", "settings": [ { "type": "image_picker", "id": "image", "label": { "da": "Billede", "de": "Foto", "en": "Image", "es": "Imagen", "fi": "Kuva", "fr": "Image", "hi": "इमेज", "it": "Immagine", "ja": "画像", "ko": "이미지", "ms": "Imej", "nb": "Bilde", "nl": "Afbeelding", "pt-BR": "Imagem", "pt-PT": "Imagem", "sv": "Bild", "th": "รูปภาพ", "zh-CN": "图片", "zh-TW": "圖片" } }, { "type": "image_picker", "id": "mobile_image", "label": { "da": "Billede", "de": "Foto", "en": "Image", "es": "Imagen", "fi": "Kuva", "fr": "Image", "hi": "इमेज", "it": "Immagine", "ja": "画像", "ko": "이미지", "ms": "Imej", "nb": "Bilde", "nl": "Afbeelding", "pt-BR": "Imagem", "pt-PT": "Imagem", "sv": "Bild", "th": "รูปภาพ", "zh-CN": "图片", "zh-TW": "圖片" } },
I've learned a lot reading this thread. Thank you so much for your thorough help
I also added this to my bgset.liquid file. (not sure if it matters, just trying everything I can think of)
{%- if image != blank -%} {% if image.width > 180 %}{{ image | img_url: '180x' }} 180w {{ 180 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 360 %}{{ image | img_url: '360x' }} 360w {{ 360 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 540 %}{{ image | img_url: '540x' }} 540w {{ 540 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 720 %}{{ image | img_url: '720x' }} 720w {{ 720 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 900 %}{{ image | img_url: '900x' }} 900w {{ 900 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 1080 %}{{ image | img_url: '1080x' }} 1080w {{ 1080 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 1296 %}{{ image | img_url: '1296x' }} 1296w {{ 1296 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 1512 %}{{ image | img_url: '1512x' }} 1512w {{ 1512 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 1728 %}{{ image | img_url: '1728x' }} 1728w {{ 1728 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 1950 %}{{ image | img_url: '1950x' }} 1950w {{ 1950 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 2100 %}{{ image | img_url: '2100x' }} 2100w {{ 2100 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 2260 %}{{ image | img_url: '2260x' }} 2260w {{ 2260 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 2450 %}{{ image | img_url: '2450x' }} 2450w {{ 2450 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 2700 %}{{ image | img_url: '2700x' }} 2700w {{ 2700 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 3000 %}{{ image | img_url: '3000x' }} 3000w {{ 3000 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 3350 %}{{ image | img_url: '3350x' }} 3350w {{ 3350 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 3750 %}{{ image | img_url: '3750x' }} 3750w {{ 3750 | divided_by: image.aspect_ratio | round }}h,{% endif %} {% if image.width > 4100 %}{{ image | img_url: '4100x' }} 4100w {{ 4100 | divided_by: image.aspect_ratio | round }}h,{% endif %} {{ image | img_url: 'master' }} {{ image.width }}w {{ image.height }}h {%- endif -%} {%- if mobile_image != blank -%} {% if mobile_image.width > 180 %}{{ mobile_image | img_url: '180x' }} 180w {{ 180 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 360 %}{{ mobile_image | img_url: '360x' }} 360w {{ 360 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 540 %}{{ mobile_image | img_url: '540x' }} 540w {{ 540 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 720 %}{{ mobile_image | img_url: '720x' }} 720w {{ 720 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 900 %}{{ mobile_image | img_url: '900x' }} 900w {{ 900 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 1080 %}{{ mobile_image | img_url: '1080x' }} 1080w {{ 1080 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 1296 %}{{ mobile_image | img_url: '1296x' }} 1296w {{ 1296 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 1512 %}{{ mobile_image | img_url: '1512x' }} 1512w {{ 1512 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 1728 %}{{ mobile_image | img_url: '1728x' }} 1728w {{ 1728 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 1950 %}{{ mobile_image | img_url: '1950x' }} 1950w {{ 1950 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 2100 %}{{ mobile_image | img_url: '2100x' }} 2100w {{ 2100 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 2260 %}{{ mobile_image | img_url: '2260x' }} 2260w {{ 2260 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 2450 %}{{ mobile_image | img_url: '2450x' }} 2450w {{ 2450 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 2700 %}{{ mobile_image | img_url: '2700x' }} 2700w {{ 2700 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 3000 %}{{ mobile_image | img_url: '3000x' }} 3000w {{ 3000 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 3350 %}{{ mobile_image | img_url: '3350x' }} 3350w {{ 3350 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 3750 %}{{ mobile_image | img_url: '3750x' }} 3750w {{ 3750 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {% if mobile_image.width > 4100 %}{{ mobile_image | img_url: '4100x' }} 4100w {{ 4100 | divided_by: mobile_image.aspect_ratio | round }}h,{% endif %} {{ mobile_image | img_url: 'master' }} {{ mobile_image.width }}w {{ mobile_image.height }}h {%- endif -%}
And I {think} I've narrowed it down to the top portion of the hero.liquid file. Whenever I remove the middle if's it helps with sizing, but not completely. Also, I added the style to the theme.scss.liquid file instead of the html.
{%- if section.settings.hero_layout == 'full_width' and section.settings.hero_size == 'adapt' -%} {%- if section.settings.image.aspect_ratio == blank -%} {%- assign min_aspect_ratio = 2.0 -%} {%- else -%} {%- assign min_aspect_ratio = section.settings.image.aspect_ratio -%} {%- endif -%} {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%} {%- style -%} .hero-{{ section.id }} { height: {{- wrapper_height -}}vw !important; } {%- endstyle -%} {%- endif -%}
This question (and answers) helped me a lot. I wrote this into a small blog post for easy reading: https://medium.com/@nickdaelemans/using-a-mobile-header-image-on-shopify-be7e4cae60f9?sk=03916a16452...
Hello
Can this code option matches with all theme such as blockshop ?
thanks
Hi Ninthony,
I managed to get the schema edits showing up correctly in the customizer however can't get the html portion to show the mobile image.
I'm editing slideshow.liquid in the Debut theme - i'm guessing the code required is slightly different.
Any thoughts?
{%- if section.settings.slideshow_height == 'adapt' -%} {% comment %} 'min_aspect_ratio' is the minimum aspect ratio of images shown without whitespace when 'slideshow_height' is set to 'adapt'. The aspect ratio values for the first image in the slideshow will be used unless it is blank, in that case a ratio of 2:1 will be used. {% endcomment %} {%- assign first_block = section.blocks[0] -%} {%- if first_block.settings.image.aspect_ratio == blank -%} {%- assign min_aspect_ratio = 2.0 -%} {%- else -%} {%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%} {%- endif -%} {% assign wrapper_height = 100 | divided_by: min_aspect_ratio %} {%- endif -%} {%- assign text_alignments = section.settings.text_alignment | split: ' ' -%} {%- assign text_horizontal_alignment = text_alignments.first -%} {%- assign text_vertical_alignment = text_alignments.last | strip -%} <div data-section-id="{{ section.id }}" data-section-type="slideshow-section"> {%- if section.blocks.size > 0 -%} <div id="SlideshowWrapper-{{ section.id }}" class="slideshow-wrapper" role="region" aria-label="slideshow" aria-describedby="slideshow-info" tabindex="-1"> <div class="slideshow slideshow--{{ section.settings.slideshow_height }}{% if display_controls %} slideshow--display-controls{% endif %}" id="Slideshow-{{ section.id }}" data-autorotate="{{ section.settings.autorotate }}" data-speed="{{ section.settings.autorotate_speed | times: 1000 }}" data-adapt-height="{% if section.settings.slideshow_height == 'adapt' %}true{% else %}false{% endif %}" data-slide-nav-a11y="{{ 'sections.slideshow.load_slide' | t: slide_number: '[slide_number]' }}" {% if section.settings.slideshow_height == 'adapt' %}data-min-aspect-ratio="{{ min_aspect_ratio }}" style="height: {{- wrapper_height -}}vw"{% endif %}> {%- for block in section.blocks -%} <div class="slideshow__slide slideshow__slide--{{ block.id }}" {{ block.shopify_attributes }}> {% if block.settings.image == blank %} <div class="slideshow__image js"> <div class="placeholder-background"> {% capture current %}{% cycle 1, 2 %}{% endcapture %} {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }} </div> {% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %} </div> {% else %} <div class="slideshow__image box ratio-container lazyload{% unless forloop.first %} lazypreload{% endunless %} js" data-bgset="{% include 'bgset', image: block.settings.image %}" data-sizes="auto" data-parent-fit="contain" style="background-position: {{ block.settings.alignment }}; background-image: url('{{ block.settings.image | img_url: '300x300' }}');"> {% if section.settings.show_overlay %}<div class="slideshow__overlay"></div>{% endif %} </div> {% endif %} <noscript> <div class="slideshow__image"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}'); background-position: {{ block.settings.alignment }};"{% endif %}> {% if block.settings.image == blank %} <div class="placeholder-background"> {{ 'lifestyle-1' | placeholder_svg_tag: 'placeholder-svg' }} </div> {% endif %} </div> </noscript> <div class="slideshow__text-wrap slideshow__text-wrap--desktop"> <div class="slideshow__text-content slideshow__text-content--vertical-{{ text_vertical_alignment }} text-{{ text_horizontal_alignment }}"> <div class="page-width"> {% unless block.settings.slide_title == blank and block.settings.subheading == blank %} <ul class="slideshow__text-content-list"> {%- unless block.settings.slide_title == blank -%} <li> <h2 class="h1 mega-title slideshow__title{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}"> {{ block.settings.slide_title }} </h2> </li> {%- endunless -%} {%- unless block.settings.subheading == blank -%} <li> <span class="mega-subtitle slideshow__subtitle{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}"> {{ block.settings.subheading }} </span> </li> {%- endunless -%} </ul> {% endunless %} {%- assign show_link_button = false -%} {%- if block.settings.button_label != blank and block.settings.button_link != blank -%} {%- assign show_link_button = true -%} {%- endif -%} {%- if show_link_button -%} <div class="slideshow__btn-wrapper{% if block.settings.slide_title != blank or block.settings.subheading != blank %} slideshow__btn-wrapper--push{% endif %}"> <a href="{{ block.settings.button_link }}" class="btn slideshow__btn"> {{ block.settings.button_label | escape }} </a> </div> {%- endif -%} </div> </div> </div> </div> {%- endfor -%} </div> <div class="slideshow__controls"> {%- if section.blocks.size > 1 -%} {%- assign arrows_width = section.blocks.size | times: 18 | plus: 115 -%} <div class="slideshow__arrows" style="width: {{- arrows_width -}}px"> <button class="slideshow__arrow slideshow__arrow-left" aria-label="{{ 'sections.slideshow.previous_slide' | t }}">{% include 'icon-chevron-left' %}</button> <button class="slideshow__arrow slideshow__arrow-right" aria-label="{{ 'sections.slideshow.next_slide' | t }}">{% include 'icon-chevron-right' %}</button> </div> {%- if section.settings.autorotate -%} <button type="button" class="slideshow__pause" data-id="{{ section.id }}" aria-live="polite" aria-pressed="false"> <span class="slideshow__pause-stop"> {% include 'icon-pause' %} <span class="icon__fallback-text">{{ 'sections.slideshow.pause_slideshow' | t }}</span> </span> <span class="slideshow__pause-rotate"> {% include 'icon-play' %} <span class="icon__fallback-text">{{ 'sections.slideshow.rotate_slideshow' | t }}</span> </span> </button> {%- endif -%} {%- endif -%} </div> </div> <div class="slideshow__text-wrap slideshow__text-wrap--mobile"> {% if section.blocks.size > 1 %} <div class="slideshow__arrows slideshow__arrows--mobile"> <button class="slideshow__arrow slideshow__arrow-left" aria-label="{{ 'sections.slideshow.previous_slide' | t }}">{% include 'icon-chevron-left' %}</button> <button class="slideshow__arrow slideshow__arrow-right" aria-label="{{ 'sections.slideshow.next_slide' | t }}">{% include 'icon-chevron-right' %}</button> </div> {% endif %} {%- for block in section.blocks -%} {%- assign show_text = false -%} {%- unless block.settings.slide_title == blank and block.settings.subheading == blank -%} {%- assign show_text = true -%} {%- endunless -%} {%- assign show_link_button = false -%} {%- if block.settings.button_label != blank and block.settings.button_link != blank -%} {%- assign show_link_button = true -%} {%- endif -%} {%- if show_text or show_link_button -%} <div class="slideshow__text-content slideshow__text-content--mobile slideshow__text-content--mobile-{{ forloop.index0 }} text-center"> <div class="page-width"> {%- unless block.settings.slide_title == blank -%} <h2 class="h1 mega-title slideshow__title slideshow__title--mobile{% if section.settings.text_size == 'large' %} mega-title--large{% endif %}"> {{ block.settings.slide_title | escape }} </h2> {%- endunless -%} {%- unless block.settings.subheading == blank -%} <span class="mega-subtitle slideshow__subtitle slideshow__subtitle--mobile{% if section.settings.text_size == 'large' %} mega-subtitle--large{% endif %}"> {{ block.settings.subheading | escape }} </span> {%- endunless -%} {%- if show_link_button -%} <a href="{{ block.settings.button_link }}" class="btn slideshow__btn slideshow__btn--mobile"> {{ block.settings.button_label | escape }} </a> {%- endif -%} </div> </div> {%- endif -%} {%- endfor -%} </div> {%- endif -%} {% if section.blocks.size == 0 %} <div class="placeholder-noblocks"> {{ 'homepage.onboarding.no_content' | t }} </div> {% endif %} </div>
Hi Ninthony (or anyone listening). I am trying to follow your instructions on this post for having different banner images for desktop and mobile viewing of my home page, but I can't figure out where to place the actual html portion in my theme.
Just posting this for Venture theme, had another user contact me about it so I looked into it and it was fairly easy. Everyone backup your themes before you attempt it. Used on the "Snowboarding" option of Venture, not sure if it matters. Here's the section code for slideshow.liquid:
{%- if section.settings.hero_home_height == 'adapt' -%} {%- comment -%} 'min_aspect_ratio' is the minimum aspect ratio of images shown without whitespace when 'hero_home_height' is set to 'adapt'. The aspect ratio values for the first image in the slideshow will be used unless it is blank, in that case a ratio of 2:1 will be used. {%- endcomment -%} {%- assign first_block = section.blocks[0] -%} {%- if first_block.settings.image.aspect_ratio == blank -%} {%- assign min_aspect_ratio = 2.0 -%} {%- else -%} {%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%} {%- endif -%} {% assign wrapper_height = 100 | divided_by: min_aspect_ratio %} {%- endif -%} {% if section.blocks.size > 0 %} <div class="hero-wrapper hero-wrapper--{{ section.settings.hero_home_height }}" role="region" aria-label="slideshow" aria-describedby="a11y-slideshow-info"> <div class="hero hero--{{ section.settings.hero_home_height }}{% if section.settings.hero_home_height == 'adapt' %} hero--adapt-height page-width{% endif %}" id="Slideshow-{{ section.id }}" data-section-id="{{ section.id }}" data-section-type="slideshow" data-autoplay="{{ section.settings.hero_home_auto }}" data-adapt-height="{% if section.settings.hero_home_height == 'adapt' %}true{% else %}false{% endif %}" data-speed="{{ section.settings.hero_home_auto_speed | times: 1000 }}" {% if section.settings.hero_home_height == 'adapt' %}data-min-aspect-ratio="{{ min_aspect_ratio }}" style="height: {{- wrapper_height -}}vw"{% endif %}> {%- for block in section.blocks -%} <div class="hero__slide hero__slide--{{ block.id }}" {{ block.shopify_attributes }}> <div class="hero__image-content"> {%- if block.settings.image != blank -%} <noscript> <div class="hero__image hero__image--{{ block.id }}"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div> </noscript> {% assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %} {% assign mobile_img_url = block.settings.mobile_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %} <img class="hero__image hero__image--{{ block.id }} lazyload {% unless forloop.first == true %} lazypreload{% endunless %} hidden-mobile" {% if forloop.first == true %} src="{{ block.settings.image | img_url: '300x' }}" {% endif %} data-src="{{ img_url }}" data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]" data-aspectratio="{{ block.settings.image.aspect_ratio }}" data-sizes="auto" data-parent-fit="cover" alt="{{ block.settings.image.alt | escape }}" style="object-position: {{ block.settings.image_position }}"> <img class="hero__image hero__image--{{ block.id }} lazyload {% unless forloop.first == true %} lazypreload{% endunless %} hidden-desktop" {% if forloop.first == true %} src="{{ block.settings.mobile_image | img_url: '300x' }}" {% endif %} data-src="{{ mobile_img_url }}" data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]" data-aspectratio="{{ block.settings.image.aspect_ratio }}" data-sizes="auto" data-parent-fit="cover" alt="{{ block.settings.image.alt | escape }}" style="object-position: {{ block.settings.image_position }}"> {%- else -%} {%- if block.settings.image == blank -%} <div class="placeholder-background"> {% capture current %}{% cycle 1, 2 %}{% endcapture %} {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }} </div> {%- endif -%} {%- endif -%} </div> </div> {%- endfor -%} </div> <div class="hero-content"> <div class="page-width"> <div class="hero-content__title-wrapper"> {%- if section.settings.hero_home_height == 'adapt' -%} <div class="hero-content__inner-text"> {%- endif -%} {%- for block in section.blocks -%} {%- unless block.settings.title == blank -%} <h2 data-slide-id="{{ forloop.index }}" class="hero-content__title h1{% if section.blocks.size == 1 %} hero-title-active{% endif %}"> {{ block.settings.title | escape }} </h2> {%- endunless -%} {%- endfor -%} {%- if section.settings.hero_home_height == 'adapt' -%} </div> {%- endif -%} </div> {%- if section.settings.hero_home_height == 'adapt' -%} <div class="hero-content__inner-controls"> {%- endif -%} <div class="hero-content__controls"> {%- if section.blocks.size > 1 -%} <div class="hero-content__controls-item hero-content__controls-item--count" aria-label="{{ 'homepage.hero.slide_number' | t: slide_number: '[slide_number]' }}"> <span class="slide-counter" aria-hidden="true">1/{{ section.blocks.size }}</span> </div> {%- if section.settings.hero_home_auto -%} <div class="hero-content__controls-item hero-content__controls-item--pause"> <button type="button" class="hero__pause" aria-live="polite" aria-label="{{ 'homepage.hero.pause_slideshow' | t }}" aria-pressed="false" data-label-pause="{{ 'homepage.hero.pause_slideshow' | t }}" data-label-play="{{ 'homepage.hero.play_slideshow' | t }}"> <span class="hero-toggle-stop"> {% include 'icon-pause' %} <span class="icon__fallback-text">{{ 'homepage.hero.pause_slideshow' | t }}</span> </span> <span class="hero-toggle-play"> {% include 'icon-play' %} <span class="icon__fallback-text">{{ 'homepage.hero.play_slideshow' | t }}</span> </span> </button> </div> {%- endif -%} <ul class="hero-content-navigation"> <li class="hero-content-navigation__item hero-content__controls-item hero-content__controls-item--arrow"> <button class="text" type="button" data-control="previous" aria-label="{{ 'homepage.hero.previous_slide' | t }}"> {% include 'icon-arrow-left' %} <span class="icon__fallback-text">{{ 'homepage.hero.previous_slide' | t }}</span> </button> </li> <li class="hero-content-navigation__item hero-content__controls-item hero-content__controls-item--arrow"> <button class="text" type="button" data-control="next" aria-label="{{ 'homepage.hero.next_slide' | t }}"> {% include 'icon-arrow-right' %} <span class="icon__fallback-text">{{ 'homepage.hero.next_slide' | t }}</span> </button> </li> </ul> {%- endif -%} {%- for block in section.blocks -%} {%- if block.settings.button_label != blank and block.settings.button_link != blank -%} <a data-slide-id="{{ forloop.index }}" href="{{ block.settings.button_link }}" class="hero-content__controls-item hero-content__controls-item--text{% if section.blocks.size == 1 %} hero-link-active{% endif %}"> {{ block.settings.button_label | escape }} <span aria-hidden="true">→</span> </a> {%- endif -%} {%- endfor -%} {%- if section.settings.hero_home_height == 'adapt' -%} </div> {%- endif -%} </div> </div> </div> </div> {% endif %} {% if section.blocks.size == 0 %} {% include 'no-blocks' %} {% endif %} {% schema %} { "name": { "da": "Diasshow", "de": "Slideshow", "en": "Slideshow", "es": "Diapositivas", "fi": "Diaesitys", "fr": "Diaporama", "hi": "स्लाइडशो", "it": "Presentazione", "ja": "スライドショー", "ko": "슬라이드 쇼", "ms": "Tayangan slaid", "nb": "Lysbildefremvisning", "nl": "Diavoorstelling", "pt-BR": "Apresentação de slides", "pt-PT": "Apresentação de diapositivos", "sv": "Bildspel", "th": "สไลด์โชว์", "zh-CN": "幻灯片", "zh-TW": "投影片輪播" }, "class": "shopify-section--slideshow", "max_blocks": 4, "settings": [ { "type": "select", "id": "hero_home_height", "label": { "da": "Diashøjde", "de": "Diahöhe", "en": "Slide height", "es": "Altura de diapositiva", "fi": "Dian korkeus", "fr": "Hauteur de la diapositive", "hi": "स्लाइड ऊंचाई", "it": "Altezza slide", "ja": "スライドの高さ", "ko": "슬라이드 높이", "ms": "Ketinggian slaid", "nb": "Lysbildehøyde", "nl": "Diahoogte", "pt-BR": "Altura do slide", "pt-PT": "Altura do diapositivo", "sv": "Bildhöjd", "th": "ความสูงของสไลด์", "zh-CN": "幻灯片高度", "zh-TW": "投影片高度" }, "default": "small", "info": { "da": "Få mere at vide om [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).", "de": "Erfahren Sie mehr über die [Richtlinien für Slideshows](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)", "en": "Learn more about [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).", "es": "Más información sobre [pautas de presentación de diapositivas](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).", "fi": "Lisätietoja [diaesitysohjeet](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).", "fr": "En savoir plus sur [directives de diaporama](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)", "hi": "[स्लाइड शो दिशानिर्देश](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific) के बारे में अधिक जानें.", "it": "Maggiori informazioni sulle [linee guida per le presentazioni](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).", "ja": "[スライドショーのガイドライン](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)に関する詳細情報はこちら。", "ko": "[슬라이드 쇼 가이드라인에 대해 자세히 알아보기](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)", "ms": "Ketahui lebih lanjut tentang [garis panduan tayangan slaid](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).", "nb": "Finn ut mer om [retningslinjer for lysbilder](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).", "nl": "Meer informatie over [richtlijnen voor diavoorstellingen](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).", "pt-BR": "Saiba mais sobre [diretrizes de apresentação de slides](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)", "pt-PT": "Saiba mais sobre [diretrizes de apresentação de diapositivos](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).", "sv": "Läs mer om [bildspelets riktlinjer](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific).", "th": "ดูข้อมูลเพิ่มเติมเกี่ยวกับ [แนวทางสไลด์โชว์](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)", "zh-CN": "详细了解 [幻灯片指南](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)", "zh-TW": "深入瞭解 [投影片輪播準則](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/venture#slideshow-sections-specific)。" }, "options": [ { "value": "small", "label": { "da": "Lille", "de": "Klein", "en": "Small", "es": "Pequeño", "fi": "Pieni", "fr": "Petite", "hi": "छोटा", "it": "Piccolo", "ja": "小", "ko": "스몰", "ms": "Kecil", "nb": "Liten", "nl": "Klein", "pt-BR": "Pequeno", "pt-PT": "Pequeno", "sv": "Liten", "th": "เล็ก", "zh-CN": "小", "zh-TW": "小型" } }, { "value": "large", "label": { "da": "Stor", "de": "Groß", "en": "Large", "es": "Grande", "fi": "Suuri", "fr": "Grande", "hi": "बड़ा", "it": "Grande", "ja": "大", "ko": "라지", "ms": "Besar", "nb": "Stor", "nl": "Groot", "pt-BR": "Grande", "pt-PT": "Grande", "sv": "Stor", "th": "ใหญ่", "zh-CN": "大", "zh-TW": "大型" } }, { "value": "adapt", "label": { "da": "Tilpas til første side", "de": "An erstes Bild anpassen", "en": "Adapt to first image", "es": "Adaptar a la primera imagen", "fi": "Mukauta ensimmäisen kuvan mukaan", "fr": "Adapter à la première image", "hi": "पहली इमेज को अनुकूल बनाएं", "it": "Adatta alla prima immagine", "ja": "最初の画像に適応する", "ko": "첫 번째 이미지에 맞춤", "ms": "Menyesuaikan kepada imej pertama", "nb": "Tilpass etter første bilde", "nl": "Aanpassen aan eerste afbeelding", "pt-BR": "Adaptar à primeira imagem", "pt-PT": "Adaptar à primeira imagem", "sv": "Anpassa efter första bilden", "th": "ปรับให้เข้ากับรูปภาพแรก", "zh-CN": "适应第一张图片", "zh-TW": "配合第一張圖片" } } ] }, { "type": "checkbox", "id": "hero_home_auto", "label": { "da": "Roter automatisk slides", "de": "Auto-rotieren der Slides", "en": "Auto-rotate slides", "es": "Rotar las diapositivas automáticamente", "fi": "Käännä diat automaattisesti", "fr": "Rotation automatique des diapositives", "hi": "ऑटो-रोटेट स्लाइड", "it": "Ruota slide automaticamente", "ja": "スライドの自動切り替え", "ko": "슬라이드 자동 회전", "ms": "Slaid auto putar", "nb": "Autoroter lysbildene", "nl": "Dia's automatisch draaien", "pt-BR": "Rodar os slides automaticamente", "pt-PT": "Reprodução automática de diapositivos", "sv": "Auto-rotera bilder", "th": "หมุนสไลด์อัตโนมัติ", "zh-CN": "自动旋转幻灯片", "zh-TW": "自動旋轉投影片" }, "default": false }, { "type": "range", "id": "hero_home_auto_speed", "label": { "da": "Skift slide hver", "de": "Slides überall ändern", "en": "Change slides every", "es": "Cambiar diapositivas cada", "fi": "Vaihda diat joka", "fr": "Changer de diapositive toutes les", "hi": "प्रत्येक स्लाइड बदलें", "it": "Cambia slide ogni", "ja": "スライドを変更する間隔", "ko": "슬라이드를 매번 변경", "ms": "Ubah slaid setiap", "nb": "Endre lysbilde hvert", "nl": "Wijzig dia's elke", "pt-BR": "Mudar os slides a cada", "pt-PT": "Mudar diapositivos a cada", "sv": "Byt bilder varje", "th": "เปลี่ยนสไลด์ทุก", "zh-CN": "幻灯片更改时间间隔", "zh-TW": "每過以下時間即變更投影片" }, "max": 9, "min": 3, "step": 2, "unit": { "da": " s", "de": " s", "en": " s", "es": " s", "fi": " s", "fr": " s", "hi": " s", "it": " s", "ja": " s", "ko": " s", "ms": " s", "nb": " s", "nl": " s", "pt-BR": " s", "pt-PT": " s", "sv": " s", "th": " s", "zh-CN": " s", "zh-TW": " s" }, "default": 5 } ], "presets": [ { "name": { "da": "Diasshow", "de": "Slideshow", "en": "Slideshow", "es": "Diapositivas", "fi": "Diaesitys", "fr": "Diaporama", "hi": "स्लाइडशो", "it": "Presentazione", "ja": "スライドショー", "ko": "슬라이드 쇼", "ms": "Tayangan slaid", "nb": "Lysbildefremvisning", "nl": "Diavoorstelling", "pt-BR": "Apresentação de slides", "pt-PT": "Apresentação de diapositivos", "sv": "Bildspel", "th": "สไลด์โชว์", "zh-CN": "幻灯片", "zh-TW": "投影片輪播" }, "category": { "da": "Billede", "de": "Bild", "en": "Image", "es": "Imagen", "fi": "Kuva", "fr": "Image", "hi": "इमेज", "it": "Immagine", "ja": "画像", "ko": "이미지", "ms": "Imej", "nb": "Bilde", "nl": "Afbeelding", "pt-BR": "Imagem", "pt-PT": "Imagem", "sv": "Bild", "th": "รูปภาพ", "zh-CN": "图片", "zh-TW": "圖片" }, "settings": { "hero_home_auto": false, "hero_home_auto_speed": 5 }, "blocks": [ { "type": "slide" }, { "type": "slide" } ] } ], "blocks": [ { "type": "slide", "name": { "da": "Slide", "de": "Folie", "en": "Slide", "es": "Diapositiva", "fi": "Dia", "fr": "Diapositive", "hi": "स्लाइड", "it": "Scorrimento", "ja": "スライド", "ko": "슬라이드", "ms": "Slaid", "nb": "Lysbilde", "nl": "Dia", "pt-BR": "Slide", "pt-PT": "Diapositivo", "sv": "Bild", "th": "สไลด์", "zh-CN": "幻灯片", "zh-TW": "投影片" }, "settings": [ { "type": "image_picker", "id": "image", "label": { "da": "Billede", "de": "Foto", "en": "Image", "es": "Imagen", "fi": "Kuva", "fr": "Image", "hi": "इमेज", "it": "Immagine", "ja": "画像", "ko": "이미지", "ms": "Imej", "nb": "Bilde", "nl": "Afbeelding", "pt-BR": "Imagem", "pt-PT": "Imagem", "sv": "Bild", "th": "รูปภาพ", "zh-CN": "图片", "zh-TW": "圖片" } }, { "type": "image_picker", "id": "mobile_image", "label": { "da": "Billede", "de": "Foto", "en": "Mobile Image", "es": "Imagen", "fi": "Kuva", "fr": "Image", "hi": "इमेज", "it": "Immagine", "ja": "画像", "ko": "이미지", "ms": "Imej", "nb": "Bilde", "nl": "Afbeelding", "pt-BR": "Imagem", "pt-PT": "Imagem", "sv": "Bild", "th": "รูปภาพ", "zh-CN": "图片", "zh-TW": "圖片" } }, { "type": "select", "id": "image_position", "label": { "da": "Placering af billede", "de": "Bildposition", "en": "Image position", "es": "Posición de la imagen", "fi": "Kuvan sijainti", "fr": "Position de l'image", "hi": "इमेज स्थिति", "it": "Posizione Immagine", "ja": "画像の位置", "ko": "이미지 위치", "ms": "Kedudukan imej", "nb": "Bildeposisjon", "nl": "Afbeeldingspositie", "pt-BR": "Posição da imagem", "pt-PT": "Posição da imagem", "sv": "Bildposition", "th": "ตำแหน่งรูปภาพ", "zh-CN": "图片位置", "zh-TW": "圖片位置" }, "default": "center center", "options": [ { "label": { "da": "Øverst til venstre", "de": "Oben links", "en": "Top left", "es": "Arriba a la izquierda", "fi": "Ylhäällä vasemmalla", "fr": "En haut à gauche", "hi": "शीर्ष पर बाईं ओर", "it": "In alto a sinistra", "ja": "左上", "ko": "왼쪽 상단", "ms": "Kiri atas", "nb": "Øverst til venstre", "nl": "Linksboven", "pt-BR": "Superior esquerdo", "pt-PT": "Canto superior esquerdo", "sv": "Överst till vänster", "th": "ซ้ายบน", "zh-CN": "左上方", "zh-TW": "左上角" }, "value": "left top" }, { "label": { "da": "Øverst i midten", "de": "Oben zentriert", "en": "Top center", "es": "Centrar arriba", "fi": "Keskellä ylhäällä", "fr": "En haut au centre", "hi": "शीर्ष केंद्र", "it": "In alto al centro", "ja": "中央上", "ko": "맨 위 중간", "ms": "Tengah-tengah atas", "nb": "Toppsentrert", "nl": "Midden boven", "pt-BR": "Superior centro", "pt-PT": "Superior centro", "sv": "Längst upp i mitten", "th": "กลางบน", "zh-CN": "顶部居中", "zh-TW": "中央上方" }, "value": "center top" }, { "label": { "da": "Øverst til højre", "de": "Oben rechts", "en": "Top right", "es": "Arriba a la derecha", "fi": "Ylhäällä oikealla", "fr": "En haut à droite", "hi": "शीर्ष पर दाईं ओर", "it": "In alto a destra", "ja": "右上", "ko": "오른쪽 상단", "ms": "Kanan atas", "nb": "Øverst til høyre", "nl": "Rechtsboven", "pt-BR": "Superior direito", "pt-PT": "Canto superior direito", "sv": "Överst till höger", "th": "ขวาบน", "zh-CN": "右上方", "zh-TW": "右上角" }, "value": "right top" }, { "label": { "da": "Midt på til venstre", "de": "Mittig links", "en": "Middle left", "es": "Centro a la izquierda", "fi": "Keskellä vasemmalla", "fr": "Au milieu à gauche", "hi": "मध्य में बाईं ओर", "it": "Centrale a sinistra", "ja": "中央左", "ko": "왼쪽 중간", "ms": "Kiri tengah", "nb": "Midt til venstre", "nl": "Midden links", "pt-BR": "Meio esquerdo", "pt-PT": "Intermédio à esquerda", "sv": "Mitten till vänster", "th": "ซ้ายกลาง", "zh-CN": "中间居左", "zh-TW": "中央左方" }, "value": "left center" }, { "label": { "da": "Midt på centreret", "de": "Mittig zentriert", "en": "Middle center", "es": "Centro", "fi": "Keskellä keskellä", "fr": "Centré au milieu", "hi": "मध्य केंद्र", "it": "Al centro", "ja": "中央中", "ko": "가운데 중간", "ms": "Tengah-tengah", "nb": "Midt i senter", "nl": "Midden centrum", "pt-BR": "Meio centro", "pt-PT": "Intermédio ao centro", "sv": "Mitten centrerat", "th": "กึ่งกลาง", "zh-CN": "中间居中", "zh-TW": "正中央" }, "value": "center center" }, { "label": { "da": "Midt på til højre", "de": "Mittig rechts", "en": "Middle right", "es": "Centro a la derecha", "fi": "Keskellä oikealla", "fr": "Au milieu à droite", "hi": "मध्य में दाईं ओर", "it": "Centrale a destra", "ja": "中央右", "ko": "오른쪽 중간", "ms": "Kanan tengah", "nb": "Midt til høyre", "nl": "Midden rechts", "pt-BR": "Meio direito", "pt-PT": "Intermédio à direita", "sv": "Mitten till höger", "th": "ขวากลาง", "zh-CN": "中间居右", "zh-TW": "中央右方" }, "value": "right center" }, { "label": { "da": "Nederst til venstre", "de": "Unten links", "en": "Bottom left", "es": "Abajo a la izquierda", "fi": "Alhaalla vasemmalla", "fr": "En bas à gauche", "hi": "सबसे नीचे बाईं ओर", "it": "In basso a sinistra", "ja": "左下", "ko": "왼쪽 하단", "ms": "Kiri bawah", "nb": "Nederst til venstre", "nl": "Linksonder", "pt-BR": "Inferior esquerdo", "pt-PT": "Canto inferior esquerdo", "sv": "Nere till vänster", "th": "ซ้ายล่าง", "zh-CN": "左下方", "zh-TW": "左下角" }, "value": "left bottom" }, { "label": { "da": "Nederst i midten", "de": "Unten zentriert", "en": "Bottom center", "es": "Centro abajo", "fi": "Keskellä alhaalla", "fr": "En bas au centre", "hi": "निचला केंद्र", "it": "In basso al centro", "ja": "中央下", "ko": "맨아래 중간", "ms": "Tengah bawah", "nb": "Bunnsentrert", "nl": "Midden onder", "pt-BR": "Inferior centro", "pt-PT": "Inferior centro", "sv": "Längst ner i mitten", "th": "กลางล่าง", "zh-CN": "底部居中", "zh-TW": "中央下方" }, "value": "center bottom" }, { "label": { "da": "Nederst til højre", "de": "Unten rechts", "en": "Bottom right", "es": "Abajo a la derecha", "fi": "Alhaalla oikealla", "fr": "En bas à droite", "hi": "सबसे नीचे दाईं ओर", "it": "In basso a destra", "ja": "右下", "ko": "오른쪽 아래", "ms": "Kanan bawah", "nb": "Nederst til høyre", "nl": "Rechtsonder", "pt-BR": "Inferior direito", "pt-PT": "Canto inferior direito", "sv": "Nere till höger", "th": "ขวาล่าง", "zh-CN": "右下方", "zh-TW": "右下角" }, "value": "right bottom" } ] }, { "type": "header", "content": { "da": "Tekst", "de": "Textfarbe", "en": "Text", "es": "texto", "fi": "Teksti", "fr": "Couleur du texte", "hi": "टेक्स्ट", "it": "Testo", "ja": "テキスト", "ko": "텍스트", "ms": "Teks", "nb": "Tekst", "nl": "Tekst", "pt-BR": "Texto", "pt-PT": "Texto", "sv": "Text", "th": "ข้อความ", "zh-CN": "文本", "zh-TW": "文字" } }, { "type": "text", "id": "title", "label": { "da": "Overskrift", "de": "Titel", "en": "Heading", "es": "Título", "fi": "Otsake", "fr": "Titre", "hi": "शीर्षक", "it": "Heading", "ja": "見出し", "ko": "제목", "ms": "Tajuk", "nb": "Overskrift", "nl": "Kop", "pt-BR": "Título", "pt-PT": "Título", "sv": "Rubrik", "th": "ส่วนหัว", "zh-CN": "标题", "zh-TW": "標題" }, "default": { "da": "Slide", "de": "Folie", "en": "Slide", "es": "Diapositiva", "fi": "Dia", "fr": "Diapositive", "hi": "स्लाइड", "it": "Scorrimento", "ja": "スライド", "ko": "슬라이드", "ms": "Slaid", "nb": "Lysbilde", "nl": "Dia", "pt-BR": "Slide", "pt-PT": "Diapositivo", "sv": "Bild", "th": "สไลด์", "zh-CN": "幻灯片", "zh-TW": "投影片" } }, { "type": "text", "id": "button_label", "label": { "da": "Knapetiket", "de": "Schaltflächenbezeichnung", "en": "Button label", "es": "Etiqueta de botón", "fi": "Painikkeen merkintä", "fr": "Texte du bouton", "hi": "बटन लेबल", "it": "Etichetta pulsante", "ja": "ボタンラベル", "ko": "버튼 레이블", "ms": "Label butang", "nb": "Knappetikett", "nl": "Knoplabel", "pt-BR": "Etiqueta do botão", "pt-PT": "Etiqueta do botão", "sv": "Knappetikett", "th": "ป้ายกำกับปุ่ม", "zh-CN": "按钮标签", "zh-TW": "按鈕標籤" }, "default": { "da": "Se alle produkter", "de": "Alle Produkte ansehen", "en": "View all products", "es": "Ver todos los productos", "fi": "Näytä kaikki tuotteet", "fr": "Afficher tous les résultats de produits", "hi": "सभी उत्पाद देखें", "it": "Visualizza tutti i prodotti", "ja": "すべての商品を表示する", "ko": "모든 제품보기", "ms": "Lihat semua produk", "nb": "Vis alle produktene", "nl": "Alle producten bekijken", "pt-BR": "Exibir todos os produtos", "pt-PT": "Mostrar todos os produtos", "sv": "Visa alla produkter", "th": "ดูสินค้าทั้งหมด", "zh-CN": "查看所有产品", "zh-TW": "檢視所有產品" } }, { "type": "url", "id": "button_link", "label": { "da": "Knaplink", "de": "Schaltflächenlink", "en": "Button link", "es": "Enlace de botón", "fi": "Painikkeen linkki", "fr": "Lien du bouton", "hi": "बटन लिंक", "it": "Link pulsante", "ja": "ボタンリンク", "ko": "버튼 링크", "ms": "Pautan butang", "nb": "Kobling for knapp", "nl": "Knoplink", "pt-BR": "Link do botão", "pt-PT": "Ligação do botão", "sv": "Knapplänk", "th": "ลิงก์ของปุ่ม", "zh-CN": "按钮链接", "zh-TW": "按鈕連結" } } ] } ] } {% endschema %}
Then add this to bottom of your theme.scss.liquid file in your assets folder:
.slick-slide .hero__image-content img.hero__image.hidden-mobile { display: block; } .slick-slide .hero__image-content img.hero__image.hidden-desktop { display: none; } .hero { height: auto; } @media (max-width:750px){ .slick-slide .hero__image-content img.hero__image.hidden-mobile { display: none; } .slick-slide .hero__image-content img.hero__image.hidden-desktop { display: block; } }
Now in each of your slides you should be able to pick a separate mobile image.
Hi @Ninthony ,
I'm using the theme Minimal with Flexslider with my website www.narrawatches.com, and I'm also a beginner at liquid and coding in general. I think I was able to mostly follow the code logic for Slickslider in Debut, wherein I was able to show the mobile image picker on theme customizer and I was able to except for the last part in the theme.scss, particularly this part
.slick-slide .hero__image-content img.hero__image.hidden-mobile { display: block; } .slick-slide .hero__image-content img.hero__image.hidden-desktop { display: none; } .hero { height: auto; } @media (max-width:750px){ .slick-slide .hero__image-content img.hero__image.hidden-mobile { display: none; } .slick-slide .hero__image-content img.hero__image.hidden-desktop { display: block; } }
I can't seem to replicate this in Flexslider or figure out the necessary code that would hide the second slideshow banner for flexslider.
Basically the current end result is me having one slideshow directly below the other slideshow, with the main image showing on all formats, including mobile view as I haven't been able to bring out the mobile view on mobile screens or hide the other slideshow in the assets theme.
Any help would be greatly appreciated! Thank you and I also learned quite a lot reading this thread.
Yeah the class names are likely not the same in any other theme other than Venture. You can send me a private message with your site and password if password protected so I can inspect and see what class names you need.
Hey @Ninthony , hope you don't mind me jumping in on this but i've been looking for a solution to this also and noticed this thread is still active. Not sure if you've had a PM yet but could I ping you mine to have a look also? (Running Minimal theme too!)
Since @chugsy and @narrawatches are both using Minimal, I'll take a look at the slideshow section for minimal and see how much trouble it'll be to get the swap working for the default Minimal theme. I'll report back when I get the time as I currently have something pressing to deal with, probably going to take up a good chunk of my week. I will let you both know by direct message when I take a look and if I find a solution I'll post it here as well.
Thanks @Ninthony much appreciated. Take as much time as you need understand you have other things on your plate! Can manage in the meantime 🙂
How would you handle it @DariusWS? Typically on my website's I'll use the picture element and source elements to swap out my images, but due to having a fallback for older browsers the fallback is always downloaded anyway, so two images are still downloaded:
<picture> <source media="(min-width: 767px)" srcset="/path-for-double-resolution-desktop-image.jpg 2x, /path-for-normal-resolution-desktop-image.jpg"> <source media="(min-width: 320px)" srcset="/path-for-double-resolution-mobile-image.jpg 2x, /path-for-normal-resolution-mobile-image.jpg"> <img src="/path-for-fallback-image.jpg" alt="Some alt text for SEO"> </picture>
In this case on screens larger than 767px would download the normal resolution desktop image as well as the fallback image. The only way I really know around this is to have a parent div of an element and set a background image for the child and set the parent div to display none:
<style> .child { background-image: url('/path-to-image.jpg') } .parent { display: none; } </style> <div class="parent"> <div class="child"> </div> </div>
Personally I find working with background images irritating because you always have to give them a width and height, and for my general use I want the image to define the dimensions of the container.
I know there are some way to avoid the image loading with the picture element by using <object> or <embed> instead of <img>, but it's hacky. I would like to hear your approach though if it can make me a better developer.
Most of all, these solutions are an attempt to make it as easy as possible for the users who aren't too familiar with HTML or CSS to achieve what they want to do and arent too concerned with the background processes, as well as easier on myself by not having to rewrite theme code to work with picture elements or background images if they don't already use them.
I would not worry too much about it, since images are lazy-loaded anyway.
Probably worth spending some extra time to tweak lazysizes and try with src attributes removed, but this is nit-picking -- those 300x300 images are not that big to cause any delays.
I think I've found a workaround to my problem. I've made a new copy of slider.liquid and added this code to the two slider.liquid files
@media (max-width: 768px){ .index-section.slideshow-section { display: none; } }
I changed the index-section.slideshow-section of the second slider.liquid into another name, and for the second slider.liquid i changed it from max-width to min-width.
This effectively hides one slideshow if its in a screen with less than 768px width, and hides the other one if the screen is wider. I would love to hear what you think in terms of load efficiency (i don't know if this will make my site load slower, if it will have to load both the slideshows despite only showing one, I haven't tested it yet), but I think it should solve my problem and make me select nicer photos to optimize for a mobile and desktop experience.
Hi @Ninthony
Noticed you'd taken a look for both @chugsy and @narrawatches on Minimal Theme.
I don't seem to be able to find the relevant areas on Minimal to make this work at www.AvecEnvie.com
I've also run through this process without joy (although this is for the Pipeline theme): https://help.groupthought.com/article/351-banner-custom-mobile-only-and-desktop-only-banner-sections
Any help much appreciated,
Avec
Hi @Ninthony
Could you post a solution for the Debut theme please.
I tried aligning this with the new Debut theme but no luck...
Much appreciated.
Regards,
Hi @Ninthony
I was just wondering if you found a solution for using different slideshow images for mobile and desktop for the Minimal theme as mentioned here for @chugsy and @narrawatches. I tried to figure out how to edit the code based on what you gave for other themes in this thread but I couldn't for the life of me figure out where to change the code. I know you've been bombarded with questions on this but any help would be much appreciated.
@Ninthony Thank you for posting this. I've tried adapting this to my brooklyn theme and I'm getting close!
I have managed to show the image mobile picker and upload it, however when switching to mobile it doesn't actually show the new image.
Can you please give me a few pointers?
My slideshow.liquid is:
{%- if section.settings.home_hero_height == 'adapt' -%} {% comment %} 'min_aspect_ratio' is the minimum aspect ratio of images shown without whitespace when 'home_hero_height' is set to 'adapt'. The aspect ratio values for the first image in the slideshow will be used unless it is blank, in that case a ratio of 2:1 will be used. {% endcomment %} {%- assign first_block = section.blocks[0] -%} {%- if first_block.settings.image.aspect_ratio == blank -%} {%- assign min_aspect_ratio = 2.0 -%} {%- else -%} {%- assign min_aspect_ratio = first_block.settings.image.aspect_ratio -%} {%- endif -%} {%- assign wrapper_height = 100 | divided_by: min_aspect_ratio -%} {% comment %} Change the hero slideshow's dots color based on the slides' text color. {% endcomment %} {%- style -%} .hero-{{ section.id }} { height: {{- wrapper_height -}}vw !important; overflow: hidden; } .hero-{{ section.id }} .slick-track, .hero-{{ section.id }} .slideshow__overlay:before { height: {{- wrapper_height -}}vw; } {%- endstyle -%} {%- endif -%} <div id="HeroWrapper-{{ section.id }}"{% if section.settings.home_hero_height == 'adapt' %} class="hero--adapt"{% endif %} data-section-id="{{ section.id }}" data-section-type="slideshow-section"> {%- if section.blocks.size > 0 -%} <div class="hero-{{ section.id }} hero" id="Hero-{{ section.id }}" aria-label="slideshow" aria-describedby="a11y-slideshow-info" tabindex="-1" role="region" data-autoplay="{{ section.settings.hero_home_auto }}" data-autoplayspeed="{{ section.settings.home_hero_auto_speed | times: 1000 }}" data-adapt="{% if section.settings.home_hero_height == 'adapt' %}true{% else %}false{% endif %}" data-slide-nav-a11y="{{ 'home_page.slideshow.load_slide' | t: slide_number: '[slide_number]' }}" data-slide-nav-active-a11y="{{ 'home_page.slideshow.active_slide' | t: slide_number: '[slide_number]' }}" data-slide-index="0"> {%- for block in section.blocks -%} {%- style -%} #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .hero__pause, #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .hero__pause .icon:before, #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .slick-prev .icon:before, #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .slick-next .icon:before, #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .slide--{{ block.id }} { color: {{ block.settings.slide_text_color }}; } #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .slick-dots li a:before { background: transparent; border-color: {{ block.settings.slide_text_color }}; } #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} li.slick-active a:before { background: {{ block.settings.slide_text_color }}; border-color: transparent; } #HeroWrapper-{{ section.id }} .hero--color-{{ forloop.index0 }} .hero__pause .icon { fill: {{ block.settings.slide_text_color }}; } #HeroWrapper-{{ section.id }} .slide--{{ block.id }} .hero__text-wrap { text-align: {{ block.settings.text_alignment }} } {%- endstyle -%} {%- comment -%} Apply a color overlay on a per-slide basis. The overlay is defined by a linear gradient with 4 points along it. The last 3 points cause the bottom of the overlay to be more opaque, in order to increase contrast with the controls for a11y purposes. Remove the 'background-image' style below and change to the following to remove the gradient: background-color: {{ block.settings.image_overlay }}; opacity: {{ block.settings.image_overlay_opacity | divided_by: 100.00 }}; {%- endcomment -%} {%- if block.settings.image_overlay -%} {%- style -%} .slide--{{ block.id }} .slideshow__overlay:before { {%- assign opacity_alpha = block.settings.image_overlay_opacity | divided_by: 100.00 -%} {%- assign opacity_alpha_3 = opacity_alpha | plus: 0.25 | at_most: 1.0 -%} {%- assign opacity_alpha_2 = opacity_alpha_3 | minus: opacity_alpha | divided_by: 2.0 | plus: opacity_alpha -%} background-image: linear-gradient(to bottom, {{ '#000' | color_modify: 'alpha', opacity_alpha }}, {{ '#000' | color_modify: 'alpha', opacity_alpha }} calc(100% - 150px), {{ '#000' | color_modify: 'alpha', opacity_alpha_2 }} calc(100% - 60px), {{ '#000' | color_modify: 'alpha', opacity_alpha_3 }}); } {%- endstyle -%} {%- endif -%} <div class=" hero__slide slide--{{ block.id }}{% if block.settings.image == blank %} slide--placeholder{% endif %}" data-hero-slide {{ block.shopify_attributes }}> {%- if block.settings.image == blank -%} <div class="placeholder-background"> {%- capture current -%}{% cycle 1, 2 %}{%- endcapture -%} {{ 'lifestyle-' | append: current | placeholder_svg_tag: 'placeholder-svg' }} </div> {%- else -%} <noscript> {%- if forloop.first == true -%} <div class="hero__image-no-js"{% if block.settings.image %} style="background-image: url('{{ block.settings.image | img_url: '2048x' }}');"{% endif %}></div> {%- endif -%} </noscript> {%- assign img_url = block.settings.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {%- assign mobile_img_url = block.settings.mobile_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} <img class="hero__image hero__image--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %} hidden-mobile" {%- if forloop.first == true -%} src="{{ block.settings.image | img_url: '300x' }}" {%- endif -%} data-src="{{ img_url }}" data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]" data-aspectratio="{{ block.settings.image.aspect_ratio }}" data-sizes="auto" data-parent-fit="cover" data-hero-image alt="{{ block.settings.image.alt | escape }}" style="object-position: {{ block.settings.image_position }}"> <img class="hero__image hero__image--{{ block.id }} lazyload fade-in{% unless forloop.first == true %} lazypreload{% endunless %} hidden-desktop" {%- if forloop.first == true -%} src="{{ block.settings.mobile_image | img_url: '300x' }}" {%- endif -%} data-src="{{ mobile_img_url }}" data-widths="[540, 720, 900, 1080, 1296, 1512, 1728, 1944, 2048, 4472]" data-aspectratio="{{ block.settings.image.aspect_ratio }}" data-sizes="auto" data-parent-fit="cover" data-hero-image alt="{{ block.settings.image.alt | escape }}" style="object-position: {{ block.settings.image_position }}"> {%- endif -%} <div class="slider-desktop hero__text-wrap{% if block.settings.image_overlay %} slideshow__overlay{% endif %}"> <div class="hero__text-align wrapper"> <div class="hero__text-content" data-hero-text-content> {%- unless block.settings.slide_subheading == blank -%} <p class="hero__subtitle"> {{ block.settings.slide_subheading | escape }} </p> {%- endunless -%} {%- unless block.settings.slide_heading == blank -%} <h2 class="hero__title h1"> {{ block.settings.slide_heading | escape }} </h2> {%- endunless -%} {%- if block.settings.button_label != blank and block.settings.button_link != blank -%} <a href="{{ block.settings.button_link }}" style="color: {{ block.settings.slide_button_label_color }}; background-color: {{ block.settings.slide_button_background_color }}" class="btn hero__cta"> {{ block.settings.button_label | escape }} </a> {%- endif -%} </div> </div> </div> </div> {%- endfor -%} {%- if section.blocks.size > 1 -%} <div class="hero__controls wrapper"> {%- if section.settings.hero_home_auto -%} <button class="hero__pause" aria-live="polite" aria-label="{{ 'home_page.slideshow.pause' | t }}" data-label-pause="{{ 'home_page.slideshow.pause' | t }}" data-label-play="{{ 'home_page.slideshow.play' | t }}" data-pause> <span class="icon icon-pause" aria-hidden="true"></span> <span class="icon icon-play" aria-hidden="true"></span> </button> {%- endif -%} <ul> <li> <button class="slick-prev" aria-label="{{ 'home_page.slideshow.previous_slide' | t }}" data-slide-previous> <span class="icon icon-slide-prev" aria-hidden="true"></span> </button> </li> <li> <button class="slick-next" aria-label="{{ 'home_page.slideshow.next_slide' | t }}" data-slide-next> <span class="icon icon-slide-next" aria-hidden="true"></span> </button> </li> </ul> <div class="hero__dots-wrapper" data-hero-dots-wrapper></div> </div> {%- endif -%} </div> {%- if section.settings.home_hero_height == 'adapt' -%} <div class="hero__adapt-text-wrap wrapper" data-hero-adapt-text-wrap> {%- for block in section.blocks -%} <div class="hero__text-content hero__text-content--adapt text-center" data-index="{{ forloop.index0 }}" data-hero-text-content> {%- unless block.settings.slide_subheading == blank -%} <p class="hero__subtitle"> {{ block.settings.slide_subheading | escape }} </p> {%- endunless -%} {%- unless block.settings.slide_heading == blank -%} <h2 class="hero__title h1"> {{ block.settings.slide_heading | escape }} </h2> {%- endunless -%} {%- if block.settings.button_label != blank and block.settings.button_link != blank -%} <a href="{{ block.settings.button_link }}" class="hero__cta btn"> {{ block.settings.button_label | escape }} </a> {%- endif -%} </div> {%- endfor -%} </div> {%- endif -%} {%- endif -%} </div> {% schema %} { "name": { "da": "Diasshow", "de": "Slideshow", "en": "Slideshow", "es": "Diapositivas", "fi": "Diaesitys", "fr": "Diaporama", "hi": "स्लाइडशो", "it": "Presentazione", "ja": "スライドショー", "ko": "슬라이드 쇼", "nb": "Lysbildefremvisning", "nl": "Diavoorstelling", "pt-BR": "Apresentação de slides", "pt-PT": "Apresentação de diapositivos", "sv": "Bildspel", "th": "สไลด์โชว์", "zh-CN": "幻灯片", "zh-TW": "素材輪播" }, "class": "index-section index-slideshow-section shopify-section--full-width", "max_blocks": 6, "settings": [ { "type": "select", "id": "home_hero_height", "label": { "da": "Diashøjde", "de": "Diahöhe", "en": "Slide height", "es": "Altura de diapositiva", "fi": "Dian korkeus", "fr": "Hauteur de la diapositive", "hi": "स्लाइड ऊंचाई", "it": "Altezza slide", "ja": "スライドの高さ", "ko": "슬라이드 높이", "nb": "Lysbildehøyde", "nl": "Diahoogte", "pt-BR": "Altura do slide", "pt-PT": "Altura do diapositivo", "sv": "Bildhöjd", "th": "ความสูงของสไลด์", "zh-CN": "幻灯片高度", "zh-TW": "投影片高度" }, "default": "full", "info": { "da": "Få mere at vide om [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "de": "Erfahren Sie mehr über die [Richtlinien für Slideshows](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "en": "Learn more about [slideshow guidelines](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "es": "Más información sobre [directrices de presentación de diapositivas](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "fi": "Lisätietoja [diaesitysohjeista](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "fr": "En savoir plus sur [directives de diaporama](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "hi": "[स्लाइडशो दिशानिर्देश](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow) के बारे में अधिक जानें", "it": "Maggiori informazioni sulle [linee guida per le presentazioni](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "ja": "[スライドショーのガイドライン](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)に関する詳細情報をご覧ください", "ko": "[슬라이드 쇼 가이드라인에 대해 자세히 알아보기](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "nb": "Finn ut mer om [retningslinjer for lysbilder](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "nl": "Meer informatie over [richtlijnen voor diavoorstellingen](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "pt-BR": "Saiba mais sobre [diretrizes de apresentação de slides](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "pt-PT": "Saiba mais sobre [diretrizes de apresentação de diapositivos](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "sv": "Läs mer om [bildspelets riktlinjer](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "th": "ดูข้อมูลเพิ่มเติมเกี่ยวกับ [แนวทางสไลด์โชว์](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "zh-CN": "详细了解[幻灯片指南](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)", "zh-TW": "深入瞭解 [素材輪播準則](https://help.shopify.com/en/manual/using-themes/themes-by-shopify/brooklyn/sections/home-sections#slideshow)" }, "options": [ { "value": "full", "label": { "da": "Fuld skærm", "de": "Vollbild", "en": "Full screen", "es": "Pantalla completa", "fi": "Kokonäyttö", "fr": "Plein écran", "hi": "पूरी स्क्रीन", "it": "A schermo intero", "ja": "全画面表示", "ko": "전체 화면", "nb": "Fullskjerm", "nl": "Volledig scherm", "pt-BR": "Tela cheia", "pt-PT": "Ecrã inteiro", "sv": "Helskärm", "th": "โหมดเต็มหน้าจอ", "zh-CN": "全屏", "zh-TW": "全螢幕" } }, { "value": "adapt", "label": { "da": "Tilpas til første side", "de": "An erstes Bild anpassen", "en": "Adapt to first image", "es": "Adaptar a la primera imagen", "fi": "Mukauta ensimmäisen kuvan mukaan", "fr": "Adapter à la première image", "hi": "पहली इमेज को अनुकूल बनाएं", "it": "Adatta alla prima immagine", "ja": "最初の画像に対応", "ko": "첫 번째 이미지에 맞춤", "nb": "Tilpass etter første bilde", "nl": "Aanpassen aan eerste afbeelding", "pt-BR": "Adaptar à primeira imagem", "pt-PT": "Adaptar à primeira imagem", "sv": "Anpassa efter första bilden", "th": "ปรับให้เข้ากับรูปภาพแรก", "zh-CN": "适应第一张图片", "zh-TW": "配合第一張圖片" } } ] }, { "type": "checkbox", "id": "hero_home_auto", "label": { "da": "Roter automatisk slides", "de": "Auto-rotieren der Slides", "en": "Auto-rotate slides", "es": "Rotar las diapositivas automáticamente", "fi": "Käännä diat automaattisesti", "fr": "Rotation automatique des diapositives", "hi": "ऑटो-रोटेट स्लाइड", "it": "Ruota slide automaticamente", "ja": "スライドの自動切り替え", "ko": "슬라이드 자동 회전", "nb": "Autoroter lysbildene", "nl": "Dia's automatisch draaien", "pt-BR": "Rodar os slides automaticamente", "pt-PT": "Reprodução automática de diapositivos", "sv": "Auto-rotera bilder", "th": "หมุนสไลด์อัตโนมัติ", "zh-CN": "自动旋转幻灯片", "zh-TW": "自動旋轉投影片" }, "default": false }, { "type": "range", "id": "home_hero_auto_speed", "label": { "da": "Skift slide hver", "de": "Slides überall ändern", "en": "Change slides every", "es": "Cambiar diapositivas cada", "fi": "Vaihda diat joka", "fr": "Changer de diapositive toutes les", "hi": "प्रत्येक स्लाइड बदलें", "it": "Cambia slide ogni", "ja": "スライドを変更する間隔", "ko": "슬라이드를 매번 변경", "nb": "Endre lysbilde hvert", "nl": "Wijzig dia's elke", "pt-BR": "Mudar os slides a cada", "pt-PT": "Mudar diapositivos a cada", "sv": "Byt bilder varje", "th": "เปลี่ยนสไลด์ทุก", "zh-CN": "幻灯片更改时间间隔", "zh-TW": "每過以下時間即變更投影片" }, "max": 9, "min": 3, "step": 2, "unit": { "da": " s", "de": " s", "en": " s", "es": " s", "fi": " s", "fr": " s", "hi": " s", "it": " s", "ja": " s", "ko": " s", "nb": " s", "nl": " s", "pt-BR": " s", "pt-PT": " s", "sv": " s", "th": " s", "zh-CN": " s", "zh-TW": " s" }, "default": 5 } ], "presets": [ { "name": { "da": "Diasshow", "de": "Slideshow", "en": "Slideshow", "es": "Diapositivas", "fi": "Diaesitys", "fr": "Diaporama", "hi": "स्लाइडशो", "it": "Presentazione", "ja": "スライドショー", "ko": "슬라이드 쇼", "nb": "Lysbildefremvisning", "nl": "Diavoorstelling", "pt-BR": "Apresentação de slides", "pt-PT": "Apresentação de diapositivos", "sv": "Bildspel", "th": "สไลด์โชว์", "zh-CN": "幻灯片", "zh-TW": "素材輪播" }, "category": { "da": "Billede", "de": "Bild", "en": "Image", "es": "Imagen", "fi": "Kuva", "fr": "Image", "hi": "इमेज", "it": "Immagine", "ja": "画像", "ko": "이미지", "nb": "Bilde", "nl": "Afbeelding", "pt-BR": "Imagem", "pt-PT": "Imagem", "sv": "Bild", "th": "รูปภาพ", "zh-CN": "图片", "zh-TW": "圖片" }, "settings": { "hero_home_auto": false, "home_hero_auto_speed": 5 }, "blocks": [ { "type": "slide" }, { "type": "slide" } ] } ], "blocks": [ { "type": "slide", "name": { "da": "Slide", "de": "Folie", "en": "Slide", "es": "Diapositiva", "fi": "Dia", "fr": "Diapositive", "hi": "स्लाइड", "it": "Scorrimento", "ja": "スライド", "ko": "슬라이드", "nb": "Lysbilde", "nl": "Dia", "pt-BR": "Slide", "pt-PT": "Diapositivo", "sv": "Bild", "th": "สไลด์", "zh-CN": "幻灯片", "zh-TW": "投影片" }, "settings": [ { "type": "image_picker", "id": "image", "label": { "en": "Image" } }, { "type": "image_picker", "id": "mobile_image", "label": { "en": "Image mobile" } }, { "type": "select", "id": "image_position", "label": { "en": "Image position" }, "default": "center center", "options": [ { "label": { "en": "Top left" }, "value": "left top" }, { "label": { "en": "Top center" }, "value": "center top" }, { "label": { "en": "Top right" }, "value": "right top" }, { "label": { "en": "Middle left" }, "value": "left center" }, { "label": { "en": "Middle center" }, "value": "center center" }, { "label": { "en": "Middle right" }, "value": "right center" }, { "label": { "en": "Bottom left" }, "value": "left bottom" }, { "label": { "en": "Bottom center" }, "value": "center bottom" }, { "label": { "en": "Bottom right" }, "value": "right bottom" } ] }, { "type": "checkbox", "id": "image_overlay", "label": { "en": "Show overlay" }, "default": true }, { "type": "range", "id": "image_overlay_opacity", "label": { "en": "Overlay opacity" }, "min": 0, "max": 100, "step": 1, "unit": { "en": "%" }, "default": 25 }, { "type": "header", "content": { "da": "Tekst", "de": "Text", "en": "Text", "es": "texto", "fi": "Teksti", "fr": "Texte", "hi": "टेक्स्ट", "it": "Testo", "ja": "テキスト", "ko": "텍스트", "nb": "Tekst", "nl": "Tekst", "pt-BR": "Texto", "pt-PT": "Texto", "sv": "Text", "th": "ข้อความ", "zh-CN": "文本", "zh-TW": "文字" } }, { "type": "select", "id": "text_alignment", "label": { "da": "Tekstjustering", "de": "Textausrichtung", "en": "Text alignment", "es": "Alineación de texto", "fi": "Tekstin tasaus", "fr": "Alignement du texte", "hi": "टेक्स्ट पंक्तिबद्ध", "it": "Allineamento del testo", "ja": "テキストアラインメント", "ko": "텍스트 정렬", "nb": "Tekstjustering", "nl": "Tekstuitlijning", "pt-BR": "Alinhamento de texto", "pt-PT": "Alinhamento de texto", "sv": "Textjustering", "th": "การจัดตำแหน่งข้อความ", "zh-CN": "文本对齐方式", "zh-TW": "文字對齊" }, "options": [ { "value": "left", "label": { "da": "Venstre", "de": "Links", "en": "Left", "es": "Izquierda", "fi": "Vasen", "fr": "Gauche", "hi": "बाएँ", "it": "Sinistra", "ja": "左", "ko": "왼쪽", "nb": "Venstre", "nl": "Links", "pt-BR": "Esquerda", "pt-PT": "Esquerda", "sv": "Vänster", "th": "ด้านซ้าย", "zh-CN": "左侧", "zh-TW": "左方" } }, { "value": "center", "label": { "da": "Centreret", "de": "Mitte", "en": "Center", "es": "Centrar", "fi": "Keskitetty", "fr": "Centre", "hi": "केंद्र", "it": "Al centro", "ja": "中央", "ko": "센터", "nb": "Sentrer", "nl": "Midden", "pt-BR": "Centro", "pt-PT": "Centro", "sv": "Centrera", "th": "ตรงกลาง", "zh-CN": "居中", "zh-TW": "置中" } }, { "value": "right", "label": { "da": "Højre", "de": "Rechts", "en": "Right", "es": "Derecha", "fi": "Oikea", "fr": "Droite", "hi": "दाएँ", "it": "Destra", "ja": "右", "ko": "오른쪽", "nb": "Høyre", "nl": "Rechts", "pt-BR": "Direita", "pt-PT": "Direita", "sv": "Höger", "th": "ด้านขวา", "zh-CN": "右侧", "zh-TW": "右方" } } ], "default": "center" }, { "type": "text", "id": "slide_heading", "label": { "da": "Overskrift", "de": "Überschrift", "en": "Heading", "es": "Título", "fi": "Otsake", "fr": "En-tête", "hi": "शीर्षक", "it": "Heading", "ja": "見出し", "ko": "제목", "nb": "Overskrift", "nl": "Kop", "pt-BR": "Título", "pt-PT": "Título", "sv": "Rubrik", "th": "ส่วนหัว", "zh-CN": "标题", "zh-TW": "標題" }, "default": { "da": "Forgrundsbanner", "de": "Hero-Banner", "en": "Hero Banner", "es": "Banner destacado", "fi": "Hero Banner", "fr": "Bannière de premier plan", "hi": "हीरो बैनर", "it": "Banner hero", "ja": "ヒーローバナー", "ko": "히어로 배너", "nb": "Hero-banner", "nl": "Hero banner", "pt-BR": "Banner principal", "pt-PT": "Faixa do Hero", "sv": "Hero Banner", "th": "แบนเนอร์หลัก", "zh-CN": "Hero 横幅", "zh-TW": "主頁橫幅" } }, { "type": "text", "id": "slide_subheading", "label": { "da": "Underoverskrift", "de": "Untertitel", "en": "Subheading", "es": "Subtítulo", "fi": "Alaotsikko", "fr": "Sous-titre", "hi": "उपशीर्षक", "it": "Sottotitolo", "ja": "小見出し", "ko": "소제목", "nb": "Underoverskrift", "nl": "Subkop", "pt-BR": "Subtítulo", "pt-PT": "Subtítulo", "sv": "Underrubrik", "th": "หัวเรื่องย่อย", "zh-CN": "副标题", "zh-TW": "子標題" }, "default": { "da": "Introduktion", "de": "Für den Einstieg:", "en": "An introductory", "es": "Frase introductoria", "fi": "Aloittaminen", "fr": "Introduction", "hi": "एक परिचयात्मक", "it": "Come introduzione", "ja": "紹介", "ko": "소개", "nb": "En introduksjon", "nl": "Een inleiding", "pt-BR": "Uma introdução", "pt-PT": "Uma introdução", "sv": "En introduktion", "th": "การเกริ่นนำ", "zh-CN": "介绍性的 ", "zh-TW": "首次優惠" } }, { "type": "text", "id": "button_label", "label": { "da": "Knaptekst", "de": "Schaltflächenbezeichnung", "en": "Button label", "es": "Etiqueta de botón", "fi": "Tekstipainike", "fr": "Texte du bouton", "hi": "बटन लेबल", "it": "Etichetta pulsante", "ja": "ボタンのラベル", "ko": "버튼 레이블", "nb": "Knappetikett", "nl": "Knoplabel", "pt-BR": "Etiqueta de botão", "pt-PT": "Etiqueta do botão", "sv": "Knappetikett", "th": "ป้ายกำกับปุ่ม", "zh-CN": "按钮标签", "zh-TW": "按鈕標籤" }, "default": { "da": "Shop nu", "de": "Jetzt shoppen", "en": "Shop now", "es": "Compra ya", "fi": "Tee nyt ostoksia", "fr": "Acheter maintenant", "hi": "अभी खरीदें", "it": "Acquista ora", "ja": "今すぐ購入", "ko": "지금 쇼핑하기", "nb": "Handle nå", "nl": "Nu winkelen", "pt-BR": "Compre agora", "pt-PT": "Comprar agora", "sv": "Handla nu", "th": "ช้อปเลย", "zh-CN": "立即购买", "zh-TW": "立即購物" } }, { "type": "url", "id": "button_link", "label": { "da": "Knaplink", "de": "Schaltflächenlink", "en": "Button link", "es": "Enlace de botón", "fi": "Painikelinkki", "fr": "Lien du bouton", "hi": "बटन लिंक", "it": "Link pulsante", "ja": "ボタンのリンク", "ko": "버튼 링크", "nb": "Kobling for knapp", "nl": "Knoplink", "pt-BR": "Link de botão", "pt-PT": "Ligação do botão", "sv": "Knapplänk", "th": "ลิงก์ปุ่ม", "zh-CN": "按钮链接", "zh-TW": "按鈕連結" } }, { "type": "color", "id": "slide_text_color", "label": { "da": "Tekst og ikoner", "de": "Text und Symbole", "en": "Text and icons", "es": "Texto e iconos", "fi": "Teksti ja kuvakkeet", "fr": "Texte et icônes", "hi": "टेक्स्ट और आइकन", "it": "Testo e icone", "ja": "テキストとアイコン", "ko": "텍스트 및 아이콘", "nb": "Tekst og ikoner", "nl": "Tekst en pictogrammen", "pt-BR": "Texto e ícones", "pt-PT": "Texto e ícones", "sv": "Text och ikoner", "th": "ข้อความและไอคอน", "zh-CN": "文本和图标", "zh-TW": "文字和圖示" }, "default": "#ffffff" }, { "type": "color", "id": "slide_button_label_color", "label": { "da": "Knaptekst", "de": "Schaltflächenbezeichnung", "en": "Button label", "es": "Etiqueta de botón", "fi": "Tekstipainike", "fr": "Texte du bouton", "hi": "बटन लेबल", "it": "Etichetta pulsante", "ja": "ボタンのラベル", "ko": "버튼 레이블", "nb": "Knappetikett", "nl": "Knoplabel", "pt-BR": "Etiqueta de botão", "pt-PT": "Etiqueta do botão", "sv": "Knappetikett", "th": "ป้ายกำกับปุ่ม", "zh-CN": "按钮标签", "zh-TW": "按鈕標籤" }, "default": "#ffffff" }, { "type": "color", "id": "slide_button_background_color", "label": { "da": "Knap", "de": "Schaltfläche", "en": "Button", "es": "Botón", "fi": "Painike", "fr": "Bouton", "hi": "बटन", "it": "Pulsante", "ja": "ボタン", "ko": "버튼", "nb": "Knapp", "nl": "Knop", "pt-BR": "Botão", "pt-PT": "Botão", "sv": "Knapp", "th": "ปุ่ม", "zh-CN": "按钮", "zh-TW": "按鈕" }, "default": "#1f2021" } ] } ] } {% endschema %}
I have simply copied your theme.scss.liquid
.slick-slide .hero__image-content img.hero__image.hidden-mobile { display: block; } .slick-slide .hero__image-content img.hero__image.hidden-desktop { display: none; } .hero { height: auto; } @media (max-width:750px){ .slick-slide .hero__image-content img.hero__image.hidden-mobile { display: none; } .slick-slide .hero__image-content img.hero__image.hidden-desktop { display: block; } }
Thank you in advance!
@Alric Did you ever find out how to get the two images to show up differently on mobile and desktop? I know this post is pretty old but since I am using the Brooklyn theme as well I thought I'd ask.
Hi @Ninthony
To : "Just posting this for Venture theme, had another user contact me about it so I looked into it and it was fairly easy. Everyone backup your themes before you attempt it. Used on the "Snowboarding" option of Venture, not sure if it matters. Here's the section code for slideshow.liquid:"
Do you have the same modification for Narrative theme ?
I would like to display 2 differents images in my slideshow, one on mobile and the other on desktop.
Hello Ninthony, is it possible to reduce the aspect ratio of 2:1 within the slideshow of the Venture theme. When I added your code, it has made my slideshows cover the whole of the web browser screen. What can I do to fix this?
Thank you in advance.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024