I have to version of code for image2 in image-banner.liquid for Dawn theme. The first one is my version and the second one is generated by Chatgpt, which one is better for SEO and improve score in Pagespeed insights? Thanks!
Version 1:
{%- if section.settings.image_2 != blank -%}
<div class="banner__media media{% if section.settings.image != blank %} banner__media-half{% endif %}{% if section.settings.image_behavior != 'none' %} animate--{{ section.settings.image_behavior }}{% endif %}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
{%- liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = ‘banner__media-image-half’
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = half_width
else
assign sizes = full_width
endif
-%}
{{
section.settings.image_2
| image_url: width: 3840
| image_tag:
width: section.settings.image_2.width,
height: image_height_2,
class: image_class_2,
sizes: sizes,
widths: widths,
fetchpriority: fetch_priority
}}
Version 2:
{%- if section.settings.image_2 != blank -%}
{%- liquid
assign image_height_2 = section.settings.image_2.width | divided_by: section.settings.image_2.aspect_ratio
if section.settings.image != blank
assign image_class_2 = 'banner__media-image-half'
endif
if section.settings.image != blank and section.settings.stack_images_on_mobile
assign sizes = stacked_sizes
elsif section.settings.image_2 != blank
assign sizes = half_width
else
assign sizes = full_width
endif
assign image_src_avif = section.settings.image_2 | image_url: width: 3840, format: 'avif'
assign image_src_webp = section.settings.image_2 | image_url: width: 3840, format: 'webp'
assign image_src_jpg = section.settings.image_2 | image_url: width: 3840
-%}
<picture>
<source srcset="{{ image_src_avif }}" type="image/avif" sizes="{{ sizes }}">
<source srcset="{{ image_src_webp }}" type="image/webp" sizes="{{ sizes }}">
<img
src="{{ image_src_jpg }}"
width="{{ section.settings.image_2.width }}"
height="{{ image_height_2 }}"
class="{{ image_class_2 }}"
sizes="{{ sizes }}"
widths="{{ widths }}"
loading="eager"
fetchpriority="high"
decoding="async"
alt="{{ section.settings.image_2.alt | escape }}"
>
</picture>
{%- endif -%}
PieLab
October 9, 2025, 4:25am
2
Hi @kyle6661
To add the custom banner, create a new section file in your theme’s code editor named custom-image-banner.liquid. Delete any default code in that new file and paste the complete code block below. Once saved, you can add and customize your new “Image Banner” section from the theme editor.
<style>
.custom-banner { position: relative; width: 100%; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; text-align: center; color: #fff; }
.custom-banner--small { min-height: 280px; }
.custom-banner--medium { min-height: 400px; }
.custom-banner--large { min-height: 550px; }
.custom-banner__content { padding: 20px; background-color: rgba(0, 0, 0, 0.3); border-radius: 5px; }
.custom-banner__heading { font-size: 2.5rem; margin: 0 0 15px; }
.custom-banner__button { display: inline-block; padding: 12px 24px; background-color: #000; color: #fff; text-decoration: none; border-radius: 3px; font-weight: bold; }
.custom-banner__image--desktop { display: none; }
.custom-banner__image--mobile { display: block; }
@media screen and (min-width: 768px) {
.custom-banner__image--desktop { display: block; }
.custom-banner__image--mobile { display: none; }
}
</style>
{%- liquid
assign section_height = section.settings.section_height
assign desktop_image = section.settings.desktop_image
assign mobile_image = section.settings.mobile_image
assign bg_image_desktop = desktop_image | image_url: width: 1920
assign bg_image_mobile = mobile_image | image_url: width: 750
if mobile_image == blank
assign bg_image_mobile = bg_image_desktop
endif
-%}
<div class="custom-banner custom-banner--{{ section_height }}" style="background-image: url('{{ bg_image_mobile }}');" {%- if desktop_image != blank %} data-desktop-image="url('{{ bg_image_desktop }}')" {% endif %}>
<div class="custom-banner__content">
{%- if section.settings.heading_text != blank -%}
<h2 class="custom-banner__heading">{{ section.settings.heading_text | escape }}</h2>
{%- endif -%}
{%- if section.settings.button_text != blank and section.settings.button_link != blank -%}
<a href="{{ section.settings.button_link }}" class="custom-banner__button">{{ section.settings.button_text | escape }}</a>
{%- endif -%}
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const banner = document.querySelector('.custom-banner');
const desktopImage = banner.getAttribute('data-desktop-image');
function handleResize() {
if (window.innerWidth >= 768 && desktopImage) {
banner.style.backgroundImage = desktopImage;
} else {
banner.style.backgroundImage = `url('${banner.style.backgroundImage.slice(5, -2)}')`;
}
}
handleResize();
window.addEventListener('resize', handleResize);
});
</script>
{% schema %}
{
"name": "Image Banner",
"settings": [
{ "type": "image_picker", "id": "desktop_image", "label": "Desktop Image" },
{ "type": "image_picker", "id": "mobile_image", "label": "Mobile Image", "info": "If blank, desktop image is used." },
{ "type": "select", "id": "section_height", "label": "Section Height", "options": [
{ "value": "small", "label": "Small" },
{ "value": "medium", "label": "Medium" },
{ "value": "large", "label": "Large" }
], "default": "medium" },
{ "type": "text", "id": "heading_text", "label": "Heading", "default": "My Banner" },
{ "type": "text", "id": "button_text", "label": "Button Text", "default": "Shop Now" },
{ "type": "url", "id": "button_link", "label": "Button Link" }
],
"presets": [{ "name": "Image Banner" }]
}
{% endschema %}
Hope this helps!