Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Shopify Store Banner Cropped on Mobile using Dawn Theme

Solved

Shopify Store Banner Cropped on Mobile using Dawn Theme

Macnet
Excursionist
23 1 9

Hi,

I have two Shopify stores and both are using Dawn theme version 9. The home page banner in one store is fully visible on mobile. However, the home page banner in the other store (which I am currently building) is cropped when viewed on mobile. Even though I am presently using identical banners on both stores, the cropping issue remains.

 

One store sells gift items. This is the store in which the banner is fully visible on mobile:
Silky Gift Shop: https://silkygiftshop.com/

 

With the other store (which I am currently building), the banner is cropped on mobile even though I'm currently using the same banner from the other store:
Silky Cake Toppers: https://silkycaketoppers.co.uk/

 

So to summarise, the cropping of the banner on mobile occurs only on the Silky Cake Toppers store, even though I am currently using the same banner for both stores to compare mobile visibility.


As I mentioned earlier, both stores are using the same Dawn theme and the same version 9. Any suggestions on how to rectify the cropping issue on the Silky Cake Toppers store would be greatly appreciated.

 

Mac

Accepted Solution (1)

AcidPi
Shopify Partner
61 14 16

This is an accepted solution.

Hi,

 

The issue is the heading content in your banner "Celebrate in style! Browse our most popular cake toppers" and Possibly Image Banner Settings.

If the content is not required like on silkygiftshop.com the quick option is to hide/remove said content.
However if content is required you could try the following.

Add some custom CSS to reduce the size of header in the mobile view or try this below no CSS required.

Go to your theme editor
Under Template - Image Banner

  1. Hide Heading
  2. Add Block - Text
  3. Update Text Block to have "Celebrate in style! Browse our most popular cake toppers"
  4. Move Text Block to be above Button Block
  5. Check/Update the following Image Banner settings
    Banner height = Adapt to first Image
    Desktop content position = Middle Center < this is up to you
    Show container on desktop = True (checked) < this is up to you
    Desktop Capture1.PNG
    Mobile Layout
    Show container on mobile = True (checked) < this is up to youMobile Capture2.PNG

Regards

View solution in original post

Replies 3 (3)

AcidPi
Shopify Partner
61 14 16

This is an accepted solution.

Hi,

 

The issue is the heading content in your banner "Celebrate in style! Browse our most popular cake toppers" and Possibly Image Banner Settings.

If the content is not required like on silkygiftshop.com the quick option is to hide/remove said content.
However if content is required you could try the following.

Add some custom CSS to reduce the size of header in the mobile view or try this below no CSS required.

Go to your theme editor
Under Template - Image Banner

  1. Hide Heading
  2. Add Block - Text
  3. Update Text Block to have "Celebrate in style! Browse our most popular cake toppers"
  4. Move Text Block to be above Button Block
  5. Check/Update the following Image Banner settings
    Banner height = Adapt to first Image
    Desktop content position = Middle Center < this is up to you
    Show container on desktop = True (checked) < this is up to you
    Desktop Capture1.PNG
    Mobile Layout
    Show container on mobile = True (checked) < this is up to youMobile Capture2.PNG

Regards

Macnet
Excursionist
23 1 9

Hi

 

I removed the heading content in my banner ("Celebrate in style! Browse our most popular cake toppers") as you advised. This alone fixed the cropping issue. Thank you for your assistance - very much appreciated.

 

Mac

LarsHHuis
New Member
6 0 0

Hi Mac,

I totally understand the frustration with the mobile banner cropping issue—technology can be so unpredictable! It sounds like you’re doing a great job with both stores.

Speaking of aesthetics, I recently stumbled upon the Camp Hollow website while looking for unique jewelry gifts. Their necklaces are beautifully crafted and have a lovely, whimsical charm. I appreciate how each piece, like the Caterpillar Necklace, tells a story and celebrates nature. If you're ever in need of inspiration or ideas for gift items, I highly recommend checking out their collection—visit here to explore their beautiful designs!

Good luck with your stores, and I hope you find a solution for the banner issue soon!

Best,
Alaric Stanhope