How To Add a “Buy Now” Button To Shopify In Two Minutes (Without a Plugin)

Shopify has many virtues, but certain things annoy me. One of them is that simple tasks, like replacing your “add to cart” button with a “buy” button (without replacing it with the Apple Pay button on mobile), are needlessly hard.

In the interest of saving you some time and keeping you from downloading a sketchy/overpriced plugin to do this, here’s my two-minute solution for getting this little job done.

Note: This is a simple fix and shouldn’t cause any issues, but I’m not responsible for any damage you do to your theme file while tinkering. Always keep a backup in case you need to revert.

If you want to add a buy button to your store, do the following:

1. Go to admin.shopify.com and log into your store.

2. Click “Online Store” in your admin sidebar.

3. Click the white button with three dots next to your theme and select “edit code” from the dropdown menu.

4. In the Shopify theme code editor, open the “buy-buttons.liquid” file.

5. Search for ‘ name="add"‘ to find the “Add To Cart” button for your theme.

6. Press enter in the line above the start of the <button> tag (the part that says “<button”) to create a new line.

7. Copy and paste the code snippet below these instructions.

8. Press “Save”

9. Voila! You have a “Buy Now” button.

10. Customize to your liking (I’ll share a little about how it works below the code snippet).

                <!--- Start of Buy Now button --->
                  <button
            id = "ProductSubmitButton-{{ section_id }}"
            onclick = "window.location.href = '{{ shop.url }}/cart/{{ product.selected_or_first_available_variant.id }}:1'"
            name = "buy"
            class="product-form__submit button button--full-width {% if show_dynamic_checkout %}button--secondary{% else %}button--primary{% endif %}"
            {% if product.selected_or_first_available_variant.available == false or quantity_rule_soldout %}
              disabled
            {% endif %}
          >
            <span>
              {%- if product.selected_or_first_available_variant.available == false or quantity_rule_soldout -%}
                {{ 'products.product.sold_out' | t }}
              {%- else -%}
               Buy Now
              {%- 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>
         <!--- End of Buy Now button --->

What This Does:

• The <button> tag creates your new button, which will go above your “Add To Cart” button.

• The “onclick” within the button tag adds a quantity of 1 of the variant the customer is looking at on your product page to their cart, then redirect them to your checkout page.

• “Buy Now” is what’s written on the button unless it’s sold out/out of stock, in which case it will load the default “Out Of Stock” text for your store (The logic of this is controlled by the liquid if/else statement).

• The SVG and circle show a little loading sign when clicked to pass the time while your customer is redirected to your checkout page.