Sticky add to cart on mobile

PeppePro02 · September 14, 2025, 5:15pm

Hi everyone,
I’m using the RISE theme for my Shopify store and I’d like to add a sticky “Add to Cart” button that only shows on mobile (and stays visible while scrolling).

Can anyone guide me on how to implement this with custom code? Or, if it’s easier, could you recommend an app that works well with the RISE theme and supports this feature?

Thanks a lot for your help!

WEBSITE rdmalta.com

oscprofessional · September 15, 2025, 6:11am

Hi @PeppePro02 ,
Sticky “Add to Cart” button on mobile in your Rise theme (rdmalta.com)

Create a snippet

In Shopify Admin → Online Store → Themes → Actions → Edit code
Under Snippets, Add new snippet, name it e.g. sticky-add-to-cart-mobile.liquid

Add markup to snippet

In sticky-add-to-cart-mobile.liquid, add something like:

<div id="sticky-atc-mobile" class="sticky-atc-mobile">
  {% form 'product', product %}
    <button type="submit" class="btn sticky-atc-button">
      {{ 'products.product.add_to_cart' | t }}
    </button>
  {% endform %}
</div>

Add CSS

.sticky-atc-mobile {
  display: none;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 10px;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
  z-index: 9999;
  text-align: center;
}

.sticky-atc-button {
  background-color: #000;  /* adjust */
  color: #fff;
  padding: 12px 20px;
  border: none;
  font-size: 16px;
  width: 90%;
  max-width: 400px;
}

@media (max-width: 767px) {
  .sticky-atc-mobile { display: block; }
}

Add JS for visibility toggle.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const sticky = document.getElementById('sticky-atc-mobile');
    const original = document.querySelector('.product-form__submit'); // adjust selector
    if (!sticky || !original) return;
    window.addEventListener('scroll', function() {
      const rect = original.getBoundingClientRect();
      if (rect.bottom < 0) {
        sticky.style.display = 'block';
      } else {
        sticky.style.display = 'none';
      }
    });
  });
</script>

SEOAnt-Jeffery · September 15, 2025, 9:13am

Hi @PeppePro02

This is an alternative solution for your reference only. Having accessed your store and checked the situation on the product pages in particular, I suggest using an app to display a sticky ‘Add to Cart’ button on mobile devices. This is because the custom code will take up a lot of space on the store’s backend, which will slow down page speed. Your current page speed is very good, and I hope it won’t slow down after the code is inserted.

Here I recommend you using and testing this app SEOAnt ‑ Sticky Add To Cart. It supports button customization and is visible on mobile only. Meanwhile, it can work with the Rise theme, as I have tested. Please click the blue text here for more details. I would be very happy if it helped you in some way. Thank you!

Mike_Aperitive · September 15, 2025, 10:14am

@PeppePro02 I think @SEOAnt-Jeffery suggestion is great and low cost. If it doesn´t work out I could build you a mini plugin to save the monthly fee. Its quite easy.

Need a simple way to manage Black Friday / Cyber Monday discounts?
Check out Bulk Discount Editor – Sale Prices to update product prices in just a few clicks.

aditya58singh · September 15, 2025, 12:28pm

Custom Code Implementation (Mobile-Only Sticky Button)

Step 1: Create a New Snippet

Log in to your Shopify admin.
Go to Online Store > Themes.
Next to your active RISE theme, click Actions > Edit code.
In the left sidebar, under Snippets, click Add a new snippet.
Name it sticky-mobile-cart.liquid (or similar) and click Create a new snippet.

Paste the following code into the file and save it:

liquid

