Need Help Adding Glow Effect to All Texts, Buttons, and Links Across the Theme

Solved

Need Help Adding Glow Effect to All Texts, Buttons, and Links Across the Theme

hatmakerr
Shopify Partner
5 0 1

I've successfully added a glow effect to the product text on my Shopify store, but now I'd like to apply the same effect to all texts, buttons, and links site-wide. I'm not sure which theme files I need to modify to achieve this.

Could someone please guide me on which specific theme files should be edited to apply the glow effect globally?

I've attached an image of the current glow effect on the products for reference.

Thanks in advance for your help!

 

Best regards,

hatmakerr

hatmakerr_0-1729205600210.png

 

Accepted Solution (1)

TikitaTech
Shopify Partner
38 8 9

This is an accepted solution.

Hi @hatmakerr!

 

To apply the glow effect globally, you'll want to add the CSS to the theme.liquid file.

 

Go to Online Store (Admin) > Themes > Actions > Edit Code

 

5ebfdcc5-d948-4c1b-b695-0aeed8e16747.png

 layout > theme.liquid:

2024-10-18T10_55_38,718245055+07_00.png

 

Scroll down to body

 

2024-10-18T10_56_44,841003807+07_00.png

 

Add the following code:

2024-10-18T11_08_03,408560064+07_00.png

 

For easy copy and paste:

p, a, .button, h1, h2, h3 {
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.7), 0 0 10px rgba(0, 255, 0, 0.7);
}

button, .button, a {
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.7), 0 0 10px rgba(0, 255, 0, 0.7);
}

 

In the example I've shared, the CSS is targeting classes that are specific to my test store setup.

Mainly for the buttons, you might need to adjust the CSS selectors to match the classes used in your theme.

 

Hope this helps! Let me know if you need more details.

Tell me your problem - I want to solve it!

View solution in original post

Replies 4 (4)

DaveedValencia
Shopify Partner
43 7 7

you can do so using the text-shadow parameter. Add the following code to your css.

body{
    text-shadow: 0 0 6px green;
}

 

 

 

TikitaTech
Shopify Partner
38 8 9

Hi @hatmakerr!

 

To apply the glow effect globally, you'll want to add the CSS to the theme.liquid file. 

Go Online Store > Themes > Actions > Edit Code

2024-10-18T10_55_04,849868031+07_00.png

 

Layout > theme.liquid

2024-10-18T10_55_38,718245055+07_00.png

 

Scroll down until you find 'body'

2024-10-18T10_56_44,841003807+07_00.png

 

 

Add in:

 

2024-10-18T11_08_03,408560064+07_00.png

 

 

For easy copy and paste:

 

p, a, .button, h1, h2, h3 {
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.7), 0 0 10px rgba(0, 255, 0, 0.7);
}
button, .button, a {
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.7), 0 0 10px rgba(0, 255, 0, 0.7);
}

 

In the example I've shared, the CSS is targeting the elements and classes that are specific to my test store setup.

For the buttons, you might need to adjust the CSS selectors to match the classes used in your theme.

 

Hope this helps! Let me know if you need anymore details.

Tell me your problem - I want to solve it!

TikitaTech
Shopify Partner
38 8 9

This is an accepted solution.

Hi @hatmakerr!

 

To apply the glow effect globally, you'll want to add the CSS to the theme.liquid file.

 

Go to Online Store (Admin) > Themes > Actions > Edit Code

 

5ebfdcc5-d948-4c1b-b695-0aeed8e16747.png

 layout > theme.liquid:

2024-10-18T10_55_38,718245055+07_00.png

 

Scroll down to body

 

2024-10-18T10_56_44,841003807+07_00.png

 

Add the following code:

2024-10-18T11_08_03,408560064+07_00.png

 

For easy copy and paste:

p, a, .button, h1, h2, h3 {
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.7), 0 0 10px rgba(0, 255, 0, 0.7);
}

button, .button, a {
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.7), 0 0 10px rgba(0, 255, 0, 0.7);
}

 

In the example I've shared, the CSS is targeting classes that are specific to my test store setup.

Mainly for the buttons, you might need to adjust the CSS selectors to match the classes used in your theme.

 

Hope this helps! Let me know if you need more details.

Tell me your problem - I want to solve it!

TikitaTech
Shopify Partner
38 8 9

Hi @hatmakerr!

 

To apply the glow effect globally, you'll want to add the CSS to the theme.liquid file.

 

Go to Online Store > Themes > Actions > Edit Code

 

5ebfdcc5-d948-4c1b-b695-0aeed8e16747.png

 layout > theme.liquid:

2024-10-18T10_55_38,718245055+07_00.png

 

Scroll down to body

 

2024-10-18T10_56_44,841003807+07_00.png

 

Add the following code:

 

p, a, .button, h1, h2, h3 {
    text-shadow: 0 0 5px rgba(0, 255, 0, 0.7), 0 0 10px rgba(0, 255, 0, 0.7);
}

button, .button, a {
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.7), 0 0 10px rgba(0, 255, 0, 0.7);
}

 

 

In the example I've shared, the CSS is targeting classes that are specific to my test store setup.

Mainly for the buttons, you might need to adjust the CSS selectors to match the classes used in your theme.

 

Hope this helps! Let me know if you need more details.

Tell me your problem - I want to solve it!