Solved

How to change the font size of the "in-stock" text

GrizzlyMan
Tourist
11 0 2

Hi, I'm asking for advice on how to change the size and color of the text, it's the inscription "in stock" and the price of the product? Thank you

change font size.PNG

Accepted Solution (1)
ViktorasBui
Shopify Partner
12 1 0

This is an accepted solution.

I believe css files should be inside assets directory. From source code i would guess you should have screen.css file. It might be enough to just put this code at the end of this file

Expertise in:
Shopify Design Changes | Shopify Custom Coding | Custom Modifications

View solution in original post

Replies 11 (11)

ViktorasBui
Shopify Partner
12 1 0

Hello, you could modify css file in your theme or check your theme settings, it might have this feature already created

Expertise in:
Shopify Design Changes | Shopify Custom Coding | Custom Modifications
GrizzlyMan
Tourist
11 0 2

Hi, thanks for the quick reply, can I ask you for more details on how to do this? I'm an amateur at this. Thank you!

ViktorasBui
Shopify Partner
12 1 0

Yes, you could visit this link and learn more about theme settings from shopify: https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings If you couldn't find any useful settings in your theme, you would need to modify your theme files. I am web developer, so it would be easy for me to do it, not sure if you have experience with modifying theme files. if first option does not work, I would just use inspect element in your browser while having mouse cursor on price text, see what tag it uses and search it in your theme files and modify font-size attribute in .css file. Let me know if you need some more help 🙂

Expertise in:
Shopify Design Changes | Shopify Custom Coding | Custom Modifications
GrizzlyMan
Tourist
11 0 2

Hi, thank you! I found the color change in the theme settings, but unfortunately the font size is not there, I found the code (screenshot) but I don't know how to find it in the code editor. Thank you 🙂
Výstřižek.PNG

ViktorasBui
Shopify Partner
12 1 0

Can you give me a link of your store and I will take a look which element you should modify?

Expertise in:
Shopify Design Changes | Shopify Custom Coding | Custom Modifications
GrizzlyMan
Tourist
11 0 2

Yes, https://vyprodame.cz/ 
Pass: 0000

ViktorasBui
Shopify Partner
12 1 0

Take a look at stock element. Right now this stock text inherited font-size from body. Currently 14px is default, you could increase or decrease it. You could add this code to your css file:

.stock {
font-size: 14px;
}

 

Expertise in:
Shopify Design Changes | Shopify Custom Coding | Custom Modifications
GrizzlyMan
Tourist
11 0 2

I know I'm asking you a lot of questions, I'm sorry.

But I don't know where to put this code. I know I have to click on "edit code" but then I don't know which section to put it in. Thank you

Výstřižek.PNG

ViktorasBui
Shopify Partner
12 1 0

This is an accepted solution.

I believe css files should be inside assets directory. From source code i would guess you should have screen.css file. It might be enough to just put this code at the end of this file

Expertise in:
Shopify Design Changes | Shopify Custom Coding | Custom Modifications
GrizzlyMan
Tourist
11 0 2

Thank you very much, I'm done! 🙂 

beauxbreaux
Shopify Partner
183 13 32

Hello,

 

You can throw in some custom CSS you just need to go to your theme customizer and while in your customizer click through until you get to that product page. Once you are on that page select click anywhere in that page to select the page. The vast majority of themes have a section you can scroll down to that says Custom CSS. It looks like this:
Screenshot 2023-12-27 122609.png

Click it.

 

You can try adding this code:

 

.stock {
  font-size: 16px;
}

 

 

This is just a generic size, you did not state a size nor a color so we can't really give you exactly what you want but you can play around with the sizes. Now for the color you would add in the line it in like this:

 

.stock {
  font-size: 16px;
  color: black;
}

 

 

Again changing the color to whatever you want. 

 

Now for the price, we can't see the class name for that in your photo ( it cuts off ) but the same way you got the class from the QTY you can get it from the price. You might even be able to just try .price-item as the selector or .price

 

So then the whole code would look like this: 

 

.stock {
  font-size: 16px;
  color: black
}

.price {
  font-size: 16px;
  color: green;
}

 

 

Your URL would help us know for sure.

Alternatively...


You can also try adding this globally or in your css file located in your assets folder. It is usually named something like base.css or main.css or something along those lines. Globally in your <header> section is usually located in your theme file or your index.js file. If you put it in that file within your header tags you would need to wrap the css in <style> tags like this:

 

<style>

 .stock {
  font-size: 16px;
  color: black
}

.price {
  font-size: 16px;
  color: green;
}

</style>

 



 

Beaux Barker
Developer