Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

CSS to change variant display


Cianfrani

Question

Site URL: https://www.cianfranicoffeeroasters.com/order-coffee/fulton-cycle-hw6sc

New to SquareSpace so I'm a bit frustrated that I can't change the layout of the product block, or change the font of the variant drop down menus. If you look at a sample page (https://www.cianfranicoffeeroasters.com/order-coffee/fulton-cycle-hw6sc) you can see the variants stick out like a sore thumb. 

1) How can I change the font to match the font on the template?
2) How can I change the layout of the variants so they are not displayed one below the other, like they are now, but in two columns? 

Link to post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

8 answers to this question

Recommended Posts

  • 1

Add to Home > Design > Custom CSS

/* tested by tuan */
/* question 01 */
.variant-option select, .variant-option select option {
    font-family: freight-sans-pro !important;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 1
21 hours ago, Cianfrani said:

Exactly like that!

 

Add to Home > Design > Custom CSS

.product-variants {
    column-count: 2;
}
#productDetails .product-variants .variant-option {
    margin-top: 0;
}

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0
Posted (edited)

Thanks tuanphan! That worked great! I added the font-size attribute to make it a closer match. 

Anyone have suggestions on question 2?

 

Edited by Cianfrani
Link to post
  • 0
2 hours ago, Cianfrani said:

Thanks tuanphan! That worked great! I added the font-size attribute to make it a closer match. 

Anyone have suggestions on question 2?

 

You mean like this?

image.thumb.png.b9a35162952b7f3ea74cabace7bda113.png

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...