Center product page info on mobile only

Store Design
, ,

Topic summary

Goal: On mobile product pages, center only the intro offer (green background) and the inventory tracker text, while keeping the rest left-aligned.

What happened:

  • An initial CSS snippet was suggested by one helper (added in theme.liquid) that centered broader sections. Screenshots showed the effect but it affected more than desired.
  • Another set of CSS rules was proposed to center various product info and variant picker blocks on mobile, but this still targeted wider areas than requested.
  • Final accepted solution: add a mobile-only CSS rule to center just the green promo badge by targeting .feature-badge in assets/theme.css using @media (max-width: 767px), with display: flex; margin: 0 auto; justify-content: center.

Outcome:

  • The store owner confirmed the final CSS works and is satisfied.
  • Resolution status: Resolved. Note: While the original request also mentioned the inventory notice, the accepted code explicitly centers the green promo badge; no separate code for the inventory notice was shown in the final message.

Notes: Screenshots illustrated before/after centering on mobile.

Summarized with AI on December 25. AI used: gpt-5.
5

Apologies for the confusion, just simply add this code then.

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1719928201940.png
Moeed_0-1719928201940.png371×659 57.1 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like