Hello everyone, on my product pages, the assets of said page (product image, name, price etc.) are going above the main menu and it looks horrible. Please see the attached photo below. Is there any way to bring down the product page assets lower on the page? Thank you!
Topic summary
A Shopify store owner is experiencing a z-index/layering issue where product page elements (images, names, prices) are displaying above the main navigation menu.
Initial Problem:
- Product assets overlap the header menu, creating visual issues
- User provided a screenshot showing the problem
Proposed Solution:
PageFly support (Noah) suggested adding custom CSS code to theme.liquid:
- Navigate to: Online Stores > Themes > More Actions > Edit code
- Insert specific CSS above the
</head>tag - The code appears to adjust positioning/z-index values (adjustable percentage mentioned, likely 15%)
Partial Success & New Issue:
The fix resolved the problem on product and collection pages, but created a new issue on the homepage:
- Homepage video now gets cut off at the top
- Previously transparent header background is now covering content
- User seeking way to apply the fix selectively (exclude homepage)
Status: Ongoing troubleshooting needed to refine the CSS solution for homepage compatibility.
This is Noah from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
You can change the value of 15% if it’s too far.
This is how its works:
Hope this can help you solve the issue
Best regards,
Noah | PageFly
1 Like
Hey Noah, this fix worked perfectly for my “all products” and “collections” tabs, but on my homepage, the video I have is now cutoff on top by the header. Previously the header background was transparent. Any way to apply your above fix to every page except the homepage? Thanks!