Shopify themes, liquid, logos, and UX
Hi everyone
When I look at any successful eCommerce store all of their product pages fit within a default size in the centre of the screen. Currently my product page is completely zoomed in. All I would like to do is condense the product page to default sizing on the "product page" section only. To confirm, I want to keep the hero banners & FAQ full width at this stage, Here is the URL to inspect.
https://alcatrazgear.com/products/gt280-wireless-headphones-touch-control-earbuds-led-display-headse...
Solved! Go to the solution
This is an accepted solution.
Yes, you can add the code to theme.liquid if you have none of those files. Then, you can use this snippet and insert it right before the closing head tag
<style>
.product-page {
/* You can adjust this value according to your preference */
max-width: 1200px;
margin: 0 auto;
}
</style>
Like this
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Hi @DaveyAlcatraz,
Here are the steps you can follow:
1, Navigate to Online Store > Themes > Edit Code.
2, Locate and open the base.css (or theme.css, custom.css) file.
3, Paste the code snippet provided below at the bottom of the file, then save your changes.
.product-page {
/* You can adjust this value according to your preference */
max-width: 1200px;
margin: 0 auto;
}
Here is the result
We hope this assists in resolving the issue.
If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Thanks for your response and that looks like exactly what I need, I have none of those files but could it be theme.liquid since it's the Bullet theme?
This is an accepted solution.
Yes, you can add the code to theme.liquid if you have none of those files. Then, you can use this snippet and insert it right before the closing head tag
<style>
.product-page {
/* You can adjust this value according to your preference */
max-width: 1200px;
margin: 0 auto;
}
</style>
Like this
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Thank you so much! This is a huge help. As a thank you I'm going to download Salepify, I need something like that anyhow.
Thank you for downloading our app! We are pleased to offer a solution designed to elevate your sales strategy with features such as tiered discounts, cart rewards, and seamless integration with Shopify. Should you require any customization or assistance, please do not hesitate to contact us. Our team is ready to support you.
If our suggestions are useful, please let us know by giving it a like or marking it as a solution.
Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)
Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025