{% if template == 'product' %}
<style>
  .sticky-mobile-cart {
    display: none; /* Hidden by default on desktop */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff; /* Adjust to match your RISE theme colors */
    border-top: 1px solid #e2e2e2;
    z-index: 9999;
    padding: 15px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
  }

  .sticky-mobile-cart__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 100%;
    margin: 0 auto;
  }

  .sticky-mobile-cart__info {
    flex: 1;
    text-align: left;
  }

  .sticky-mobile-cart__title {
    font-weight: bold;
    font-size: 14px;
    margin: 0 0 5px 0;
    display: block;
  }

  .sticky-mobile-cart__price {
    font-size: 16px;
    color: #000; /* Adjust color */
  }

  .sticky-mobile-cart form {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: flex-end;
    margin-left: 10px;
  }

  .sticky-mobile-cart select,
  .sticky-mobile-cart input[type="number"] {
    height: 40px;
    border: 1px solid #ddd;
    padding: 0 10px;
    margin: 0 5px;
    border-radius: 4px;
    font-size: 14px;
  }

  .sticky-mobile-cart select {
    min-width: 80px;
  }

  .sticky-mobile-cart input[type="number"] {
    width: 50px;
    text-align: center;
  }

  .sticky-mobile-cart button {
    height: 40px;
    background: #000; /* Match your RISE button color */
    color: #fff;
    border: none;
    padding: 0 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    margin-left: 5px;
    transition: background 0.3s;
  }

  .sticky-mobile-cart button:hover {
    background: #333;
  }

  /* Mobile-only: Show on screens up to 767px */
  @media (max-width: 767px) {
    .sticky-mobile-cart {
      display: block;
    }
  }
</style>

<div class="sticky-mobile-cart">
  <div class="sticky-mobile-cart__content">
    <div class="sticky-mobile-cart__info">
      <span class="sticky-mobile-cart__title">{{ product.title }}</span>
      <span class="sticky-mobile-cart__price">{{ product.price | money }}</span>
    </div>
    <form action="/cart/add" method="post" enctype="multipart/form-data">
      <select name="id" required>
        {% for variant in product.variants %}
          <option 
            {% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %} 
            value="{{ variant.id }}"
            data-price="{{ variant.price | money }}"
          >
            {{ variant.title }}
          </option>
        {% endfor %}
      </select>
      <input type="number" name="quantity" value="1" min="1" maxlength="2">
      <button type="submit" name="add">Add to Cart</button>
    </form>
  </div>
</div>

<script>
  // Optional JS: Update price when variant changes (for dynamic pricing)
  document.addEventListener('DOMContentLoaded', function() {
    const select = document.querySelector('.sticky-mobile-cart select[name="id"]');
    const priceEl = document.querySelector('.sticky-mobile-cart__price');
    if (select && priceEl) {
      select.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        priceEl.textContent = selectedOption.getAttribute('data-price');
      });
    }
  });
</script>
{% endif %}

If it overlaps footers or other elements in RISE, adjust the bottom CSS value or z-index.

PeppePro02 · September 16, 2025, 7:40am

Hi, thanks for your reply. I just pasted the code, but I don’t see any difference on the store.

PeppePro02 · September 16, 2025, 8:01am

Hi @oscprofessional thx i tried your code i m seeing one the website like this … Maybe could i share my collaborator code ? let me know thx

aditya58singh · September 16, 2025, 8:15am

IN the

Main Product Liquid File

Add

{% comment %} Include sticky mobile cart snippet {% endcomment %}

{% render ‘sticky-mobile-cart’ %}

PeppePro02 · September 16, 2025, 8:30am

Thx @aditya58singh where exactly i need to add it ? bottom of main-product.liquid?Let me know thx

aditya58singh · September 16, 2025, 8:50am

At the end of that liquid file

PeppePro02 · September 16, 2025, 9:20am

@aditya58singh i did how you told me but i still don t see it …

oscprofessional · September 16, 2025, 9:35am

You can definitely share the collaborator code in a personal chat. we can take a look and help you adjust it so that it shows Sticky add to cart on your store.

aditya58singh · September 16, 2025, 9:42am

Okay, issue is you might be using the default of customize template

I have mentioned {% if template == ‘product’ %}

In the starting

You can remove this code

Here is the code again…

  <style>
    .sticky-mobile-cart {
      display: none; /* Hidden by default on desktop */
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: #fff; /* Adjust to match your RISE theme colors */
      border-top: 1px solid #e2e2e2;
      z-index: 9999;
      padding: 15px;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
      text-align: center;
    }

    .sticky-mobile-cart__content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 100%;
      margin: 0 auto;
    }

    .sticky-mobile-cart__info {
      flex: 1;
      text-align: left;
    }

    .sticky-mobile-cart__title {
      font-weight: bold;
      font-size: 14px;
      margin: 0 0 5px 0;
      display: block;
    }

    .sticky-mobile-cart__price {
      font-size: 16px;
      color: #000; /* Adjust color */
    }

    .sticky-mobile-cart form {
      display: flex;
      align-items: center;
      flex: 1;
      justify-content: flex-end;
      margin-left: 10px;
    }

    .sticky-mobile-cart select,
    .sticky-mobile-cart input[type='number'] {
      height: 40px;
      border: 1px solid #ddd;
      padding: 0 10px;
      margin: 0 5px;
      border-radius: 4px;
      font-size: 14px;
    }

    .sticky-mobile-cart select {
      min-width: 80px;
    }

    .sticky-mobile-cart input[type='number'] {
      width: 50px;
      text-align: center;
    }

    .sticky-mobile-cart button {
      height: 40px;
      background: #000; /* Match your RISE button color */
      color: #fff;
      border: none;
      padding: 0 20px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      font-weight: bold;
      margin-left: 5px;
      transition: background 0.3s;
    }

    .sticky-mobile-cart button:hover {
      background: #333;
    }

    /* Mobile-only: Show on screens up to 767px */
    @media (max-width: 767px) {
      .sticky-mobile-cart {
        display: block;
      }
    }
  </style>

  <div class="sticky-mobile-cart">
    <div class="sticky-mobile-cart__content">
      <div class="sticky-mobile-cart__info">
        <span class="sticky-mobile-cart__title">{{ product.title }}</span>
        <span class="sticky-mobile-cart__price">{{ product.price | money }}</span>
      </div>
      <form action="/cart/add" method="post" enctype="multipart/form-data">
        <select name="id" required>
          {% for variant in product.variants %}
            <option
              {% if variant == product.selected_or_first_available_variant %}
                selected="selected"
              {% endif %}
              value="{{ variant.id }}"
              data-price="{{ variant.price | money }}"
            >
              {{ variant.title }}
            </option>
          {% endfor %}
        </select>
        <input type="number" name="quantity" value="1" min="1" maxlength="2">
        <button type="submit" name="add">Add to Cart</button>
      </form>
    </div>
  </div>

  <script>
    // Optional JS: Update price when variant changes (for dynamic pricing)
    document.addEventListener('DOMContentLoaded', function () {
      const select = document.querySelector('.sticky-mobile-cart select[name="id"]');
      const priceEl = document.querySelector('.sticky-mobile-cart__price');
      if (select && priceEl) {
        select.addEventListener('change', function () {
          const selectedOption = this.options[this.selectedIndex];
          priceEl.textContent = selectedOption.getAttribute('data-price');
        });
      }
    });
  </script>

BoostShop · October 6, 2025, 8:42am

If you don’t like code ( and want something free)
then this app will do the job

Topic		Replies	Views
How can I create a mobile sticky add to cart button on the Dawn theme? Store Design design , customizations , css , cart-page , html , product-page	6	259	August 23, 2024
Add Sticky Add to Cart button to Dawn theme v14 Store Design design , customizations , product-page	4	386	October 6, 2025
How can I make my 'Add to Cart' button sticky on a mobile screen? Store Design css , shopify-themes	3	280	June 26, 2023
Sticky Add to Cart (Taste Theme) Store Design design , customizations , css , html , product-page	5	139	May 31, 2025
Brooklyn theme Mobile optimization Sticky Add to Cart Shopify Design	1	234	October 24, 2019

Sticky add to cart on mobile

Related topics