Easily Add a Sticky Add To Cart Without Apps (Increase Sales and Shopify Conversion Rate (Dawn v15)

[@RS__999]

Hi, could you guys please add options to hide the product title, product photo and the pricing in the sticky atc? When the product has multiple variants then the sticky atc becomes a bit too clustered, like at @9:55

[@WillTrimby]

['icon-caret' not found FIX] Hey there, I was just implementing your sticky ATC from your website and it works great. One issue i ran into was rendering the 'icon-caret' symbol inside the sticky-atc-custom.liquid file. The solution I found was to replace both instances of {% render 'icon-caret' %} with {{ 'icon-caret.svg' | inline_asset_content }} Hope this helps anyone else who runs into this issue!

[@ishaanair]

Literal Lifesaver, I had the same issue. Thanks for the fix

[@staty2good]

Bro thank you that you writed this comment and shared your information! It saved me so much time and solved my problem! You are a great person!

[@stevenrecher]

doesn't seem to work anymore does it ?=

[@WillTrimby]

@@stevenrecher What doesn't work?

[@dietsense24]

@@ishaanair 'what was the fix? I'm still getting this error.

[@johngreaneynz]

Thanks!

[@theprompted]

Thank you! Really appreciate your support :)

[@DEEPAKKUMAR-ij7hw]

thanks very helpful, i have just recently started working on shopify and whenever i want to integrate something interesting and new i got a video on your channel. Your are awesome.

[@falmetlilian2394]

BANGER ! Thanks for the value

[@Zarcillo07]

It worked perfectly, I would have liked to change the background color of the whole thing. But I'll try to change the color of the product page to make it match with the white. New sub here! Thanks brother.

[@uvz5875]

Your videos help so much. Thank you. Request: Can you make a Product Info images swipe with arrows on desktop for dawn theme?

[@uvz5875]

+1

[@ShopTF]

Thanks for such helpful content !!

[@riteshmehrotra93]

Great tutorial. Hey can you also explain how add to cart button work in dawn theme. I means when we click add to cart button on collection page and product page how it open side cart drawer, how it render the side cart and item add and item remove render in the dawn theme.

[@theprompted]

The cart drawer dynamic behavior is managed by the cart-drawer.js file. There's methods in there that define how the slide, add, remove, etc work in the cart.

[@riteshmehrotra93]

@@theprompted Hi yes, I checked that but i am not capable that much or something to understand whole thing if possible create a small tutorial around it so that I can understand Thank you in advance.

[@riteshmehrotra93]

Hello, I am a huge fan of your work. because I wanted to do the same thing from the beginning of my career: modify existing dawn js code. However, due to a lack of knowledge and experience, I still don't fully understand what dawn theme js does, but thanks to your videos, I've learnt a lot about the dawn theme and structure. Can you create 2-3 tutorial videos showing how the dawn theme works and how sections are rendered? via Shopify's section render API, how their form was submitted, how we could modify the submission, and so on. I want a lot of things, but even one or two will be greatly appreciated.❤❤ Also if possible please provide your linkdin id so that I can connect with you.

[@theprompted]

Hi and thank you for watching! Glad that you've learned a lot, and cheering you on to continue on your journey. For more advanced topics and requests, and as a place to connect with us, you can consider joining our newly launched community, The Prompted Insiders. We go deeper on topics and provide support that we don't cover on our KZbin channel. Check it out here: www.skool.com/the-prompted/about

[@cloudx4303]

Hey there, Another great feature! Looks great, I am gonna try it out soon. I would only want the button itself rather than all of the information displayed so I am hoping I'll be able to edit the code to just be able to display the ATC button only. Few weeks back we also had a quick discussion about creating a password protected SALE collection where any products in that collection are accessible through password and an email sign up. Also those products in the given password protected collections would not be visible in the search or any other area of the website other than the private / password protected collections. Its would be super useful for small brands that want to lock only a collection of their site rather than the whole website, to build hype around upcoming drops or sales or particularly useful as they would be showing their appreciation to those that are subscribed by allowing them early access etc. So the password will be emailed to all subs but any new comers would have to sign up to get the password :]. I am really hoping that you can roll out such a feature as you tend to do things in a more sophisticated way than the other coders I've seen out there :]. Would be very appreciated.

[@theprompted]

