Align Product Title and Vendor Name to Left & Adjust Font Sizes

Store Design
, ,

Topic summary

Main issue: Align product title, vendor name (used to show color options), and price to the left on catalog/product pages, and set independent font sizes for each element on mobile and desktop.

Current status:

  • Mobile: Initially, title and price were left-aligned but vendor name wasn’t; after applying some provided code, all elements are now left-aligned.
  • Desktop: Product title remains centered; vendor name alignment status on desktop not confirmed; font size adjustments for title/vendor/price on both devices still needed.

Proposed approach: A contributor suggested editing theme.liquid and inserting custom code before . The exact code isn’t visible in the post; screenshots were shared.

Resources provided: Store URL and password, plus images/screenshots. Code changes and images are central to the solution.

Open items:

  • How to left-align the product title (and confirm vendor name) on desktop.
  • How to set separate font sizes for title, vendor name, and price on mobile vs. desktop.

Resolution: Not yet resolved; further CSS/theme updates required.

Summarized with AI on January 17. AI used: gpt-5.
2

Hi @LEEDIA ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Beae_Anthony_0-1696158134383.png
Beae_Anthony_0-1696158134383.png381×430 52.8 KB

Beae_Anthony_1-1696158144021.png
Beae_Anthony_1-1696158144021.png888×421 124 KB

Best regards,

Anthony