Related Products Section - Modify

Store Design
, , ,
1

Hello!

I would like to make my related products section mostly the full width of the page (97%) and make the card background white! Does anyone know how to code this? Struggling to find the correct class to target.

PW: ellaella

Screenshot 2025-08-13 at 11.43.07
Screenshot 2025-08-13 at 11.43.071920×1084 78.6 KB

2

You can add the following CSS to your base.css file:
.product-card-wrapper .card--media .card__inner { background: white; }
To make it full width, use the customization option available for full-width layout.

3

Hi @ellacoker

Well, product-recommendations element have class “page-width” that takes variable set in theme for 120rem (1200px). You can if you plan to have mostly full width section, to change that setting in theme. Or add similarly a new class “page-almost-full-width” that will be 97% width and add it in section code.

But to simplify you can target “product-recommendations” element itself. You can try in Custom CSS section or base.css

product-recommendations {
  margin: 0 auto;
  max-width: 97% !important;;
  width: 97% !important;
  display: block;
}
4

Hi @ellacoker

To change related product section width you can go to Admin → Themes → Online Store → Edit Code → assets/base.css

@media screen and (min-width: 990px){
  .page-width:has(.related-products__heading) {
    max-width: 97%;
  }
}

That’s code will help you achieve your expert.

5

Hmm that css unfortunately didn’t work.

6

thank you, however, in mobile there is a border around the white background now. any idea how to get rid of this too? also, there is not option to bring it out full width unfortnately.

7

It sounds like the border you’re seeing on mobile is coming from either padding, margin, or a border style set on the container/wrapper element.
You can remove it by adding custom CSS to your theme:

@media screen and (max-width: 749px) {
  .YOUR-CONTAINER-CLASS {
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

Replace .YOUR-CONTAINER-CLASS with the actual class or ID of the section you’re editing (you can find this by right-clicking → Inspect in your browser).

For the full-width issue, most Shopify sections are wrapped in a .page-width or .container class, which limits their width. You can override this too:

@media screen and (max-width: 749px) {
  .page-width {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

After adding this in Online Store → Themes → Edit code → Assets → theme.css, clear your cache and recheck on mobile.

8

Hello @ellacoker

Login to Theme Customizer > Theme settings > Custom CSS and add this code

@media screen and (min-width: 750px) {
    .page-width {
       max-width: calc(100% - 50px)!important;
    }
}