Hi! Yes, I remember the discussion and did look into it a bit for the the video about locking pricing (kzbin.info/www/bejne/gKPbdGqBaKerfKc) that we released today. If it's something you really need and want to make sure we work on it, then you can hire us for this (theprompted.co/hire-us). But if not, then we've noted down the suggestion and may make a video about it in the future. Thanks for your support and watching!

[@MK-Tech]

Another great tutorial! THANKS! What CCS is setting the position of the price?? It's not centered in front of the add to cart button. Discovered an issue. Go to a product with variants. CHANGE variant form the default one. Then add the product to the cart. Now, you are forwarded to the cart page, even if the theme is setup to display the cart drawer.

[@theprompted]

The CSS can be found in the sticky-atc-custom.liquid file. Thanks for letting us know about the cart drawer issue! We've corrected this and updated the sticky-atc-custom.liquid code.

[@Barbaros7042]

Appreciate this, very handful, can you please make a tutorial with recommended products in cart drawer? so we can upsell in cart drawer with other items?

[@theprompted]

Thanks for the suggestion!

[@jcnation5393]

Great Video as Usual. Thank you for it, I needed it for long time. But Is it possible to only show the variation when someone clicks the sticky add to cart button? Showing title, Price and variations makes it look crowded.

[@Life-gl9td]

Agree

[@cj7entertainment793]

Yeah, sir it'll be great

[@theprompted]

If you want to hide certain product details, additional code development would be required. You can try using the css "display: none" to hide those elements.

[@jcnation5393]

@@theprompted Okay. I know it'll require additional changes in code, but is it possible to show the variation only when the add to cart button is clicked ?

[@sylwesterulejczyk6188]

this is amazing, thank u bro. anywho i have questions, firs - how can i set border radius of picture? seckond - max width on laptop 1300 px ?and thirth add to cart will be workig if i dalet add to cart buttom from 'shop now' page ?

[@JvSarX]

Hello, please where can I access the code to add to the HTML? I signed up on the website but I didn't receive the code

[@DEEPAKKUMAR-ij7hw]

Just adding another comment, I tried these steps and it worked well except in the case of swatches where it shows color variant select box along with color swatches. Either it should convert swatches into drop-downs or keep it as it is. To work properly i have to either stop using swatches or sticky add to cart. Hope you understand what i'm trying to say.

[@bellandwear]

i to have this bug, If colour swatches are used it is not aligned.

[@theprompted]

Thanks for pointing this bug out! A fix has been added to the code. You can re-copy and paste the code from theprompted.co/blogs/tutorials/sticky-add-to-cart-version-2-free-tutorial and it should work now.

[@roiseaux]

@@theprompted If we are using your Swatch code customizations, is it possible to implement variant swatches in this Sticky ATC instead of dropdowns?

[@theprompted]

This is possible with some additional custom development. Dropdown was selected because it works best as a general solution since it takes the same amount of screen real estate regardless of how many variant options the product has.

[@tanisahmed]

Great everything is perfect 👍🏻

[@JamalHameed]

great value bro, thank you very much! But plz explain how i can add sticky card button on the landing page too?? thank you!

[@theprompted]

Depends on what landing page you're looking at. But this customization is designed for the product display page.

[@justsomegames3507]

This is awesome! Thanks! I noticed that when you reach the bottom of the page, it covers the footer. Any way to fix that?

[@justsomegames3507]

It is doable! I plugged the snippet code into chatgpt and it updated it to slide down when the footer was visible.

[@junlintan5100]

Hello, here is a small feature that I personally feel is important. when a different option is selected on the variant, the page refreshed and the page scrolls to the top again. And for products that are extremely wordy, being really invested in reading a specific section of the page, then choosing a variant, and only to have it scoll to the top again will be an unpleasant browsing experience. :)

[@theprompted]

Thanks for the suggestion! We've noted it down.

[@jmelom446]

@@theprompted I have this same issue and I think it is a poor experience for the customer. Do you have a solution? Thanks so much!

[@Asaunie]

Gained a new subscriber from this gem, could you create one for the Dawn theme v14, i don’t really like v15, it’s pretty limited in my opinion, if you could create a tutorial for Dawn v14 on adding a sticky atc button, i’d appreciate that dearly, Thank you!

[@theprompted]

What do you find limiting for v15? Shopify has added more features to it, including imo a really important one that supports 2000 product variants (when the feature is rolled out on the backend admin)

[@srhtysl1983]

Hi,Firstly thanks for your videos.Can we apply all of this and other improvements to other themes such as Be Yours?Thanks..

[@theprompted]

