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 %}
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023