Personalized checkout and custom promotions with Shopify Scripts
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
Solved! Go to the solution
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
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.
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.
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
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.
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024