Our customizations were designed and tested on the free Shopify themes, like Dawn, Refresh, Sense, and others. If it's a third party theme like Be Yours, then the customizations may or may not work - you would have to test them out to see if it works for you.

[@DominikSikora-qf4hu]

great video

[@Tokio.official]

Amazing! How can I center align the product title? Everything seems to be central in the CSS. Even better, how do I remove the product title just on mobile and just have the ATC text?

[@theprompted]

To hide the different elements, you can set the individual classes of those items to display: none with css

[@MitchellPlatt]

Great tutorial, thanks. Is it possible to stop the sticky card from displaying on Quick Add pop-ups (i.e. on collection pages)? It's not necessary as the window is small and only contains variants & add to cart...

[@theprompted]

Yes, you can. Try adding the class quick-add-hidden to the first div in sticky-atc-custom.liquid

[@MitchellPlatt]

@@theprompted You're good. Thank you

[@mkeditz6162]

hello everything works great but the product image is not showing in variant selector products on sticky atc please help sir

[@theprompted]

The image is tied to the selected variant image - please check your variants to see if that's been added.

[@ParvyLazy]

Hi, the product image, title, and compare-at price aren't showing. I can only see them but highlighting with the mouse which means that they're all in white colour? Can you please fix this. I can only see the ATC button and variant picker + On-Sale price

[@theprompted]

Would have to take a look with a diagnostic review based on the nuance of your store. Send in an email.

[@shubhamghanmode6777]

I hope this message finds you well. I would like to express my appreciation for the work you've done on the 'ATC-Sticky-Bar' plugin. However, I am encountering an issue where the product images are not displaying at all. The sticky bar functions perfectly in all other aspects, but the images are not showing up at all. I have tried both the older and the current versions, but the problem persists. It seems the "images_url" is not integrating with the sticky bar. I have spent a considerable amount of time attempting to resolve this issue but have not been successful. Your assistance in guiding me toward a solution would be greatly appreciated. Thank you for your support.

[@theprompted]

You can reach out to us via email for a diagnostic review if you'd like. Just hop on the newsletter if you're not already, and you can email us

[@CuzzoClothing]

Hi thanks for the tutorial! I'm getting this on the cart where did I insert something wrong? most of the rest of the cart looks good but this area.... Liquid error (snippets/sticky-atc-custom line 215): Could not find asset snippets/icon-caret.liquid

[@uvz5875]

same. Please let me know if you find a solution. I think we are missing this file which was probably used in an earlier sticky tutorial.

[@theprompted]

There was a change in the newest Dawn version 15.1.0 on how icons are rendered, so some changes are needed to adapt it to the new version. You will need to replace: {% render 'icon-caret' %} With: {{- 'icon-caret.svg' | inline_asset_content -}}

[@wesselbakker4662]

Great video! When I pick a variant the page scrolls to the variant picker on the product page. Is it possible that it doesn't scroll up when you pick a variant?

[@theprompted]

This is possible, but requires additional development work. If you're interested in us building it out for you, you can contact us here: theprompted.co/pages/hire-us

[@fernandoTwingo]

How can we add a new dropdown option in the filter and sort menu to sort by meta fields sorted by number from 0 to 100 ascending or descending?

[@theprompted]

Added it to the list of suggestions!

[@AhmedMustafa-u8r]

Hi, Great tutorial but I am facing the following error "Liquid error (snippets/sticky-atc-custom line 215): Could not find asset snippets/icon-caret.liquid" if you kindly tell me how to fix this. Found the solution in comments but now the product images are not showing in Sticky ATC Custom.

[@shubhamghanmode6777]

same issue brother!

[@KrishBhawrani-nc5kw]

same issue

[@theprompted]

You can reach out to us via email for a diagnostic review if you'd like. Just hop on the newsletter if you're not already, and you can email us

[@jcnation5393]

handleUpdateProductInfo is not there in dawn 11.

[@theprompted]

This was designed for a newer version of Dawn (v15). You can try installing a fresh new version of Dawn and trying it on there. Or you can try the older version of this tutorial: kzbin.info/www/bejne/fKCbaH6PgqqFa5o

[@danhoel1654]

do you know wat could be interfering if it does not add it to my cart and the variants on the sticky add to cart are always the default wones and do not change when picked something different?

[@theprompted]

For the second issue where the variant isn't changing: does it update when you refresh? It's possible that you missed the step to update product-info.js As for the first issue where it's not adding to cart, that's a bit puzzling. Are you using a compatible theme (v15 of the free Shopify themes like Dawn, Refresh, Sense, etc)? Do you have any apps that modify your products or cart?

