HELP! Extra checkout button in cartpage

[kieranthomas]

I am currently using the venture theme, can any of you guys help me? On mobile, when i am in the cart page the checkout button  looks really clean and I would like to duplicate it and have it at the top of the cart page aswell as the bottom. Anyone help?

[Ted]

Hi, @kieranthomas!

Ted here from Shopify, thanks for reaching out to us!

This can be done, however, this is not something I would recommend doing as it can look a bit repetitive on a site. If there are too many checkout buttons it can appear "pushy" for a sale which may have a negative impact on the store. Do you have an example of where you would like to add the second checkout button? Would you consider having the one checkout button appear in a different location on the page instead? 

Thanks a mill, 

Ted

[ThomasBorowski]

The way to implement this would depend very much on the theme you're using. Simply duplicating the button's code might not work as that might result in duplicate IDs and JS code that relies on there only being one checkout button not working correctly.

To comment on Ted's concerns: It can make sense to put a second checkout button at the top of the cart page if the cart can potentially contain many items and therefore can become quite long. That way customers don't have to scroll all the way down to find the checkout button. I've seen cart pages that were designed so that you couldn't even see the first item of the cart without scrolling on mobile. The cart page exit rate was fairly high as customers simply through the cart was empty. So we placed a second checkout button "above the fold", which improved things noticably.

EDIT: Sorry, just realized you mentioned you're using Venture.

Should be relatively easy: Take the following code and paste it right below the line that starts with <form action="cart"...> in the file sections/cart-template.liquid.

<span class="cart__buttons"><button type="submit" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button></span>

[Thomasmulder]

Hello,

I just tried this, but the button doesn't work. It shows up, but when I click it nothing happens. Any idea what to do?

[Jasoliya]

Hi @Thomasmulder 

For that you have to implement in cart form tag but you can do fast like that:

<span class="cart__buttons"><a href="/checkout" class="btn">{{ 'cart.general.checkout' | t }}</a></span>

[Thomasmulder]

Thanks! This works:) Any idea how I change the color of the button?

[Jasoliya]

Replace this code:

<span class="cart__buttons"><a href="/checkout" class="btn chk_btn">{{ 'cart.general.checkout' | t }}</a></span>

Add this css in asset->theme.scss at bottom of file:

.chk_btn{background-color: red; color: white; }

Note: you can play with both color

[Thomasmulder]

I'm sorry, I'm not an expert... How do I change it to a specific color (#006EFF)?

---

---

[Jasoliya]

If you want this color(006EFF) as background then use this:

.chk_btn{background-color: #006EFF; color: white; }

Note: or if you want to change text color then change "color:#006EFF"

[Thomasmulder]

Thank you so much!