Jump to content

Change font of drop-down menu in product listing

Recommended Posts

On 2/27/2020 at 7:41 AM, MarikaS said:

Add to Home > design > Custom CSS

.ProductItem-details .variant-option select option {
    font-family: monospace !important;
}
.ProductItem-details .variant-option select {
    font-size: 20px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 3 months later...

Hi @tuanphan, 

that custom css didn't seem to work on my site. It isn't live yet but looks like this (attached screen shot).  Any suggestions for the below code?

/* ProductItem-details */
.variant-option select option {
    font-family: roboto !important;
}
.ProductItem-details .variant-option select {
    font-size: 16px;
}

Screen Shot 2020-06-25 at 1.38.27 pm.png

Link to comment
5 hours ago, runsweatinspire said:

Hi @tuanphan, 

that custom css didn't seem to work on my site. It isn't live yet but looks like this (attached screen shot).  Any suggestions for the below code?

/* ProductItem-details */
.variant-option select option {
    font-family: roboto !important;
}
.ProductItem-details .variant-option select {
    font-size: 16px;
}

 

You can setup password & share url

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
12 hours ago, runsweatinspire said:

@tuanphan

Sorry, I don't understand. The password is already setup but the site isn't live as yet. deeksdemosite.squarespace.com

 

#productDetails .product-variants .variant-option select {
    font-family: roboto !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
  • 2 months later...

Hi,

I'm not a coder but I managed to fix my issue by combining snippets I found on the forum. The second snippet is what changed the font on the dropdown. I use the Brine template if that helps.

 

#productDetails .product-variants .variant-option select {
    font-family: Montserrat !important;
}

/* Variant dropdown size */
.ProductItem-details .variant-option select option {
    font-size: 12px;
  font-family: Montserrat;
}

Link to comment
  • 1 month later...

Hello

I have the same problem.  The Body text in my website is Myriad Pro but the dropdown font looks like Times New Roman. I would like it to be the same as the rest of the website.  I am NOT A CODER so don't understand the fixes above.  Please can someone give me a very clear idiot's guide to how to fix the problem?

Thank you!

Shop.jpg

Link to comment
21 hours ago, CoWT said:

Hello

I have the same problem.  The Body text in my website is Myriad Pro but the dropdown font looks like Times New Roman. I would like it to be the same as the rest of the website.  I am NOT A CODER so don't understand the fixes above.  Please can someone give me a very clear idiot's guide to how to fix the problem?

Thank you!

If you share link to product in screenshot, we can give code easier

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 11 months later...
On 10/14/2021 at 12:48 PM, Nicolem said:

Hi all and @tuanphan, I am also having trouble with this. I've tried all the code options mentioned above and none of them have worked for me. I am on the Montauk template. Any assistance would be greatly appreciated ☺️

Can you share link to a product on your site?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.