DAWN THEME - collection hero banner image + text position swap

Store Design

Topic summary

A user seeks to customize the Dawn theme’s collection hero banner by:

Primary Goals:

  • Swap layout so image appears on left, text on right (opposite of default)
  • Lock image dimensions to 1080x1080 (1:1 ratio) to properly display Instagram posts without cropping

Solution Provided:
PageFly-Noah offers CSS code to be added to theme.liquid above the </head> tag.

Implementation Steps:

  1. Navigate to Online Stores > Themes > More Actions > Edit code
  2. Open theme.liquid and paste provided CSS snippet

Remaining Issues:

  • Image disappears on mobile view
  • No padding exists between image and text elements

Follow-up:
Noah provides updated code addressing these concerns, with instructions to increase the ‘em4’ value for greater spacing between image and text if needed.

Summarized with AI on November 15. AI used: claude-sonnet-4-5-20250929.
1

Hello there :slightly_smiling_face:

I would like to change the collection hero banner.

  1. Swap the elements, so that the image is on the left, and the text is on the right (the default is the contrary order).

  2. Fix the size of the image. I will only be uploading instagram posts which are a ratio of 1080*1080 (1:1 ratio). I would like the image to always keep this ratio for the image so that we can always see the full image.

This is the store link: https://384f77-3.myshopify.com/collections/thewilsonsvintage

Pw: mewnaw

1 Like
2

Hi @AnaELW

This is Noah from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

About the image, if you don’t want the image to be stretched like this, you can make sure that you will use future image that has the big size

PageFlyNoah_0-1697008848846.png
PageFlyNoah_0-1697008848846.png1920×963 264 KB

Hope this can help you solve the issue

Best regards,

Noah | PageFly

1 Like
3

Cool! This almost works. The only thing missing:

  • on mobile, the image dissapears.

  • would it be possible to add a bit of padding between the picture and text? on my screen there’s no padding.

Thank you!!

4

Hi @AnaELW

You can replace the code above with this one:

To increase the padding between text and image, you can increase the value ‘4em’ to higher