Creating a new button on Cart page

Technical Q&A
, ,
1

Hello all, I am currently trying to add a fourth button to my stores shopping cart page. I have the “Continue Shopping”, “Update Cart” and “Checkout” buttons. I would like to add a fourth button that directs the customer to an information page to contact us for net terms negotiations. The fourth button would need something like “Contact for Net Terms” as the text. Is there a simple solution to this? I seem to be in an endless cycle of breaking the code and having to start from scratch again. Thank you so much for any help!

2

Hi sure, we just need a couple of more info to help you: whats your Shopify theme?

Can u send your cart page code and eventually the link of your store?

3

Consider simply adding a new section below main cart section on a cart template.
Just in “Customizer”(Edit theme).

Configure this section to have necessary text and link/button.
Then ask for assistance to make it blend with your current buttons with “Custom CSS”. (or diy some css)

That’s what I’d do.

4

@lukeh92 edit product form code to include this new button, it is possible with some code changes

5

Hi @lukeh92 ,
You can add a fourth button to the cart page by editing your theme’s cart template.
Here’s the simplest and safest way to do it:

Steps

  1. Go to:
    Online Store → Themes → Edit code*
  2. Open your cart template file. Depending on your theme, this will be one of these:
  • cart.liquid
  • main-cart.liquid
  • cart-form.liquid
  • Or inside: sections/cart-template.liquid or sections/main-cart-items.liquid
  1. Look for the area where your buttons are rendered. It usually looks something like:
<div class="cart__buttons">
  {{ form | payment_button }}
  <button type="submit" name="update" class="cart__update">Update cart</button>
  <a href="/" class="button">Continue shopping</a>
</div>
  1. Add your new custom button under the existing ones:
<a href="/pages/net-terms" class="button button--secondary">
  Contact for Net Terms
</a>
  • Replace /pages/net-terms with the URL of your info/contact page.
  • You can style it with your theme’s button classes (button, btn, button--secondary, etc.).
6

Thank you so much! This worked wonderfully!