Symmetry theme- changing the font size of buttons

Store Design

Topic summary

A Shopify store owner using the Symmetry theme wants to customize button styling, specifically increasing font size and making text bold.

Solutions Provided:

  • Add CSS code to theme.liquid file before the </body> tag
  • Use font-size: 16px and font-weight: 800 properties targeting button classes
  • Multiple community members provided working code snippets

Additional Requests:

  • Make button background transparent on hover (solution provided via additional CSS)
  • Modify button border display

Technical Issue:

  • Border modification blocked by existing !important property in main.css file (line 4976)
  • User needs to either remove the !important flag or modify border settings in the respective section

Status: Ongoing - the original poster is working through implementation with community support, addressing styling conflicts as they arise.

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

Hello,

I would like to increase the font size only in the buttons and and make them bold. How can I do this?

My store: https://www.drollsport.com

Password: Wixa

Thank you in advance,

Tomek

Zrzut ekranu 2024-06-3 o 13.01.31.png
Zrzut ekranu 2024-06-3 o 13.01.31.png960×1012 179 KB

2

Hello @elotomo

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.text-overlay__inner span.text-overlay__button.btn.btn--primary { font-size: 16px !important; font-weight: 800; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

1 Like
3

Hello @elotomo

I understand you are looking to increase the font size of buttons & make them bold.

Please use the below CSS code for the desired changes.

Add the code at the bottom of theme.liquid file before tag and save.

[Please feel free to change the font-size pixel ]

Output will be like this -: https://prnt.sc/dIoDJ8ZnVOnV

I hope the code helps you.

Please share if you have any queries.

Thank you.

1 Like
4

Hi,

Thank you!

I also wanted to ask if it is possible to change the background of the button to transparent? So that when you hover over the button, there is no colored background, only a transparent one. Just like in the photo below.

Zrzut ekranu 2024-06-3 o 13.32.02.png
Zrzut ekranu 2024-06-3 o 13.32.02.png2548×1020 525 KB

5

Hi,

Thank you!

I also wanted to ask if it is possible to change the background of the button to transparent? So that when you hover over the button, there is no colored background, only a transparent one. Just like in the photo below.

Zrzut ekranu 2024-06-3 o 13.32.02.png
Zrzut ekranu 2024-06-3 o 13.32.02.png2548×1020 525 KB

6

Hello @elotomo

Please add this code at the bottom of the theme.liquid file before tag for making the button background transparent on hover.

Output -:

Anshul_arora_0-1717417652728.png
Anshul_arora_0-1717417652728.png1577×774 217 KB

I hope this helps.

Thank you.

7

Dear @Anshul_arora ,

just one more thing, how can I modify your code to display the button border?

Thank you!

1 Like
8

Hello @elotomo ,

You have already applied border with ‘important’ property because of this our border code will not work,

You have remove the important or make change of the border in the respective section.

This code can be find in main.css file of your store.

Anshul_arora_0-1717419119273.png
Anshul_arora_0-1717419119273.png1586×767 223 KB

[Code may be written in 4796 line in main.css file https://prnt.sc/uYB3h4zFS1vc ]

I hope this helps.

Thank you.

9

Thank you!