Reduce the size of Image banner container

Store Design

Topic summary

Goal: shrink the image banner’s text container height/width in Dawn so it matches a tighter layout.

Context: The banner container on a product/collection page stayed too tall unless subheading text was removed. Screenshots showed the current oversized banner and the desired compact look.

Guidance offered:

  • Theme Editor approach: In Customize, adjust the Image Banner section (banner height, heading size, description styling; optionally remove buttons) to reduce visual height.
  • CSS approach: Add custom CSS to limit the text container’s width (e.g., max-width). Initial advice suggested editing code without a store link.

Implementation and issue:

  • Custom code added in theme.liquid (above ) produced the desired narrower banner. However, it unintentionally left‑aligned the homepage banner because multiple banners share the same DOM (Document Object Model) structure.

Fix:

  • Updated the code to apply conditionally using Liquid tags ({% if collection %} … {% endif %}), scoping the CSS to the targeted page type and preventing changes on the homepage.

Status: The updated, scoped code resolved the alignment side effect. No further questions; effectively resolved. Images were used to illustrate before/after states.

Summarized with AI on January 10. AI used: gpt-5.
1

Hello, I have an image banner on my product page but the container for It is way too long and only reduces in size If I delete some of the text in the subheading. I am using dawn theme

This is what it looks like now

vhf1_0-1702284874255.png
vhf1_0-1702284874255.png1868Ă—650 173 KB

I would like to get it to look like this..

vhf1_1-1702284906994.png
vhf1_1-1702284906994.png1911Ă—528 221 KB

Thank you!

2

Hi @vhf1 ,

Please provide link to your store

3

it’s not easy to guide you without your store link but if you can locate the text container you can simply use his class name to obtain this

.container-class-name { width:30%; } or max-width: 300px; whatever you required
4

Hello @vhf1 ,

I understand you are looking to change the image banner on product image.

As you are using the dawn theme, you can follow the below mentioned steps to understand how you can adjust the size of this section.

Steps -:

  1. Go to Online Store → Themes → Click on Customize button

  2. Next change the page and select the Collection/Product Page https://prnt.sc/MeJnJXmG_usK , now mentioned screenshot page options will appear for adjusting the code https://prnt.sc/oSlRLIgOu87x

  3. Now, you have to make changes in this section for your desired output. https://prnt.sc/1Vm3ibYbZYFx

  1. Save changes

I hope this helps

Please let me know if you have any query or need further assistance.

Thank you.

5

vitalhomefinds.com

6

Hi @vhf1 ,

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

Result:

theycallmemakka_0-1702304907629.png
theycallmemakka_0-1702304907629.png1673Ă—495 1.06 MB

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

1 Like
7

Thank you so much you’re amazing!

8

@theycallmemakka

The code worked but it made the text container on my homepage aligned to the left, like this.

vhf1_0-1702324572900.png
vhf1_0-1702324572900.png1303Ă—539 569 KB

This is what it normally looks like

vhf1_1-1702324612913.png
vhf1_1-1702324612913.png1054Ă—448 464 KB

Thank you!

9

Hi @vhf1 ,

It looks like all the banner uses the same DOM structure. Please replace the previous code with this new updated code and see if this works.

{% if collection %}

{% endif %}

Thank you

1 Like
10

Thank you!