Mobile banner in one Dawn v9 Shopify store (Silky Cake Toppers) appeared cropped, while the same banner in another Dawn v9 store (Silky Gift Shop) displayed fully. Both used the identical image, indicating a configuration/content issue rather than the theme or asset.
Root cause identified: the banner’s Heading text (“Celebrate in style! …”) forced the Image Banner layout to crop the image on mobile. In Dawn, overlay content can alter the banner’s aspect and trigger image cropping behavior.
Proposed fixes:
Quick fix: remove or hide the Heading block. Alternatively reduce heading size with custom CSS for mobile.
Content-preserving option (no CSS): replace Heading with a Text block, move it above the Button block, and adjust Image Banner settings: Banner height = Adapt to first image; position as desired; enable Show container on desktop/mobile.
Outcome: the user removed the heading text, which immediately resolved the cropping on mobile. Status: resolved. Images/screenshots were shared to illustrate settings.
Summarized with AI on December 28.
AI used: gpt-5.
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.
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
Hide Heading
Add Block - Text
Update Text Block to have “Celebrate in style! Browse our most popular cake toppers”
Move Text Block to be above Button Block
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
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.
