Jump to content

Center Align Header on Related Products Section

Go to solution Solved by tuanphan,

Recommended Posts

Does anyone know how to center the "Related Products" text and the images on the shop pages? I'm not a fan of the text aligned to the left on the header. I like the text under the images aligned to the left. I only want the header text and images to be aligned to the center. I was able to achieve something similar in the Additional Info in the product details area, but it shows the same featured products on every page. I would rather them link based on tags.  I have attached some screen shots below of how it looks and how I'd rather it look. I have blocked out the product images as I am not ready to launch the store page yet. The grey boxes I do not want as part of the style sheet. Thanks!

Screen Shot 2023-07-20 at 9.26.03 PM.png

Screen Shot 2023-07-20 at 9.25.52 PM.png

Edited by thehorn5
Link to comment
  • Replies 6
  • Views 1k
  • Created
  • Last Reply

Top Posters In This Topic

Please provide a link to the page on your site.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
  • Solution
On 7/21/2023 at 10:16 PM, thehorn5 said:

You can add this to Design > Custom CSS

/* center related products heading */
h2.ProductItem-related-label {
    text-align: center;
}

 

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
  • 10 months later...

Hey

Thanks for this code!

only issue i am having is that the text size is not consistent on mobile and desktop!

can you help to rectify this please?

 

Screenshot 2024-06-03 at 11.51.52.png

Screenshot 2024-06-03 at 11.51.45.png

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.