Assistance Needed for Sticky "Add to Cart" Button Implementation

[Épris]

Hi everyone,
 
I hope you're all doing well! I'm looking for assistance with adding a sticky "Add to Cart" button to my product page on Shopify. I’d love to implement this feature, but I'm not very experienced with coding, and I want to ensure I do it correctly without causing any disruptions to my store.
 
Here are some specifics about what I'm trying to achieve:
 

• I would like the "Add to Cart" button to remain sticky at the bottom of the screen when users scroll down the product page.
• I want this feature to work on both mobile devices and desktop. (But I would be happy to also receive a code that is on mobile alone.)
• I attempted to add some custom CSS, but I’m unsure if I placed it in the correct part of the theme's code.

Additionally, I've faced alignment issues with other app embeds, which complicates the implementation further. If anyone has experience with this or can guide me on the proper steps to get this done, it would be greatly appreciated!
 
Thank you for your help!

Best,
Epris Owner

epris.shop (link to my store if needed) 

[steve_michael2]

Hi @Épris ,

Please follow this video

https://www.youtube.com/watch?v=cxA8HriAOAg

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[namphan · Accepted solution]

Hi @Épris,

Please go to Actions > Edit code > sections > main-product.liquid file and add code here:

Code:

<div style="
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 9999;
    width: 100%;
    background: #ffffffbd;
    padding: 1rem;
">
  <button
    id="ProductSubmitButton-Sticky-{{ section.id }}"
    type="submit"
    name="add"
    form="{{ product_form_id }}"
    class="product-form__submit button button--full-width button--primary"
    style="max-width: 500px; margin: auto;"
  >
    <span>
      {%- if product.selected_or_first_available_variant == null -%}
        {{ 'products.product.unavailable' | t }}
      {%- elsif 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>
    {%- render 'loading-spinner' -%}
  </button>
</div>

[Épris]

This worked like magic! Thanks so much!

[namphan]

hi @Épris,

You're welcome and happy to help 😊