[@burakkaynak]

After implementing this, I noticed multicolumn images on other sections of the product page wont show full width on desktop view. (but they show on mobile) any ideas why would that happen? CSS?

[@burakkaynak]

When I uncheck Use Sticky Add To Cart checkbox, images on multicolumn section shows again :) Its strange.

[@theprompted]

Thanks for pointing this out! To fix this, please change the ".content-container" class to ".sticky-atc .content-container". To make it easier, we've also added a fix to the code in the link so that you can re-copy and paste the code.

[@sulemanshah1638]

Hi sir can you help me, on my edit code is there no variant picker in sections/main-product.liquid can you please help me sir?

[@theprompted]

If it doesn't show up, then you may be using a third party/premium theme. This tutorial was designed for the free Shopify themes (ex: Dawn, Refresh, Sense, etc). To refactor this tutorial's code for your theme would require custom development. If you're interested in hiring us to work on that for you, you can contact us here: theprompted.co/hire-us

[@harismemon1546]

try to search for: when 'var

[@MikailElitas-j9t]

my product info js is way different

[@Deer-sport]

its not workin on 15.1.00

[@theprompted]

It should work on 15.1.0. I suggest installing a fresh new version of your theme as a test area and starting again from the beginning. If you get a different result, then it was likely an installation issue. If you get the same result, then it could be a more complex issue for your store.

[@MUSICAL-NCM]

Section 22: setting type is required Section 22: setting 'name' is not a valid attribute Section 22: setting 'settings' is not a valid attribute Theme Refresh

[@theprompted]

You may have missed a comma or placed the code in the wrong place. Double checking that by re-doing those steps very carefully usually resolves this error.

[@mihairotaru88]

I get this error on the variant picker "Liquid error (snippets/sticky-atc-custom line 112): Could not find asset snippets/icon-caret.liquid".

[@theprompted]

This is a change with the latest v15.2.0 themes. You can replace {% render 'icon-caret' %} with {{- 'icon-caret.svg' | inline_asset_content -}}

[@uvz5875]

Amazing work. But getting an error: Liquid error (snippets/sticky-atc-custom line 112): Could not find asset snippets/icon-caret.liquid

[@theprompted]

There was a change in the newest Dawn version 15.1.0 on how icons are rendered, so some changes are needed to adapt it to the new version. You will need to replace: {% render 'icon-caret' %} With: {{- 'icon-caret.svg' | inline_asset_content -}}

[@rusticfox4283]

@@theprompted your amazing thanks

[@CuzzoClothing]

I restarted a new Dawn theme and still the same results. @The Prompted any suggestions? still saying Liquid error (snippets/sticky-atc-custom line 215): Could not find asset snippets/icon-caret.liquid

[@theprompted]

There was a change in the newest Dawn version 15.1.0 on how icons are rendered, so some changes are needed to adapt it to the new version. You will need to replace: {% render 'icon-caret' %} With: {{- 'icon-caret.svg' | inline_asset_content -}}

[@amirsaishi]

thanks for this great tutorial, i followed all the steps but unfortunately i am facing this error, in the image box no picture is showing only this error Liquid error (snippets/sticky-atc-custom line 215): Could not find asset snippets/icon-caret.liquid but if i disable variant picker in add to cart settings then it works perfect, but no image is shown and you cannot select the variant in sticky atc then, can you please tell me what is wrong ? i am using dawn theme version 15.1.0

[@theprompted]

This is a change with the latest v15.1.0 themes. You can replace {% render 'icon-caret' %} with {{- 'icon-caret.svg' | inline_asset_content -}}

[@amirsaishi]

​@@theprompted thanks very much bro, it worked for the error, the error showing for line 215 is gone now but unfortunately its still not showing the product image, and dropdown icon for color selection is too big now both on pc and mobile , and i cannot click on that, i can clicks only on the color name itself not on whole bracket or drop down icon, can you please tell me how to solve it ?

[@staty2good]

@@amirsaishi Hello I have the same issue. Have you found a solution? :)

[@amirsaishi]

@@staty2good unfortunately not, if I find anything I will share it with you here.

[@staty2good]

@@amirsaishi The solution somebody in the comments found was to replace both instances in line 215 and 112 of {% render 'icon-caret' %} with ‹span class="svg-wrapper">{{ 'icon-caret.svg' | inline_asset_content 3}