My site is TuneToyz.com and this is what the ladning page currently looks like. I want it to look more like the below image with the product being in the center of the page and being relatively larger compared to mine. I also want to make it so that Home Catalog and FAQ part shows above it(Currently you have to scroll down to make it show). Thank you!
Topic summary
A Shopify store owner seeks help redesigning their product landing page at TuneToyz.com to center and enlarge the product display, while ensuring the navigation menu (Home, Catalog, FAQ) appears above the fold without scrolling.
Initial Solutions Attempted:
- Adding CSS to
base.cssfile withjustify-content: centerfor the product grid - User encountered syntax errors (missing closing brackets)
Working Solution:
A contributor provided custom CSS code to be added in the theme’s <head> section via liquid file editing, which:
- Centers the featured collection grid
- Adjusts header positioning
- Modifies menu item colors
Follow-up Issues Resolved:
- Product appearing too large on mobile devices
- Mobile menu bar displaying white instead of black
- Price alignment needing to be centered
The contributor provided an updated code snippet that addressed these mobile responsiveness and styling concerns. The issue appears resolved, with the store owner expressing gratitude for the assistance.
@TuneToyz are you going to have this single product on this page?
yes I am
@TuneToyz please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css
.product-grid{justify-content: center;}
@TuneToyz where exactly did you add it? I am not seeing this code on browser view
@TuneToyz add closing bracket } to the line 3705 and check
Add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.
.section-header .header-wrapper {
position: relative !important;
}
.header__menu-item {
color: #121212 !important;
}
#shopify-section-template--18148672340180__featured_collection_XTEyrK .grid {
justify-content: center !important;
}
You have too much code in custom CSS of your theme, please add this code to theme.liquid file, in Online store > Themes > Edit code after
1 Like
Thank you so much!
1 Like
Happy I could help!
Hey theres one small problem the product appears to be too big on mobile and the menu bar on mobile is white instead of black would it be possible to fix this. I want it to look like the first image. Thanks again!
Also would there be a way to make the price be centered?
Thanks again!
1 Like
Very welcome!