HELP! Extra checkout button in cartpage

New Member
2 0 0

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?

0 Likes
Highlighted
Shopify Staff
Shopify Staff
493 24 37

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

Ted | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Shopify Expert
565 24 93

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>
★ ThemeUp: Nifty Upgrades for your Shopify Store ★ https://themeup.net
1 Like
New Member
5 0 0

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?

0 Likes
Shopify Partner
1753 289 373

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>
Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
5 0 0

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

0 Likes
Shopify Partner
1753 289 373

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

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
5 0 0

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



 

0 Likes
Shopify Partner
1753 289 373

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"

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
0 Likes
New Member
5 0 0

Thank you so much!

0 Likes