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_---------->
{% 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": "
This is a short subheading for your banner image
"
},
{
"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 %}
Topic summary
A Shopify store owner seeks to display different banner images on mobile versus desktop views.
Initial Solution Provided:
- Use CSS media queries with
.mobile-imageand.desktop-imageclasses - Hide/show images based on screen width (992px breakpoint)
- Add both image pickers to theme schema
- Insert corresponding HTML with class names in appropriate liquid files
Key Implementation Challenges:
- Users struggle identifying correct liquid files (theme.liquid, banner.liquid, slideshow.liquid vary by theme)
- Placement of
<style>tags and HTML snippets differs across themes (Debut, Venture, Brooklyn, Minimal, Turbo, Boundless, etc.) - Schema modifications work, but HTML integration remains confusing for non-developers
Simplified Solution (Page 6):
A basic static section called “desktop-mobile-banner” with:
- Two image pickers accessible via Customize editor
- CSS media queries at 767px breakpoint
- Optional link field for clickable banners
- No optimization for different resolutions/screen widths
Ongoing Issues:
- Page speed concerns (lazy loading suggested via lazysizes library)
- Padding/spacing adjustments needed
- Theme-specific implementations require custom code
- Some users report both images displaying simultaneously
- Request for slideshow versions with multiple slides
Status: Thread remains active with users requesting theme-specific guidance. The basic section code provides a starting point but requires customization per theme architecture.