Why is my store header shrinking on product pages?

Store Design

Topic summary

A store owner reports that their header appears incorrectly on product pages, with the page title becoming invisible. The issue also occurs on mobile devices.

Root Cause Identified:

  • The product page header uses a <div> tag instead of an <H1> tag like other pages
  • This structural difference is causing the display problem

Proposed Solution:
Add custom CSS to the theme:

  1. Navigate to Shopify admin → Online Store → Edit code
  2. Locate the theme-styles.css file
  3. Add specific CSS styling at the end of the file to format the .header-logo div element (including font properties, text transformation, and line height)

The solution involves matching the header styling from the homepage to ensure consistency across all pages. The discussion appears to provide a technical fix but awaits confirmation of whether it resolved the issue.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi all

Please can anyone assist, My store header when you click on a product goes funny and you cant see the page title?

see link below when a product is clicked, this also happens on mobile?

https://ljvapes.co.uk/products/jwn6842078855286?variant=41306771685508

2

Hi @Ljvapes

We checked and saw that on the product page, the header title is a

tag, not a

like other pages. You can check the cause of why it is so. Also, you can edit by following these steps (based on the header of the home page):

  1. From Shopify admin → Online store → Edit code:
![view (10).png|1891x940](upload://gnqBIzcqycLi7gAB4coGQZQWUqr.png)
  1. Find the theme-styles.css file and add the following code at the end of the file:
div.header-logo {
  font-size: 2.307692308em;
  text-transform: uppercase;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}

I hope that this can help you solve the issue.