Product Page Flavour Font Style/Size

[beckstead]

How would one go about changing the font style and size for in stock and for the both flavour sections of the product page?

 

[rajweb]

Hello @beckstead ,

To change the font style and size for the "IN STOCK" and "Flavour" sections on your Shopify product page, follow these steps:

Edit your theme’s CSS file:

Follow These Steps:

1. Online Store > themes > Edit Code

2. under the "Assets" folder, Find your theme's CSS 9it might be named theme.css , base.css , and styles.css , or something similiar.)

3. Add the following CSS at the end of the file:

/* Custom font and size for IN STOCK section */
.in-stock { 
    font-family: 'YourCustomFont', sans-serif; /* Replace with your font */
    font-size: 18px; /* Adjust size */
}

/* Custom font and size for Flavour section */
.product-flavour, .flavour-select { 
    font-family: 'YourCustomFont', sans-serif; /* Replace with your font */
    font-size: 16px; /* Adjust size */
}

: Replace "YourCustomFont"  with the actual font you want to use, and adjust the font-size  values as per your preference.

After adding your custom styles, click the "Save" button to apply the changes.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma

[rajweb]

Could you please provide me with the URL to your store? This will help me assist you more accurately and provide the exact solution you're looking for.

Thank you!

[beckstead]

https://the-fitness-group-canada.myshopify.com/

[steve_michael2]

It is password protected, please share the password

[beckstead]

yohnti

[steve_michael2]

Hi @beckstead ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.product-single .inventory-content>#variant-inventory {
    font-family: 'Roboto';
    font-size: 14px; 
}

It's up to you to decide what style to use and how large the size should be. If a larger size is needed, increase it, and if you want a different font, feel free to change it.

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[beckstead]

Where should the theme.css / based.css file be?

[steve_michael2]

[beckstead]

When I search for base nothing comes up.

I'm using the demati theme.

[steve_michael2]

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
.product-single .inventory-content>#variant-inventory {
    font-family: 'Roboto';
    font-size: 14px; 
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[steve_michael2]

[steve_michael2]

@beckstead 

Also, add this code for the flavor section.

<style>
.product-single .inventory-content>#variant-inventory {
    font-family: 'Roboto';
    font-size: 14px; 
}
label.variants__label {
    font-size: 13px !important;
    font-family: monospace;
}
select.js-single-option-selector.single-option-selector-template--21315893494045__product-template.product-form__input {
    font-size: 14px;
    font-family: monospace;
}
</style>

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[steve_michael2]

Hi @beckstead  , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks