We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Add to cart button not working after change

Solved

Add to cart button not working after change

edydavies
Excursionist
19 0 2

Hi, looking for some help 🙂 

 

I made a change to our website based on this tutorial which applied a transparent header, it worked nicely even though I'm using a lower version of Dawn (V2), I thought - https://websensepro.com/blog/how-to-make-sticky-and-transparent-header-in-dawn-theme/

 

A customer noticed that our add to cart button is now not working, which is isn't. It's not responding all, normally it would add a product to cart and a pop-up would appear. 

 

I've gone line by line on my header.liquid file to work out what is causing this. It's definitely something in that file which is broken. When I replace the file with an original version (without the transparent header change), it works as normal. 

 

I've even gone through line by line and replaced new code with old, trying to identify the area which is breaking. This didn't work. All I know is that it's something between line 200 and 600 and has nothing to do with the Syntax. 

 

I really like the transparent change so I don't want to revert that. It's working nicely everywhere else, so would prefer to fix the add to cart issue now. 

 

Could anybody help me? What part of the header.liquid file is triggering the add to cart? 

 

My site: https://summergray.com/

 

 

 

 

 

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
12073 2359 2539

This is an accepted solution.

Code updated

 

{% if template == 'index' %}
<style>
#shopify-section-header .header-wrapper .header__heading-link img { opacity: 0; }
#shopify-section-header .header-wrapper .header__heading-link { 
background-image: url('https://community.shopify.com/c/image/serverpage/image-id/394111iF0BEC08C37A7BF4C/image-size/medium?v=v2&px=400'); 
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper .header__heading-link img {
opacity: 1;
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper .header__heading-link {
background-image: unset;
}
#shopify-section-header .header-wrapper { background: transparent; }
#shopify-section-header .header-wrapper .header__icon .icon {
color: #fff;
}
@media (min-width: 768px) {
#shopify-section-header .header-wrapper .list-menu__item span {
color: #fff;
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper .list-menu__item {
color: #181818;
}
}
#MainContent { margin-top: -90px; }
@media (max-width: 767px) {
#MainContent { margin-top: -67px !important; }
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper { background: #fff; }
#shopify-section-header.shopify-section-header-sticky .header__icon .icon { color: #181818; }

</style>
{% endif %}

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 9 (9)

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

Did you make the change? Because I have checked and saw your add to cart button still working.

Screenshot 2023-12-05 at 11.22.27.png

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

edydavies
Excursionist
19 0 2

I had to revert to an old version of the theme to allow the add to cart to work. 

 

Would it help if I attached the header.liquid file?

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

No, you don't. Please go to your Online store > Themes > Customize > Header > Sticky header > Always, click Save, then I can provide code to make your header transparent without affect to Add to cart button

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

edydavies
Excursionist
19 0 2

Hi, yep that's done! Many thanks! 

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

Go to your Online store > Themes > Edit code > open theme.liquid file, add this below code before </head> tag

{% if template == 'index' %}
<style>
#shopify-section-header .header-wrapper { background: transparent; }
#shopify-section-header .header-wrapper .header__icon .icon {
color: #fff;
}
@media (min-width: 768px) {
#shopify-section-header .header-wrapper .list-menu__item {
color: #fff;
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper .list-menu__item {
color: #181818;
}
}
#MainContent { margin-top: -90px; }
@media (max-width: 767px) {
#MainContent { margin-top: -67px !important; }
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper { background: #fff; }
#shopify-section-header.shopify-section-header-sticky .header__icon .icon { color: #181818; }

</style>
{% endif %}

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

edydavies
Excursionist
19 0 2

Thank you! This seems to work nicely. The only issue is that I need a different logo colour on the homepage (it needs to be white). Are you able to add that somewhere in this code? Many thanks

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

Give me white logo version please 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

edydavies
Excursionist
19 0 2

logo.png

 logo attached (it's PNG)

 

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

This is an accepted solution.

Code updated

 

{% if template == 'index' %}
<style>
#shopify-section-header .header-wrapper .header__heading-link img { opacity: 0; }
#shopify-section-header .header-wrapper .header__heading-link { 
background-image: url('https://community.shopify.com/c/image/serverpage/image-id/394111iF0BEC08C37A7BF4C/image-size/medium?v=v2&px=400'); 
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper .header__heading-link img {
opacity: 1;
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper .header__heading-link {
background-image: unset;
}
#shopify-section-header .header-wrapper { background: transparent; }
#shopify-section-header .header-wrapper .header__icon .icon {
color: #fff;
}
@media (min-width: 768px) {
#shopify-section-header .header-wrapper .list-menu__item span {
color: #fff;
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper .list-menu__item {
color: #181818;
}
}
#MainContent { margin-top: -90px; }
@media (max-width: 767px) {
#MainContent { margin-top: -67px !important; }
}
#shopify-section-header.shopify-section-header-sticky .header-wrapper { background: #fff; }
#shopify-section-header.shopify-section-header-sticky .header__icon .icon { color: #181818; }

</style>
{% endif %}

 

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.