How can I add a sticky cart button to Dawn Theme V10?

[Sabrii2]

Hello! I want to have a sticky add to cart button (at the bottom) on my productpage. Can anyone help me! I have Dawn Theme V10

[namphan]

Hi @Sabrii2,

Please go to Customize > Products > Default product > Add block > Custom liquid and add code here:

Code:

<button
id = "ProductSubmitButton-Sticky"
type="submit"
name="add"
form="{{ 'product-form-' | append: section.id }}"
class="product-form__submit button button--full-width button--primary"
{% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
  disabled
{% endif %}
style="position: fixed;bottom: 0;left: 0;margin-bottom: 0;"
>
	<span>
	  {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
		{{ 'products.product.sold_out' | t }}
	  {%- else -%}
		{{ 'products.product.add_to_cart' | t }}
	  {%- endif -%}
	</span>
	<div class="loading-overlay__spinner hidden">
	  <svg
		aria-hidden="true"
		focusable="false"
		class="spinner"
		viewBox="0 0 66 66"
		xmlns="http://www.w3.org/2000/svg"
	  >
		<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
	  </svg>
	</div>
</button>

Hope it helps!

[Sabrii2]

Thanks Namphan! Unfortunately it is not working! The button is not clickable, it is also transparant. 

[namphan]

Hi @Sabrii2,

Please send your site. I will check it.

[Sabrii2]

Thank you! www.belloti.nl

[namphan · Accepted solution]

Hi @Sabrii2,

Please go to Actions > Edit code > main-product.liquid file and paste this at the bottom of the file:

<button
id = "ProductSubmitButton-Sticky"
type="submit"
name="add"
form="{{ 'product-form-' | append: section.id }}"
class="product-form__submit button button--full-width button--primary"
{% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
  disabled
{% endif %}
style="position: fixed;bottom: 0;left: 0;margin-bottom: 0;z-index: 999;"
>
	<span>
	  {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
		{{ 'products.product.sold_out' | t }}
	  {%- else -%}
		{{ 'products.product.add_to_cart' | t }}
	  {%- endif -%}
	</span>
	<div class="loading-overlay__spinner hidden">
	  <svg
		aria-hidden="true"
		focusable="false"
		class="spinner"
		viewBox="0 0 66 66"
		xmlns="http://www.w3.org/2000/svg"
	  >
		<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
	  </svg>
	</div>
</button>

[Sabrii2]

Thank you! Not transparant anymore! But still not clickable. 

[namphan]

Hi @Sabrii2,

Can you re-add it and send me the preview link? I will check it again

[Sabrii2]

Dear Namphan, 
It works! Thank you very much! Can i adjust the moment that the button sticks. For example after scrolling down when the add to cart button is not more in sight?

Greetss

[namphan]

Hi @Sabrii2,

This will take many steps and debug, so it is difficult for me to guide you in detail.

Hope it is clear to you.

[AsiyaM]

Hi, this is really helpful, thank you! I want to change the color of the button and add a black border, if possible. Would you kindly let me know how I can do that? Could I add some more code here to configure the color? Thanks in advance!

[namphan]

Hi @AsiyaM,

Can you send me the site link? I will check it in detail

[AsiyaM]

Sure! It's Crescentt.com

[namphan]

Hi @AsiyaM,

I don't find the code you added and the sticky button, can you add it and send me the preview link?

[Gil-Momo]

This worked perfectly for my shop, Dawn v11.0

[namphan]

Hi @Gil-Momo,

If you have any questions, you can contact me. Happy to help you

[Gil-Momo]

Hi,

How can I change the colour of the button? I used your code and the button is currently in black. could you tell me how to change it color?

Thanks,

Gil

[dmwwebartisan]

@Sabrii2 

Please check the following video

[Ugurcan]

@namphan We recently released a sticky cart app with a free plan. It works with all themes including Dawn, check it out: https://apps.shopify.com/pasilobus-sticky-cart

[MRamzan]

You can add sticky add to cart: