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

hayleyclark103 · May 14, 2022

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 May 14, 2022 by hayleyclark103

tuanphan · May 15, 2022

#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.

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

Recommended Posts

hayleyclark103

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

tuanphan

Link to comment

Create an account or sign in to comment

News

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources