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!

You’re welcome!

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.

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 */ }

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

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)

Thanks for the suggestion! I've added it to the list.

Thanks for the suggestion! Will look into that for the next version

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

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

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).

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.

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.

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.

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!

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?

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!

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.

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 %}

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!

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!

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";

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.

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

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.

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!

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?

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).

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 !

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

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

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!

nvm i found the arrow...............................

Great! Hope everything works well for you

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!

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

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?

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?