What's your biggest current challenge? Have your say in Community Polls along the right column.

How to make product page & collection page title/ filter full width

Solved

How to make product page & collection page title/ filter full width

lilyioti
Excursionist
15 0 4

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: collection page full width.PNGproduct page full width.PNG

Accepted Solution (1)
Rony_ShopiDevs
Shopify Partner
11 1 0

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%;
    }
}

 

Rony_ShopiDevs_0-1727178350065.png

 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers

View solution in original post

Replies 7 (7)

BSSCommerce-HDL
Shopify Partner
2305 834 908

Hi @lilyiotiCan 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

BSSCommerce-HDL
Shopify Partner
2305 834 908

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

lilyioti
Excursionist
15 0 4

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.

product info full width.PNG

 

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:

 

you may also like left justified.PNG

Rony_ShopiDevs
Shopify Partner
11 1 0

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%;
    }
}

 

Rony_ShopiDevs_0-1727178350065.png

 

Found it helpful? Please like and mark the solution that helped you.
Slider Revolution - Create sliders, theme sections, banners, videos, pages, advanced animation, and social feeds.
Essential Grid Gallery - Create photo galleries, video galleries, portfolio galleries, product gallery, collection gallery and more.
EasyDisplay: Product Showcase - Easily display collections, related products, discounts, recently viewed items, and best sellers
lilyioti
Excursionist
15 0 4

This worked brilliantly ! Thank you 🙂

nidhidhiman004
Shopify Partner
84 6 8

Hi @lilyioti 

can you please give us the url of your website.

thanks.

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me - nidhidhiman004@gmail.com Skype: live:.cid.4caf71e25fc2bb1e, Email me -rahul@prowebcoder.com - Skype: live:dhiman.639

websensepro
Shopify Partner
1289 145 166

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!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial