Moving The Checkout Button

Solved
New Member
4 0 0

I am using Simple theme. How do i move my checkout button above my "continue shopping" & "refresh" Button?

The photo below shows my checkout page, i hope this gives you a better understanding of what i am hoping to achieve. Please help a brother out! 

Thanks 

 

Screen Shot 2019-06-17 at 3.14.16 PM.png

0 Likes
Highlighted

Success.

Shopify Staff
Shopify Staff
317 30 51

Hi, @SimplyBetterLiv!

 

This is May from Shopify.

 

If you don't mind me asking, why did you want to move your 'Checkout' button above 'Continue Shopping'? Ideally, by having the buttons in this order, we can offer easy access if customers need to change the quantity of the item and refresh their cart, as well as to encourage customers to browse your store to shop for other items. If you are still interested in rearranging these buttons, you will need to edit your theme code. I am not an expert in coding, but I do have a little experience in it, and was able to find a way to do this!

 

Before making any changes to your code, I highly recommend making a duplicate of your theme, to ensure that your customers aren’t affected by any unintended results. After you make the duplicate, feel free to follow the steps below!

 

1. From your admin, go to 'Online Store > Actions > Edit'.

2. On your theme editor, open up 'cart.liquid' located in your 'Templates' folder.

3. Inside your 'cart.liquid' file, find this code:

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

You can find it by doing a search for name="checkout". If you are using a Windows computer, you can perform a search by pressing 'Control + F' or if you are using a Mac, press 'Command + F'.

If you have not made any edits to this file, you can locate this code on line 167-169.

4. You will want to cut these three lines of code, and place it right below this code:

<p class="cart__policies txt--emphasis rte">{{ taxes_shipping_checkout }}</p>

Your code should look like this:

5. Click 'Save'.

 

For future reference, if you would like to change the button order back to what you had before, you can always roll back to an older version of your theme. If you are not comfortable with making this change, I highly suggest reaching out to our Shopify ExpertsAlternatively, since Simple is a Shopify developed theme, I can also submit a request on your behalf to our Theme Support to see if they are able to make the changes for you in accordance with our design policy. If you wish to explore this route, feel free to follow back up and we can continue on.

 

Let me know if this helps! Feel free to reply to this post or contact our 24/7 support if you have any questions.

 

Best Regards,

 

May.

May | 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