Jump to content

Batch update to 'Additional Info' sections on all product pages

Go to solution Solved by Lesum,

Recommended Posts

Hi there,

I have a few queries re the above, would greatly appreciate some help.

1. Is there a way to batch apply a font/size change to the 'additional info' sections across all my product pages?

Currently all products have an accordion for additional details. In specific, I would like to change all 'Title' font sizes to paragraph 2.

2. Is there a way to lessen the gap between my product description and the additional info section? At the moment there is quite a large uneven blank space.

Thank you so much!

Link to comment
  • Solution

@a1eisha Hi! Add this code under Website > Pages > Website Tools > Custom CSS to change the accordion title font size on product page to paragraph 2.

@media screen and (max-width: 767px) and (orientation: portrait) {
   #pdp span.accordion-item__title {
        font-size: calc(~'(var(--normal-text-size-value) - 1) * calc(.012 * min(100vh, 900px)) + 1rem');
    }
}

@media screen and (min-width: 768px), screen and (max-width: calc(2188.2px)) and (orientation: landscape) {
   #pdp span.accordion-item__title {
        font-size: calc(~'(var(--normal-text-size-value) - 1) * 1.2vw + 1rem') !important;
    }
}

@media screen and (min-width: 2189.2px) {
  #pdp span.accordion-item__title {
        font-size: calc(~'var(--normal-text-size-value) * 1rem') !important;
    }
}

To reduce the space between product description and additional info section, you can add this code

#pdp .ProductItem .ProductItem-additional {
    margin-top: 0 !important;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.