Why is my add to cart button only visible when hovered over?

1 0 1

Hey guys I am having some issues with my store. My add to cart button is transparent until i hover over it, and then it returns back to the normal colour. It used to be a solid black button with test. I have tried changing the colours and it does not work. Someone please help.

Replies 3 (3)

Shopify Partner
15905 2378 3087


Can you share the store URL ?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

Shopify Partner
5606 1261 1224

Hello @AR31 


To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?


Thank you and hope to hear from you.
Best regards,
GemPages Support Team

GemPages - Build any high-converting store pages for any business

- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

Shopify Partner
2405 223 540

Hello @AR31,


Greetings from flareAI app helping Shopify merchants get $5Million+ in sales from Google Search, on autopilot! I am Gina, and I am here to help.

Can you drop your store link?

It sounds like you may have a CSS issue with your Add to Cart button. Here are some steps you can take to troubleshoot the problem:

1. Check your theme settings
Check your theme settings to see if there is a specific setting for the Add to Cart button. It's possible that the button color was inadvertently changed in the theme editor.

2. Inspect the button element
Right-click on the Add to Cart button and select "Inspect" or "Inspect Element" from the menu that appears. This will bring up the browser's developer tools, which will allow you to see the CSS styles applied to the button. Look for any CSS styles that may be causing the transparency issue, such as a "transparent" or "opacity" property.

3. Edit the CSS styles
If you find that there is a CSS style causing the transparency issue, you can try editing it directly in the developer tools to see if that fixes the problem. Once you have identified the relevant CSS styles, you can copy them into your theme's CSS file and modify them there.

4. Clear your browser cache
Sometimes browser caching can cause CSS changes not to appear immediately. Try clearing your browser cache and refreshing the page to see if that resolves the issue.

Hope this helps


flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing