Shopify themes, liquid, logos, and UX
I want to know how I can make the product page full width, specifically the product information on the right span all the way to the right (where the cart/bag icon is in the header). Essentially want it to be responsive with screen size.
I also want to know how to make the collection page title + filter & tags span full width also.
Reference images:
Solved! Go to the solution
This is an accepted solution.
Hi,
Please add below css to your store customizer Custom CSS field, then product page content will be full-width as like header.
@media screen and (min-width: 750px) {
.product__info-container {
max-width: 100%;
}
.section-template--23465630728470__related-products-padding {
max-width: 100%;
}
}
Hi @lilyioti, Can you kindly share your store link with us? We will check it and suggest you a solution if possible.
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hi @lilyioti,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head> tag:
<style>
.collection-hero__inner.page-width,
aside#main-collection-filters,
.page-width:has(.product)
{
max-width: 100% !important;
}
</style>
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hi, this worked for the collection page and product page 🙂 however I am testing on an ultrawide screen and im wondering if I can get this product info part to the right side so it is in line with the bag icon in the header, essentially making it responsive.
Also, the "you may also like" section has moved, and would like this to remain left justified so it is in line with the most left menu on the header:
This is an accepted solution.
Hi,
Please add below css to your store customizer Custom CSS field, then product page content will be full-width as like header.
@media screen and (min-width: 750px) {
.product__info-container {
max-width: 100%;
}
.section-template--23465630728470__related-products-padding {
max-width: 100%;
}
}
This worked brilliantly ! Thank you 🙂
Hi @lilyioti
can you please give us the url of your website.
thanks.
Hi @lilyioti ,
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>
<style>
.collection-hero__inner.page-width, aside#main-collection-filters,.pagewidth:has(.product)
{
max-width: 100% !important;
}
</style>
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024