Note

If you use a free theme from Shopify, then you might be able to contact Shopify Support for help with this tutorial. It requires 15 minutes of design time. To learn more, refer to Support for themes.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version

• Explore Online Store 2.0 theme customizations

You can add a Continue shopping link to your cart page that allows customers to easily return to browsing products after adding something to the cart. 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.

Add a Continue shopping link to your cart page

To add a Continue shopping link to your cart page:

PC:

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Sections directory, click cart-template.liquid. If your theme doesn't have this file, then click cart.liquid in the Templates directory.

2. 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:

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

3. 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:

   For a link that goes to your catalog page

   To add a link that goes to your catalog page, paste the following code on a new line either before or after the code for the Checkout button:

   <a href=/channel/"/collections/all" title="Continue shopping">Continue shopping</a>

iPhone：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Sections directory, click cart-template.liquid. If your theme doesn't have this file, then click cart.liquid in the Templates directory.

2. 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:

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

3. 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:

   For a link that goes to your catalog page

   To add a link that goes to your catalog page, paste the following code on a new line either before or after the code for the Checkout button:

   <a href=/channel/"/collections/all" title="Continue shopping">Continue shopping</a>

Android：

1. From the Shopify app, tap Store.

2. In the Sales channels section, tap Online Store.

3. Tap Manage themes.

4. Find the theme you want to edit, and then click Actions > Edit code.

1. In the Sections directory, click cart-template.liquid. If your theme doesn't have this file, then click cart.liquid in the Templates directory.

2. 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:

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

3. 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:

   For a link that goes to your catalog page

   To add a link that goes to your catalog page, paste the following code on a new line either before or after the code for the Checkout button:

   <a href=/channel/"/collections/all" title="Continue shopping">Continue shopping</a>

1. For a link that goes to your home page

   To add a link that goes to your home page, paste the following code on a new line either before or after the code for the Checkout button:

   <a href="/" title="Continue shopping">Continue shopping</a>

   For a link that goes to the last collection viewed

   To add a link that goes to the last collection viewed, paste the following code on a new line either before or after the code for the Checkout button:

   <a   id="continue-shopping"   href=""   title="Continue shopping">   Continue shopping </a>

2. Click Save. If you added a link that goes to either your catalog page or your home page, then you are done. If you added a 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.

3. In the Layout directory, click theme.liquid.

4. Find the closing </body> tag, near the bottom of the file. Paste the following code above the closing </body> tag:

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

5. Click Save.

Add button styling (optional)

Note

Adding this class will not have an effect on Boundless.

If you use a free theme that is not Supply, then add the attribute class="btn--secondary" to the line of code that you pasted to add a Continue shopping link. Your code should look like this:

<a href=/channel/"/collections/all" title="Continue shopping" class="btn--secondary">   Continue shopping </a>

If you use Supply, then add the attribute class="btn-secondary" to the line of code that you pasted to add a Continue shopping link. Your code should look like this:

<a href="/collections/all" title="Continue shopping" class="btn-secondary">   Continue shopping </a>