How to make the variation font text bigger

Store Design
, ,

Topic summary

A user needed help increasing the font size of selected product variant text (e.g., color names) on their Shopify store, which appeared too small.

Solutions Provided:
Two support teams (PageFly and GemPages) offered similar CSS-based solutions:

  • Add custom CSS code to the theme.liquid file
  • Insert the code above </head> tag (or </body> if </head> is unavailable)
  • The CSS targets variant text to make it larger and bolder

Outcome:
The user successfully implemented the solution and marked both responses as accepted answers.

Follow-up Question:
The user then asked whether the variant text color could change to match each selected color option. PageFly-Victor responded that this would require extensive custom coding, suggesting either hiring an expert developer or using a third-party app to achieve this functionality.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
1

Could someone please assist me with this matter?

I am seeking to adjust the font size of the selected variant. For instance, when a color is selected, the corresponding name appears at the top of the display in a font size that is quite small. I would appreciate it if someone could guide me on how to make the text larger and bolder, as shown in the screenshot below: :backhand_index_pointing_down:

sblum_1-1680025673408.png
sblum_1-1680025673408.png589×202 11 KB

2

Hi @sblum

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Victor | PageFly

3

Hello @sblum ,

You can follow these steps:

  1. Go to Online Store->Theme->Edit code

GemPages_0-1680054976818.png
GemPages_0-1680054976818.png400×193 29.2 KB

  1. Open your theme.liquid file, paste the below code before

GemPages_1-1680054996866.png
GemPages_1-1680054996866.png1604×894 65.2 KB

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

4

Thank you but my theme does not have it has but I assume its the same thing that’s why I selected both as accepted solutions

5

Thank you it worked :flexed_biceps:

6

@GemPages How about is there an option that the color of the text should change to each color selected?

7

@PageFly-Victor
How about is there an option that the color of the text should change to each color selected?

8

Hi @sblum
Thank you for asking, about that it will need a lot of custom code to achieve that.

You can use a 3rd app or you can hire an Expert Developer to do that for you.

Thank you