Need the image height of the banner to be in its original size, please help asap

Store Design
,

Topic summary

A user is experiencing issues with banner image sizing on their Shopify collection pages, seeking help to display images at their original dimensions.

Initial Problem & Solution:

  • Banner image height needed adjustment to original size
  • PageFly-Richard provided CSS code to modify styles.css, targeting .collection-header classes to set height to auto and adjust positioning

Follow-up Issues:

  • User requested full-width display; Richard provided updated CSS with flex: 0 0 100% property
  • Image became blurry after applying the code

Root Cause Identified:

  • Blurriness traced to Liquid template code resizing images
  • Richard initially suggested finding and replacing “1512x” with “master” in main-collection.liquid file
  • User couldn’t locate the specified code in their template

Current Status:

  • Issue remains unresolved
  • Richard acknowledged potential error in file identification and suggested contacting Shopify support or finding another expert for this specific Liquid template issue
Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Need the image height of the banner to be in its original size, please help asap

store link: https://a9udfonrb9ode3mv-21603111.shopifypreview.com/collections/activewear

banner1.png
banner1.png1882×910 272 KB

2

Hi @Janamir ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/styles.css->paste below code at the bottom of the file:

.collection-header .header-text {
    padding: 0 !important;
}
.collection-header.coloured-split.has-image {
    background: transparent !important;
}
.collection-header #collectionimage {
    height: auto !important;
}
.collection-header.coloured-split.has-image .header-image .rimage__image {
    position: static;
    object-fit: contain !important;
}

I hope it would help you
Best regards,

Richard | PageFly

3

@PageFly-Richard how can I make the width in full

here’s the store link: https://www.bohemianmama.com/collections/womens-new-arrivals

12.png
12.png1892×972 232 KB

4

Hi @Janamir ,

Sure, I’m happy to help you. Let’s try this solution:

You can try replace previous my code by below code in styles.css file:

.collection-header .header-text {
    padding: 0 !important;
}
.collection-header.coloured-split.has-image {
    background: transparent !important;
}
.collection-header #collectionimage {
    height: auto !important;
}
.collection-header.coloured-split.has-image .header-image .rimage__image {
    position: static;
    object-fit: contain !important;
}
.collection-header.coloured-split.has-image .header-image {
    flex: 0 0 100% !important;
}

PageFlyRichard_0-1677077129878.png
PageFlyRichard_0-1677077129878.png1631×612 74.9 KB

I hope it would help you
Best regards,

Richard | PageFly

5

@PageFly-Richard I applied the codes, but the image is blurry. Please help.

https://a9udfonrb9ode3mv-21603111.shopifypreview.com/collections/womens-new-arrivals

c1.png
c1.png1926×918 171 KB

6

Hi @Janamir ,

The blurred image is because your liquid code is being resized.
You can go to file main-collection.liquid, Then find “1512x” → And replace 1512x to “master”

I hope it would help you
Best regards,

Richard | PageFly

7

@PageFly-Richard I dont see any 1512x in there.

This is all the codes:

{%- if collection.featured_image -%}
{% if section.settings.height == “fixed” %}
{% assign img_url = collection.featured_image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ %}

{{ collection.featured_image.alt | escape }}
{%- else -%} {%- render 'responsive-image', image: collection.featured_image -%} {%- endif -%} {%- endif -%}
8

Hi @Janamir ,

Sorry, I may have misremembered the file name. This part you may try contacting Shopify support or finding another expert regarding this issue.