Jump to content

Edit the Display of related products

Recommended Posts

  • Replies 6
  • Views 1.2k
  • Created
  • Last Reply
42 minutes ago, Hails0630 said:

Site URL: https://www.mulberrypaperco.com/cambridge-collection/p/invitation-set

Hello, 

I currently have the related products feature turned on. I'd like to only display 5 related products. but ideally I'd like them to all be on the same line right below the product on the product page. Currently the 5 products are displaying on two different lines. Is there some code to edit this?

Thank you, 

Hails

Add to Design > Custom CSS

/* related products */
@media screen and (min-width:992px) {
div.ProductItem-relatedProducts .list-grid {
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
2 minutes ago, tuanphan said:

Add to Design > Custom CSS


/* related products */
@media screen and (min-width:992px) {
div.ProductItem-relatedProducts .list-grid {
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
}
}

 

Thank you!! This worked perfectly!!

Link to comment
2 hours ago, tuanphan said:

Add to Design > Custom CSS


/* related products */
@media screen and (min-width:992px) {
div.ProductItem-relatedProducts .list-grid {
    grid-template-columns: repeat(5,minmax(0,1fr)) !important;
}
}

 

This worked, but is there a way to reduce the padding around the related products? Especially at the bottom where it meets the footer.

 

thank you!!

Link to comment
On 5/28/2021 at 9:20 PM, Hails0630 said:

Site URL: https://www.mulberrypaperco.com/cambridge-collection/p/invitation-set

Hello, 

I currently have the related products feature turned on. I'd like to only display 5 related products. but ideally I'd like them to all be on the same line right below the product on the product page. Currently the 5 products are displaying on two different lines. Is there some code to edit this?

Thank you, 

Hails

Add to Design > Custom CSS

.view-item article.ProductItem {
    padding-bottom: 0px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 5/31/2021 at 11:01 PM, Hails0630 said:

Thank you!!

 

Do you need support with these?

Site URL: https://www.mulberrypaperco.com/

1. (Tablet-Footer) Make copyright text one line?

mulberrypaperco.com-01-min.png

2. (Mobile-Footer) Move logo to top of page?

mulberrypaperco.com-02-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.