I used some online help to add code to make a quick ‘add to cart’ button on products. Used this code here - code updates · ndrishinski/blogs@8981363 · GitHub
I made minor edits and got the code to work on my theme. My only issue now is on the landing page things work fine. But, on the collection pages the newly added ‘add to cart’ button rolls in front/on top of the header - see image.
Before header -
Rolling over header -
I have looked in a few places to make the header transparency ‘false’ but can’t seem to find where the edit needs to be made.
Any help would be greatly appreciated.
Regards,
Chris.
It sounds like the issue is related to the z-index of the “add to cart” button and the header, causing it to overlap or appear in front of the header on the collection pages.
To fix this, you can try adjusting the z-index of the elements in your theme’s CSS. Here’s a quick solution:
- Identify the container for your header and the button (you can use browser dev tools for this).
- Set the z-index of the header to a higher value than the button on the collection page.
For example, add this CSS to your theme’s stylesheet:
/* Adjust header z-index to ensure it stays on top */
header {
position: relative;
z-index: 10;
}
/* Ensure the 'add to cart' button has a lower z-index */
.add-to-cart-button {
position: relative;
z-index: 5;
}
This should ensure that the header stays above the button. If the issue persists, it might be related to the position of other elements, so you might need to tweak the CSS further.
Let me know how it goes!
Thank you, legend! - add-to-cart-button z-index was set to 99. Changed it to 1. Issue solved!
Alright
You can message if facing any issue
Thankyou!.. Greatly appreciated.
The only other issue I have now notice when you are on the website on a mobile phone – the add to cart icons aren’t all at the same level sometimes.
www.lawnpride.com.au
Here is the code for the style – I would assume the issue is in here.
{% style %}
.collection-add-to-cart {
position: absolute;
height: 40px;
width: 40px;
background: #0d4d29;
border-radius: 50%;
top: 60%;
right: 18px;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.collection-add-to-cart:hover {
background: #fdd803;
}
.material-symbols-outlined {
color: white;
font-variation-settings:
‘FILL’ 0,
‘wght’ 400,
‘GRAD’ 0,
‘opsz’ 24
}
{% endstyle %}
Ah — yep, I can see what’s going on here, and you’re right to check the styling.
Why this happens:
Since your .collection-add-to-cart button is positioned using position: absolute with top: 60%, its position is relative to the nearest positioned ancestor (usually the product card container).
If the height of those containers varies slightly on mobile— due to text wrapping, image heights, or dynamic content — the button’s absolute top: 60% will land at different spots in each card.
Clean, stable fix:
We should switch to using flex or grid layout within the product card, or ensure that:
- All product cards have consistent height
- Or, position the button relative to the bottom rather than using a percentage from the top.
Example 1: Use bottom instead of top
.collection-add-to-cart {
position: absolute;
height: 40px;
width: 40px;
background: #0d4d29;
border-radius: 50%;
bottom: 18px;
right: 18px;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
``` This pins the button to a consistent distance from the bottom-right corner of the product card — unaffected by the card’s height variations.
---
Example 2: Standardize product card height (if needed)
If your product cards are visually inconsistent, you might want to set a min-height or consistent height on the product card container too:
```css
.product-card {
min-height: 300px;
position: relative;
}
``
The No-Bogus Marketing Plan Promised is sent
Hi Chris, have you seen it?
