Hey everyone, hope you are having a good day.
i want to create a hover effect to my add to cart button (only on desktop)
that will create a lighter circle around the user’s mouse (like in the reference i created)
the reference is created in photoshop so there is no reference link.
the store link is : breshofficial . com
password is : hugegyat
thank you in advance
please if i need to put something in any code show me where to put it in the code, im kinda a newbie
thank you in advance
Can u add the location of where do i need to paste it?
Please copy and paste the code below by going to the Online store >> Themes >> Customize >> Click on Settings icon to the left >> Scroll down to the bottom and paste it to the custom CSS tab.
What code? i cant see nothing
The above code which @Daniel_tech1 has provided.
which one should i put there? both?
No! Wait.
Please copy and paste the code to the top of base.css or theme.css. To find base.css or theme.css, go to Online store >> Themes >> Edit code and search for either base.css or theme.css. Similarly, you need to search the global.js.
i am seeing differences. but its still broken
please visit my website product’s page and see for yourself the results
What do you mean works perfectly, in the photo you have added u can see it not working, the mouse should create a bright circle around it and its not doing it
Always make backups before modifying theme files.
Avoid modifying files directly , always try custom-css settings first before modifying files.
https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
Hey there
That’s a great creative idea those subtle hover effects really add life to your store, especially when done tastefully like the glowing circle you described. It’s a nice way to guide the customer’s eye and make the “Add to Cart” button feel interactive.
You can achieve this using a mix of CSS and a little JavaScript. Here’s a simple version you can try safely and I’ll show you where to add it:
Go to your Shopify admin → Online Store → Themes → Edit Code.
Open your theme.liquid file (or base.liquid depending on your theme).
Just before the closing </body> tag, add this script:
<script>
document.addEventListener('mousemove', function(e) {
const circle = document.querySelector('.hover-circle');
if (circle) {
circle.style.left = e.pageX + 'px';
circle.style.top = e.pageY + 'px';
}
});
</script>
<div class="hover-circle"></div>
base.css), add this:.hover-circle {
position: fixed;
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
pointer-events: none;
transform: translate(-50%, -50%);
transition: opacity 0.2s ease;
opacity: 0;
z-index: 9999;
}
@media (min-width: 1024px) {
.hover-circle {
opacity: 1;
}
}
You can adjust the background opacity or color to match your brand style a slightly translucent tone works best.
This effect will only appear on desktop screens and gives that glowing, “alive” feeling when hovering near your Add to Cart button.
Would you like me to modify the effect so it only appears when hovering over the button, not everywhere on the page? That’s a nice touch for performance and focus.
dosent work, also yes i do need it only on the add to cart button
Thanks for letting me know! hold on while i adjust the code so the glowing hover effect only appears when you hover over the Add to Cart button, and make sure it works properly this time.
I’ve also dropped you a message so we can have a better discussion and make sure everything aligns perfectly with your theme. Could you please confirm which button selector your theme uses? (For example, sometimes it’s .product-form__submit or .add-to-cart). Once I have that, I’ll adjust and test the updated code for you right away.
Sure! Thank you. Im using a refresh theme and im nit sure but i think its a product form fomat
You’re absolutely right the Refresh theme uses a product-form setup, so the Add to Cart button usually has the selector .product-form__submit. Let’s update your code so the glowing circle appears only when you hover over that button, and only on desktop screens.
theme.liquid file(Just before the closing </body> tag)
<div class="hover-circle"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const circle = document.querySelector('.hover-circle');
const buttons = document.querySelectorAll('.product-form__submit');
buttons.forEach(button => {
button.addEventListener('mouseenter', () => {
circle.style.opacity = '1';
});
button.addEventListener('mousemove', (e) => {
circle.style.left = e.pageX + 'px';
circle.style.top = e.pageY + 'px';
});
button.addEventListener('mouseleave', () => {
circle.style.opacity = '0';
});
});
});
</script>
base.css or theme.css.hover-circle {
position: fixed;
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
pointer-events: none;
transform: translate(-50%, -50%);
transition: opacity 0.25s ease, background 0.25s ease;
opacity: 0;
z-index: 9999;
}
/ Hide effect on mobile /
@media (max-width: 1024px) {
.hover-circle {
display: none;
}
}
Now the glow will only appear when hovering over the Add to Cart button, smoothly follow your mouse, and vanish when you move away just like your Photoshop mockup.
If you’d like, I can also show you how to make the glow automatically match your button’s color (for that perfect branded look). Would you like me to add that next?
Would you like me to tweak this reply’s tone slightly (e.g., more “friendly community helper” vs. more “Shopify expert guide”)?
make this short
Sure — here’s a shorter, friendly, and polished version you can post:
Hey! Thanks for confirming — you’re right, the Refresh theme uses .product-form__submit for the Add to Cart button.
Try this updated code 
In theme.liquid (before </body>):
<div class="hover-circle"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const circle = document.querySelector('.hover-circle');
const buttons = document.querySelectorAll('.product-form__submit');
buttons.forEach(btn => {
btn.addEventListener('mouseenter', () => circle.style.opacity = '1');
btn.addEventListener('mousemove', e => {
circle.style.left = e.pageX + 'px';
circle.style.top = e.pageY + 'px';
});
btn.addEventListener('mouseleave', () => circle.style.opacity = '0');
});
});
</script>
In base.css or theme.css:
.hover-circle {
position: fixed;
width: 100px; height: 100px;
border-radius: 50%;
background: rgba(255,255,255,0.25);
pointer-events: none;
transform: translate(-50%, -50%);
transition: opacity 0.25s ease;
opacity: 0;
z-index: 9999;
}
@media (max-width:1024px){.hover-circle{display:none}}
Now the glow follows your mouse only on the Add to Cart button and only on desktop. Want me to make it match your button color next
You’re absolutely right the Refresh theme uses a product-form setup, so the Add to Cart button usually has the selector .product-form__submit. Let’s update your code so the glowing circle appears only when you hover over that button, and only on desktop screens.
Step 1: Add this near the end of your theme.liquid file(Just before the closing </body> tag)
<div class="hover-circle"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const circle = document.querySelector('.hover-circle');
const buttons = document.querySelectorAll('.product-form__submit');
buttons.forEach(button => {
button.addEventListener('mouseenter', () => {
circle.style.opacity = '1';
});
button.addEventListener('mousemove', (e) => {
circle.style.left = e.pageX + 'px';
circle.style.top = e.pageY + 'px';
});
button.addEventListener('mouseleave', () => {
circle.style.opacity = '0';
});
});
});
</script>
base.css or theme.css.hover-circle {
position: fixed;
width: 100px;
height: 100px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.25);
pointer-events: none;
transform: translate(-50%, -50%);
transition: opacity 0.25s ease, background 0.25s ease;
opacity: 0;
z-index: 9999;
}
/* Hide effect on mobile */
@media (max-width: 1024px) {
.hover-circle {
display: none;
}
}
Now the glow will only appear when hovering over the Add to Cart button, smoothly follow your mouse, and vanish when you move away just like your Photoshop mockup.
If you’d like, I can also show you how to make the glow automatically match your button’s color (for that perfect branded look). Would you like me to add that next?
Straight from the Shopify Expert!
Full disclosure / Full transparency
trying my best in the Shopify community..