Personalized checkout and custom promotions with Shopify Scripts
On the Dawn theme, the "Collection Banner" enlarges the collection image and makes it as long as the copy but only about 50% of the page width. This causes the collection images to be a bit hard to identify. I want the Collection image to be fully displayed and to float right with the collection copy flowing around the image (desired result image in the zip). I would appreciate any help!!!
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community!😊
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
https://coloradopen.myshopify.com/collections/conklin-mark-twain-crescent-superblack-limited-edition
PW: ompayu
The misbehaving Liquid I believe is this:
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{{ 'component-collection-hero.css' | asset_url | stylesheet_tag }}
{%- style -%}
@media screen and (max-width: 749px) {
.collection-hero--with-image .collection-hero__inner {
padding-bottom: calc({{ settings.media_shadow_vertical_offset | at_least: 0 }}px + 2rem);
}
}
{%- endstyle -%}
<div class="collection-hero{% if section.settings.show_collection_image and collection.image %} collection-hero--with-image{% endif %} color-{{ section.settings.color_scheme }} gradient">
<div class="collection-hero__inner page-width">
<div class="collection-hero__text-wrapper">
<h1 class="collection-hero__title">
<span class="visually-hidden">{{ 'sections.collection_template.title' | t }}: </span>
{{- collection.title | escape -}}
</h1>
{%- if section.settings.show_collection_description -%}
<div class="collection-hero__description rte">{{ collection.description }}</div>
{%- endif -%}
</div>
{%- if section.settings.show_collection_image and collection.image -%}
<div class="collection-hero__image-container media gradient">
<img
srcset="{%- if collection.image.width >= 165 -%}{{ collection.image | image_url: width: 165 }} 165w,{%- endif -%}
{%- if collection.image.width >= 360 -%}{{ collection.image | image_url: width: 360 }} 360w,{%- endif -%}
{%- if collection.image.width >= 535 -%}{{ collection.image | image_url: width: 535 }} 535w,{%- endif -%}
{%- if collection.image.width >= 750 -%}{{ collection.image | image_url: width: 750 }} 750w,{%- endif -%}
{%- if collection.image.width >= 1070 -%}{{ collection.image | image_url: width: 1070 }} 1070w,{%- endif -%}
{%- if collection.image.width >= 1500 -%}{{ collection.image | image_url: width: 1500 }} 1500w,{%- endif -%}
{{ collection.image | image_url }} {{ collection.image.width }}w"
src="{{ collection.image | image_url: width: 750 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc(50vw - 130px), calc(50vw - 55px)"
alt=""
width="{{ collection.image.width }}"
height="{{ collection.image.width }}"
>
</div>
{%- endif -%}
</div>
</div>
{% schema %}
{
"name": "t:sections.main-collection-banner.name",
"class": "section",
"settings": [
{
"type": "paragraph",
"content": "t:sections.main-collection-banner.settings.paragraph.content"
},
{
"type": "checkbox",
"id": "show_collection_description",
"default": true,
"label": "t:sections.main-collection-banner.settings.show_collection_description.label"
},
{
"type": "checkbox",
"id": "show_collection_image",
"default": false,
"label": "t:sections.main-collection-banner.settings.show_collection_image.label",
"info": "t:sections.main-collection-banner.settings.show_collection_image.info"
},
{
"type": "select",
"id": "color_scheme",
"options": [
{
"value": "accent-1",
"label": "t:sections.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.label"
}
]
}
{% endschema %}
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025