Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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
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/
Solved! Go to the solution
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.
Did you make the change? Because I have checked and saw your add to cart button still working.
- 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.
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?
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.
Hi, yep that's done! Many thanks!
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.
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
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.
logo attached (it's PNG)
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.