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
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>
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>
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
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"
Subject | Author | Latest Post |
---|---|---|
Subject | Author | Posted |
---|---|---|
19m ago | ||
34m ago | ||
36m ago | ||
an hour ago | ||
an hour ago |