Full Portrait Image on Mobile

Store Design

Topic summary

A user seeks help creating a full-width portrait banner image for mobile devices on their Shopify store homepage, with text overlaying the image instead of showing background color.

Two approaches considered:

  • Replace the current landscape image with a separate portrait version
  • Resize and reposition the existing landscape image

The user requests specific implementation steps, including code snippets and placement instructions.

Solutions offered:

  • One responder provided CSS code to paste in the theme.liquid file before the </head> tag
  • Another suggested using separate image sections for desktop and mobile views, allowing different configurations for each device type
  • For mobile layouts, unchecking the “container” option keeps text positioned on top of the image

Status: The discussion remains open with multiple technical solutions proposed but no confirmed resolution from the original poster.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Hi guys, I am trying to get my image banner on the home page to be portrait and full-width (no background colour, all texts sit on image).

May I know how I should proceed?

Method 1: As my current image is long and narrow, should I replace it with a separate portrait image?

Method 2: Should I resize and reposition using the current landscape image?

For any suggestions, please do let me know the steps, including what codes to add and where. Thanks so much in advance!

Visit website here: https://chaglo.com/

2

Hi @testchaglo

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

3

I forgot to mention the portrait image is for mobile only. Does this still apply?

Anyway thanks!

4

You may try the solution I’ve offered here https://community.shopify.com/c/shopify-design/slideshow-banner-wanting-it-to-be-diffrent-size-from-desktop-to/m-p/3027157/highlight/true#M791258

This way you can have one image for desktop and another for mobile, in different sections, and you can configure these 2 images with different text and text position, etc.

If you uncheck “container” for mobile layout, the text will stay on top of the image.