How To Add a ‘Continue shopping’ Link To Your Cart in Shopify
You can add a Continue shopping link to your cart page that allows customers to easily return to browsing products after going to the cart page. This way gives your customers an opportunity to continue shopping after adding something to the cart.
In this article, I will show you a step by step tutorial on how to add a continue shopping button to the cart page on Shopify. You can choose to add a link that will take customers back to your catalog page, back to your home page or back to the last collection page that they were looking at.
Follow the below step to add a Continue shopping link to your cart page:
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, and then click Actions > Edit code.
- In the Sections directory, click cart-template.liquid. If your theme doesn’t have this file, then click cart.liquid in the Templates directory.
- Find the code for the Checkout button by searching the file for
name="checkout". The line of code for the checkout button varies theme to theme, but will look something like this:123<button type="submit" id="checkout" name="checkout" class="btn">{{ 'cart.general.checkout' | t }}</button> - The next step is to paste a new line of code to create a Continue shopping link. The code that you paste will depend on which page you would like the link to go to:1<a href="/collections/all" title="Continue shopping" id="continue-shopping">Continue shopping</a>
You can change the value in thehrefattribute to change the link to go to. - Click Save and you are done.
If you want to link that goes to the last collection viewed, then you will need to add some JavaScript to your theme code. Continue to follow the next steps.
- In the Layout directory, click theme.liquid.
- Find the closing
</body>tag, near the bottom of the file. Paste the following code above the closing</body>tag:1234567891011121314<script>if(Storage !== undefined) {var defaultLink = "/collections/all";{%- if template contains 'collection' -%}sessionStorage.collection = "{{ collection.url }}";{%- endif -%}{%- if template contains 'cart' -%}if( !sessionStorage.collection ) {sessionStorage.collection = defaultLink;}document.getElementById("continue-shopping").href = sessionStorage.collection;{%- endif -%}}</script> - Click Save and you are done.
I hope this article is helpful to you.
