Re: Symmetry theme- changing the font size of buttons

Solved

Symmetry theme- changing the font size of buttons

elotomo
Tourist
12 0 2

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

Accepted Solution (1)

techlyser_web
Shopify Partner
1820 338 364

This is an accepted solution.

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 </body> on theme.liquid
<style>
 .text-overlay__inner span.text-overlay__button.btn.btn--primary {
     font-size: 16px !important;
     font-weight: 800;
  }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com

View solution in original post

Replies 8 (8)

techlyser_web
Shopify Partner
1820 338 364

This is an accepted solution.

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 </body> on theme.liquid
<style>
 .text-overlay__inner span.text-overlay__button.btn.btn--primary {
     font-size: 16px !important;
     font-weight: 800;
  }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com
elotomo
Tourist
12 0 2

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

Anshul_arora
Navigator
450 128 93

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 </body> tag and save.

<style>

span.btn {
font-size: 17px;
font-weight: bold;
}

</style>


[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.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
elotomo
Tourist
12 0 2

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

Anshul_arora
Navigator
450 128 93

Hello @elotomo 


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

<style>

.btn:hover {
background: transparent !important;
}

</style>


Output -:

Anshul_arora_0-1717417652728.png


I hope this helps.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
elotomo
Tourist
12 0 2

Dear @Anshul_arora

 

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

 

Thank you!

Anshul_arora
Navigator
450 128 93

 

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

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


I hope this helps.


Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here
elotomo
Tourist
12 0 2

Thank you!