Add Sticky Add To Cart Button Without Apps (Copy & Paste to Boost Your Shopify Conversion Rate)
Вставка
- Опубліковано 7 вер 2024
- UPDATED VERSION: • Easily Add a Sticky Ad...
How to add a custom sticky add to cart to your Shopify store without installing an app. Works with Shopify Themes like Dawn.
📄 Code for this video can be found here: theprompted.co...
🚀 Want a FREE personalized action plan to help increase your conversion rate? Complete this simple form: theprompted.co...
👉 Want to hire us for personalized help? Book a consult call: theprompted.co...
▶️ Subscribe for more videos like this ➡ @theprompted
#shopify #tutorial #ecommerce
Themes: Dawn, Refresh, Craft, Studio, Publisher, Crave, Origin, Taste, Colorblock, Sense, Ride, Spotlight
We updated our sticky add to cart with additional settings and made it compatible with v15 of Dawn, Sense, Refresh, and the other free Shopify themes. Check it out here: ua-cam.com/video/fu4LAzvlPyg/v-deo.html
i have just one think i wanna understand why and just why you make this nice job for free in youtube, that's a work of legend
Again, thanks for the amazing tutorial, in the Dawn V15, UpdateMedia doesn't show up, where should we put the code for updating the sticky add to cart data?
Dawn v15 has changed how they handle variant changes. We'll be making a v15 compatible version so stay tuned!
@@theprompted you just caught me watching your combined listings v3 video! Thanks man, you’re the best
How to set Buy Now button instead of Add to Cart? Can you please help
Hey thanks for this! Is there a way to remove the product title, variant and price? To just have the Add to Cart button sticky? Thanks!
Yes, this would require some css. I know you've seen it because you left a comment on the new video already, but for other viewers, there's a new version of the sticky add to cart available: ua-cam.com/video/fu4LAzvlPyg/v-deo.html
Great video as always. Can we add variations selector there, so one can choose the variation from the sticky section?
We'll look into that with the new version!
Great video, thank you! Is it possible to align the title text with the variant, price and add to cart button?
You’re welcome! Sorry could you clarify on how you want it aligned?
@@theprompted In your video @3.42 I would be attempting to left align "The Promoted Original T-Shirt / Color: black / $40.00 / Add to Cart button". I assume the (latter) three (that are already aligned) are in the same container? But I can't find said container!
Got it. The title is in container that spans the width of both the image and the variant details. So you would need to move the title to go in the same container as the variant details to align it.
@@theprompted Thanks! Could you explain how to do that? Everything I try has failed :(
It's a bit difficult to troubleshoot through the comments - sorry.
I'll try to add some formatting settings in an updated video of the sticky add to cart solution, though.
But if you want something sooner/faster, then you could hire us for personalized help: theprompted.co/hire-us
Thank you so much 👍
You’re welcome!
Hi thanks! What about a sticky cart where you can also choose your options? So,not just a summary of what you've already selected
Thanks for the suggestion! Will look into that for the next version
That was incredible, thank you so much! I got it right here.
One question: How can I place the button at the bottom for computers and tablets? I tried changing "top" in the code, but it didn't work. Anyway, I'll keep trying, thanks anyway! 😍😘
To have it placed on the bottom, you can make a few small CSS modifications.
Search for @media (min-width: 750px) and under .sticky-atc and .sticky-atc.show, swap every "top" with "bottom" and every "bottom" with "top".
And then delete the .sticky-atc.show CSS under @media (min-width: 990px).
I hope that helps!
@@theprompted Yes, it helped, I did it! Thank you very much, I already broke my head trying! Keep making videos like this, I don't know anything about programming, but I can easily make the changes. Congratulations on the work!
Awesome! I do think that even if someone doesn't know much coding, they should still be able to make some customizations to their store (and learn a little bit about code along the way).
It is assumed that $ will be used as currency in Javascript. One need to replace $ sign with Currency sign with localised currency sign otherwise code will not function properly.
Great catch - thanks for pointing this out! I'm always using $, so didn't run into that issue.
For those wondering, you would need to replace the $ in these two lines of the renderProductInfo function in global.js with your currency symbol:
let compareAtPrice = parseFloat(regularPriceElement.textContent.replace('$', ''));
let price = parseFloat(salePriceElement.textContent.replace('$', ''));
@@theprompted I have only one issue: All other detail updates on ATC perfectly except on variant change except a variant is Sold out. Once Sold out button is displayed on ATC, it remains displayed even if available variant has inventory. If page is refreshed, Sold out starts appearing.Seems to little bug but could not patch it. Help appreciated. Thanks and Regards. However, i have solved now on my own.
Thanks for pointing this out and awesome that you managed to solve it!
@@theprompted Also there could be another issue. This is because after textcontent.replace, there could be , (i.e. comma appearing) in text value. As soon as Java encounters comma in parsefloat, it stop parsing and return. Let use say compareat prices is $1,339. When parsefloat is executed, you expect that 1339 is returned but actually it will returns just 1 ! Surprise. Hence instead of parseFloat(regularPriceElement.textContent.replace('$', '')); it should be parseFloat(regularPriceElement.textContent.replace('$', '').replace(',',")); This will replace comma first and return 1339 (i.e. correct value from $1,339). You may like to fine tune it.
Thanks. It is a great video. But can we take sticky add to cart at the bottom of the page on the desktop?
To place it at the bottom, you can make a few small CSS modifications.
Search for @media (min-width: 750px) and under .sticky-atc and .sticky-atc.show, swap every "top" with "bottom" and every "bottom" with "top".
And then delete the .sticky-atc.show CSS under @media (min-width: 990px).
I hope that helps!
I think this needs to be updated for Dawn v14.0.0. Could you please, kind sir?
tried everything @theprompted and realized that the update ATC media function seems to be broken, everything else works otherwise.
Thanks for letting me know! I'll look into this
Excellent video. There are more codes on your website than what you used in the video. The last code in 2nd list item and the code in the 3rd list item are not being used. What are they for?
The one area where you need to select code is whether you're using v13 or v12/11.
All other code is being used, and the instructions even provide some information on where it should be placed. If you're unsure, I suggest watching through the entire video carefully, as it explains where to use the code.
i have the problem that nothing happens when i click "add to cart" the text just disappear and it's not leading me to any other page.
i recently installed the code on the latest DAWN version 14.0.0.
Can you help me ?
can you help me please
We'll be updating this video for Dawn v14 in the coming weeks.
If you're looking to hire us for personalized help, then feel free to book a call with us at theprompted.co/hire-us.
If not, no worries and stay tuned for the update!
Thank you very much for your video and code~! Following this step, I succeeded~ but I encountered a problem, the sticky cart is some distance from the bottom of the web page, how should I adjust it?
You would need to adjust the css, ie. adjusting the relevant .sticky-atc.show top and bottom values to match your site for the relevant device screens (ex: mobile, desktop, etc)
hi guys, just added the snippet to my shopify product page, however when i add a product to the 'add to cart' button just keeps spinning and doesn't add any products. Any idea how to fix this?
What theme and version are you using?
Great ! THANKS . It works but I have a scroll on the sides do you know how to fix that?
Great! I'm glad that it works for you! Can you post a screenshot on what you mean with the scrolling? It should re-size with the window is, so I'm not sure what you're getting.
It is all good ! I had bad padding on my product page. thanks anyway@@theprompted
Sir please tell me if I just want Add to cart text and nothing else on the button then how to do it. Thanks in advance and waiting for your reply.
Doesn't the button already say "Add To Cart"?
@@theprompted Yes sir but it also shows the additional info like price, product images, discount %.
I just want to display add to cart text only.
Thanks
When I press on the button it doesnt work, it doesnt add the product to the cart drawer.
What theme and version are you using?
I tried the same as you told in the video step by step but there are two issue I faced.
1. Sticky Add To Cart header is showing in the bottom
2. When I click on the Add To Cart button, that's just buffering but not going to the checkout button.
1. The sticky add to cart shows at the bottom for mobile and top for desktop by default, but the positions can be changed with css if you want (check the comments as others have asked about this).
2. Which theme and version are you using?
@@theprompted Well, I downloaded this Globo Sticky Add To Cart, and because of this app my sticky add to cart was showing in the bottom of my product page. I have deleted that and now it (sticky add to cart) is on the top.
Now there's a new issue when I click on the "sticky add to cart button" the next page is not gonna be opened.
And I'm using Dawn Latest Version 3.0.1
What I suggest is trying to install it again from scratch using a fresh new install of Dawn. This way it will be free of any previous customizations. If you follow the steps properly, it should work.
I got the sticky add to cart by code, the problem am facing right now is that the button doesnt work?
What theme and version are you using?
Hello, friend! Thank you for the content!
I have a question. I'm using another code to display the product's discount percentage, but when I update the variant, it only shows the financial value. Do you know how to fix this?
You're welcome! Unfortunately unless you're able to provide more detail on what the error is, it's hard to say. Depending on the situation it might be a simple change, or it could be more complex.
When I change the product variant, the discount percentage does not appear on the sticky add-to-cart button.@@theprompted
Without knowing what additional custom code that you have, it is going to be difficult to troubleshoot. Can you try implementing this on a fresh version of Dawn and check if it works? If it works, then you know it's because of how your previous code interacts with this new code. If it doesn't work, it's likely something in the way you added the code.
After following the video a few times, why does the image not change when selecting other variations? Is there something missing or wrong in the operation?
If you're using Dawn v14, it's possible that that might be the reason. Will be testing it and putting out a new version in the coming weeks. Stay tuned!
Hi there,
I'm experiencing difficulty locating the product information section in my theme, Combine from Shopify. Could you please guide me on how to access it or let me know if it's named differently in this theme? Your assistance would be greatly appreciated.
Additionally, I'm interested in integrating the Kiwi Sizing indicator. Is it possible to keep the color swatches for items while removing the variant images? I'd love some guidance on this matter.
Thank you in advance for your help!
This looks like a paid theme from a third party theme developer, so unfortunately I don't have access to it. Most likely this solution won't work out of the box for your theme and would require customization.
Hi amazing tutorial. I’ve been going through every video of yours for the past couple of weeks!
I’ve noticed that the sticky add to cart would go away if you’re scrolling up but the add to cart button is still not visible. Is this a thing or am I seeing it wrong?
If it is a thing, is there a way to make it not go away when scrolling up?
Is there also a way to make the color and size choosable right from there?
Yes, the Sticky ATC coming in and out of view is on purpose. The idea here is that it comes into view only when the main ATC button goes off screen, and leaves the view once the main ATC comes back into the screen.
If you prefer to keep it on screen at all times, then you would need to make css customizations. One simple way to do this is to change the .sticky-atc "top" and "bottom" values from their respective off-screen locations (ex: -200px) and make them equivalent to the .sticky-atc.show value. So for example, on mobile, if your .sticky-atc bottom is -200px, then you can change it to 0.
As for the color and size, this can also be changed in css. I'm not sure what parts you want to change, but for example, if you want to change the button color and text color, you can update the css for #StickyProductSubmitButton-{{ section_id }} to the below:
#StickyProductSubmitButton-{{ section_id }} {
margin-bottom: 0px;
background-color: #yourButtonColor; /* Replace with your desired button color */
color: #yourTextColor; /* Replace with your desired text color */
}
How to change the product title color I found everything else except for that please help?
You can update the css for .selected-variant-title, ex:
.selected-variant-title {
color: red; /* Change this to your desired color */
}
@@theprompted thank you very much!
Hi there, do you know a way to increase the footer bottom-padding only on the product page? As with the sticky atc now implemented the footer is not fully displayed on the product pages. I tried adding custom css but it changes the padding on every page. Is there a way to only do this on the product pages? I am using the Dawn theme v13. Thanks again for your amazing video's!
You can try adding the following code to the theme.liquid file, just beneath the line {% sections 'footer-group' %}
{% if template contains 'product' %}
@media (max-width: 749px) {
#custom-footer-buffer {
display: block;
height: 150px; /* Adjust the height as needed */
width: 100%;
}
}
{% endif %}
This code assumes it only applies to mobile devices, since the original code only has the sticky ATC box at the bottom for mobile.
This is great - is there a way to do it for the buy now buttons instead of ATC?
Thanks for the suggestion! I've added it to the list.
Hello, since I have a sticky header, the sticky ATC gets covered by it on desktop. Also, I would like it to have it on the bottom anyway as I like it better. How can I move it at the bottom on desktop? Thanks!
Below is what I shared with a different commenter. I hope this helps you too! In a future version of this customization I'll make it easier to change by simply having it in the theme settings.
------------------------
To have it placed on the bottom, you can make a few small CSS modifications.
Search for @media (min-width: 750px) and under .sticky-atc and .sticky-atc.show, swap every "top" with "bottom" and every "bottom" with "top".
And then delete the .sticky-atc.show CSS under @media (min-width: 990px).
I hope that helps!
Can you help me I have inserted your scripts and it works perfectly only now I have the problem I have TeeinBlue app installed afterwards because I want to offer personalized products now it is so that Sticky Add To Cart on the one hand immediately appears on the page and on the other hand it is not updated, but on the other products that are normal in Shopify it works as I said idly could you help me and adapt your scripts or make a video how to fix the problem thanks in advance
Glad that it works! I'm not familiar with that app, unfortunately. As you add more features to your store, interactions between those features can become more complex, so it's not as simple as providing a generalized solution.
If you really need that other app to work together, the simplest way to make sure they work together is probably to use a sticky add to cart app instead of custom code.
But the advantage of custom code is it's less clutter on your store and doesn't slow down the page as much.
If you really want to use the custom code, you can look at hiring a developer to adapt the code for you. If that's something you want us to help with, you can schedule a call to hire us at www.theprompted.co
Hello, thank you for the video. I was wondering if you can help me. I also have dawn theme, but I don't want my product media be "sticky" while scrolling down on phone version and automatic dawn has it sticky for phone view. Your help will greatly appreciated. thank you
That's strange, I haven't seen that as a default option in Dawn. Can you install a fresh version of Dawn and see if it's still happening?
Can you show how to implement it to stay sticky at the bottom of the page?
Below is what I shared with a different commenter. I hope this helps you too! In a future version of this customization I'll make it easier to change by simply having it in the theme settings.
------------------------
To have it placed on the bottom, you can make a few small CSS modifications.
Search for @media (min-width: 750px) and under .sticky-atc and .sticky-atc.show, swap every "top" with "bottom" and every "bottom" with "top".
And then delete the .sticky-atc.show CSS under @media (min-width: 990px).
I hope that helps!
you saved me
Hi there! Great video. Just subscribed I have everything working properly but the image is not showing up. Any tips for that:? Any help is appreciated:)
Never mind - found the issue. No images uploaded to the variant :P Uploaded them and its fixed. Thanks again!
Glad it's working for you!
i have this error : Liquid error (sections/main-product line 655): Could not find asset snippets/sticky-atc-custom.liquid
Based on this error, you either accidentally skipped the step to add the snippet sticky-atc-custom.liquid, added it as a different file type (ex: a section instead of snippet), or you may have named it incorrectly. Can you double check that?
Hey. Thanks for sharing your codes. I followed all the steps. The sticky cart is showing on my screen but when I click on the "add to cart" button, it doesn't lead me to any page or update the cart. Can you help me with that please?
I’m using Dawn version 13.0.1
That's strange, when I tested it, it works for me.
Which version of the code did you use? I relabeled the snippets to identify which ones you should use if you're on Dawn v13. It's possible you used the v11 version.
If that's not the problem, then I suggest trying it again on a fresh install of the Dawn theme. It's possible that one step was missed, or there may be other customizations that are interfering with the code. By trying it again you'll find out whether there was an error in installation (hopefully it just works this time) or an error in the approach (you're able to re-create the exact same problem).
Hey, here again. The sticky ATC seems to work for me, but does not refresh the variants discount code when changed. I checked every line of code with the global.js, any idea why that could be?
Are you using Dawn v11 or v12? Regardless if you are or not, try installing it on a fresh install of Dawn to see if there was either a mistake in your implementation or that maybe something in your existing theme is interfering with it.
where is the code??, i opened the website but, i cant find any toggles like u said
nvm i found the arrow...............................
Great! Hope everything works well for you
how can i change sticky atc from top to bottom of my page in desktop?
Look for the section for larger device widths: @media (min-width: 750px), and then swap the css "bottom" property with "top" and vice versa under .sticky-atc and .sticky-atc show. ie, "top: auto", "bottom: -200px" (or 0px in .sticky-atc.show), and "transition: bottom 0.3s ease out";
If I wanted to add this to the refresh theme what would I have to change in order to get the same effect?
You should be able to follow the exact same steps. Refresh and Dawn have very similar code structure. I ran a quick test and it seems to work just fine. Try it out and let me know!
@@theprompted For some reason when I entered the cod eI was getting an error that on line 707 the "schema" tag could not be placed within another tag and it would not let me save
When adding the snippet to product-main**
Which version of Refresh are you using?
On a fresh install from today (v13), it would be around line 555. The one line you paste is: {% render 'sticky-atc-custom', block: block, product: product, product_form_id: product_form_id, section_id: section.id %}
Hey I am interested in doing this in symmetry but having technical difficulties. You offer any coding services?
This solution was designed for the free Shopify themes. I'm not actively taking on clients at the moment but that may change in the coming months. Let me know what you're looking for and I'll take it into consideration. Is there anything else you are looking for besides the sticky add to cart?
Is it possible to export cutom metafield and upload another shopify store?
If you're trying to export the values of your metafields, then yes you can. If you use an app like matrixify, you can probably export any field you want, including metafields.
@@theprompted could you please create a video on this topic
Hi, nice tutorial. Where can i find the code?
Glad you like it! You can find the code here: wescalebrands.notion.site/The-Prompted-Product-Variant-Color-and-Image-Swatches-a2e5676f1f6d4ebeb0e3436e01fb53d2
Thanks! You are a superstar @@theprompted !
If you're looking for the code used in this video, you can find it here: theprompted.co/blogs/tutorials/sticky-add-to-cart-free-tutorial
The link doesn't contain any code! Plz update 🙏
@@Klee87278 The code is there - just open the toggles to show them!
@@theprompted yea found it! And tested it and seem to work well! There's one problem tho and that's when there's no variants on the product, it show "title: default title"
Plz test it in no variant product and update the code for this problem if possible 🙏 thanks in advance
@@Klee87278 Thanks for pointing this out and a few other commenters found the same thing. We just made a fix and replaced the code in our Notion link. Please try this new code and let me know if it works!
@@theprompted problem fixed with the new code 🙏 thanks man much appreciated!
Image is not showing up. At the middle of the bar it shows "Title: Default Title"
Please help, I tried both V11 and V12.
I am testing on the fresh Dawn theme.
Thanks for pointing this out, looks like you found a bug. The code currently assumes that the product always has variant options, but if it doesn't have any then it will show the default value instead. We'll work on a fix to hide the variant options if there are none set. I'll let you know when we've updated the code!
@@theprompted Sure. I want to thank you for the great help.
@@theprompted First, I would like to thank you for sharing this code. I noticed another user is having the same issue as me: Image is not showing up. At the middle of the bar it shows "Title: Default Title." Is there an update on the code?
@@jcnation5393 Just wanted to let you know that we added a fix to the code. Just visit the Notion link again and use the code found there and let me know if it's all good!
@@User1-pe9ce Yes - we just updated the code with a fix. Just revisit the link and copy the new code for sticky-atc-custom.liquid and it should be resolved. Let me know if this works for you!
hello, the "add to cart button" dosent working, you know whats the problem?
Hi! Are you using Dawn v12? If so, there's been a small change with the original code. If you check the code link, I've added a version that should work with Dawn v12.
hey@@theprompted unfortunately not working with v12. The problem is with the add to cart functionality. Shows Liquid error so the Sticky ATC is visible but the funcalitiy not working + showing the error.. Just FYI. Would be so greatful if you can update that :) thank you!!
@@dennis7994 Strange - it works on a fresh install of Dawn v12 when I tested it. What does the error say?
@@thepromptedI needed to insert the 11.0 version code but theme was 12.0 weird.. but thank you so much it worked!!
Glad it works now!
Hello sir
Is this Code work in my IMPULSE Theme ?
The customization is designed for the free shopify themes, so it's unlikely to work with the Impulse theme. Since this is a third party theme, you can try reaching out to the theme developers for help on adding a sticky add to cart.
@@theprompted
Ok sir
Thankyou so much
Update?
It's on our list!
@@theprompted I was able to fix it! thanks a lot!
its working for when i made some changes in global.js but after intrigate this code sticky header working fine but default single product page variation select box in even change variation its always get first variation in cart how to fix it
Which theme and version are you using?
@@thepromptedi am using dawn 14 i just remove global js and it's working ok now for thanks for your code 🙂
There are changes required in global.js also. which if author could share his mail address can be submitted for helping all.
For now the best way to contact me is through the YT comments. If you share your fix here, I can test it and then I can incorporate it into the linked code. Thank you!
----rest of the code
const stickyAtcDiscount = document.querySelector('.sticky-atc .discount-percentage');
const bazePriceElement = source.querySelector('.badge.price__badge-sale');
const SoldOutBadge = source.querySelector('.badge.price__badge-sold-out');
const testtargetElement = document.getElementById(`ProductSubmitButton-${sectionId}`);
const stickySubmitButton = document.querySelector('[id^="StickyProductSubmitButton-"]');
if (testtargetElement.textContent.trim() == "Add to cart") {
stickySubmitButton.classList.remove('disabled');
stickySubmitButton.style.pointerEvents = 'auto';
stickySubmitButton.textContent = "Add to cart";
} else {
stickySubmitButton.classList.add('disabled');
stickySubmitButton.style.pointerEvents = 'none';
stickySubmitButton.textContent = "Sold out";
}
--rest of the code...
let price = parseFloat(salePriceElement.textContent.replace('$.', ''));
let discountPercentage = parseFloat(bazePriceElement.textContent.replace('Sale :', ''))
--rest of the code...
Thank you! I actually came up with a different fix to the problem. I've updated the code in the Notion link (wescalebrands.notion.site/The-Prompted-Product-Variant-Color-and-Image-Swatches-a2e5676f1f6d4ebeb0e3436e01fb53d2)
@@theprompted there is one more issue, you know "add to cart" button changes to "unavailable" when a variant combination is not available. I have checked available code but seems it is not being checked. Due to this, when a variant is not available than also "Add to Cart" displays in enabled condition on the sticky ATC. One more bug to squash. I am trying but you are the wizard, Sir. In fact, it seems setUnavailable() function in global.js gets fired and code does not even go to renderProductInfo() code !. Seems we need to do something in setUnavailable() code also. Kinldy look into. I have added following code in setUnavailable(). It is working but please verify...
//VC added for handling case of unavailblae variant
const stickySubmitButton = document.querySelector('[id^="StickyProductSubmitButton-"]');
stickySubmitButton.textContent = window.variantStrings.unavailable;
stickySubmitButton.style.pointerEvents = 'none';
stickySubmitButton.classList.add('disabled');
@@cyberspider78910 I think the fix I shared last week addresses this already - can you check to see if it works for you?