Success
How do I get banners to look better in desktop and mobile?
Use separate banner sections and visibility settings to tailor layouts for desktop and mobile.
- Shopify documentation on uploading images: Best practices for image banners, aspect ratios, and focal points
- Shopify documentation on theme editor features overview: Preview and compare desktop and mobile layouts
- Shopify documentation on customizing sections
- Company XYZ documentation on visibility settings
Start with a single Banner section. Align lets you adjust the banner’s aspect ratio and background media for mobile, so you can usually improve the smaller-screen layout without creating a second version.
Adjust the banner for mobile
Section titled “Adjust the banner for mobile”- Open the Banner section in the theme editor.
- Choose the aspect ratio and background media you want to use on desktop.
- Set a taller mobile aspect ratio if the image or text feels cramped on smaller screens.
- Add mobile-specific background media when the desktop image does not crop well on mobile.
- Preview both desktop and mobile before saving.
For preview tools, see Shopify documentation on theme editor features
Keep important text and image details away from the edges, where cropping is most likely to occur. For image guidance, see Shopify documentation on uploading theme images
Use separate banners only when needed
Section titled “Use separate banners only when needed”If the mobile version needs different text, content, or a substantially different layout, duplicate the Banner section. Use Visibility settings to show one version on desktop and the other on mobile.