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
you can do so using the text-shadow parameter. Add the following code to your css.
body{
text-shadow: 0 0 6px green;
}
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
Layout > theme.liquid
Scroll down until you find ‘body’
Add in:
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.
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
layout > theme.liquid:
Scroll down to body
Add the following code:
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.
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
layout > theme.liquid:
Scroll down to body
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.