Jump to content

Coding Help Needed for Commerce Site! (Fonts, Mobile View & Size Guide Recommendations)

Go to solution Solved by tuanphan,

Recommended Posts

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

Hi all!

I'm needing some advice, assistance and or coding for one of my client's sites: www.collaclothing.com. Password is colla2022. It is a 7.1 site.

  • How can I change the font for the announcement bar/banner?
  • How can I change ONLY the description font on the product pages?
  • How can I change ONLY the pricing font on the product pages?
  • How can I change the fonts of the product title, sizing, and all pricing text within the shopping cart page?
  • How can I change all the fonts on the checkout page?
  • How can I edit the maximum desktop dimensions for the footer's white 'collar' image?
  • How can I edit the maximum width of this footer 'collar' image for movile devices, and recentre both this and the 'Colla Clothing' text?
  • What is the best way to add a clothing size guide on the product pages? I don't want it to sit underneath the product photos, I'd rather it sit next to 'Add to cart' or near that area. And I'd rather it be some sort of button or link text to lightbox, or accordion style. I've seen the third party integrations suggested in other threads, but would prefer a free option through coding or other advice.

Thank you so much! Hope to find some solutions below.

FYI - I also have SquareKicker access if there is anything I could implement through there re: size guide.

Edited by hayleyclark103
Link to comment
  • Replies 1
  • Views 297
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • Solution

#1. How can I change the font for the announcement bar/banner?

Add to design > Custom CSS

/* announcement bar */
div.sqs-announcement-bar-text * {
    font-family: monospace;
    font-size: 50px;
}

#2. How can I change ONLY the description font on the product pages?

Use this

/* product description font */
div.ProductItem-details-excerpt * {
    font-family: fantasy !important;
    font-size: 50px;
}

#3. How can I change ONLY the pricing font on the product pages?

Shop Page + Individual Products?

#4. How can I change the fonts of the product title, sizing, and all pricing text within the shopping cart page?

Use this CSS

/* product name */
a.cart-row-title {
    font-family: fantasy !important;
}
/* price */
p.cart-row-price {
    font-size: 30px;
}
/* Subtotal */
p.cart-subtotal-price {
    font-size: 30px;
}

#5. How can I change all the fonts on the checkout page?

Not Possible for security reasons

If it works, let me know, we will check other.

 

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

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.