How To Add "Continue Shopping" Button For Your Shopify Store

How To Add

Outline

I. Why Do You Need A “Continue Shopping” Option For Your Checkout Page? 

The ultimate goal of any eCommerce business is to maximize the conversion rate gained through their money site.

Every button, image, or piece of content displayed on a website has the incredible power to influence customer behaviors, which are always a matter of concern for shop owners. Hence, the Continue Shopping option means much more than a button. I will show you briefly.

Let’s imagine you are a shopper roaming around for some favorite items. You found it and added it to your cart. Now, the system will direct you to a page like below, but you want to get back to your recent collection to browse for more items. What should you do? If the Continue Shopping option isn’t there, you will have to get back to the home page and retake your route.  But when such a button is present, you will be able to return to your feed in one click! Now you have more reasons to stay. 

Generally, you can encourage shoppers to fill their cart with more products just by adding a button. It means more sales, more loyalty in the end. There are several choices for you to decide which page your customers will land at, such as the catalog page, the last product page they just left.

II. How To Add “Continue Shopping” Button? 

Since adding the Continue Shopping option involves the use of coding, it may seem to be tricky at first, especially for beginners. However, you don’t necessarily have some knowledge of coding to perform this task. All you need to do is looking at the step-by-step guideline prepared below. Let’s get started!

Step 1: Log in to your Shopify admin, then go to Online Store => Themes.

Log in to your Shopify admin

Step 2: Choose the theme you want to edit (current theme) and click Actions => Edit code.

Choose the theme you want to edit in Shopify

Step 3: In the Templates directory, select cart.liquid. Here, look for the direction to your cart-template.liquid file. Most of the time, this Cart Template file is in your Section directory. 

Now to avoid any technical jargon, imagine cart.liquid file as a house, and cart-template.liquid is a your bedroom. You'd need to add the Continue Shopping button to your bedroom door. 

It is worth mentioning that not all the themes have cart-template.liquid in its Sections directory. So, in this case, you just need to find cart.liquid in Templates.

Templates directory, click cart.liquid

no cart-template.liquid for the Brooklyn theme

As you can see, there is no cart-template.liquid for the Brooklyn theme.

Step 4: Go to your cart and click “inspect” the check out button.

cart in shopify admin

Step 5: For finding the code of the Checkout button, you need to search for name="checkout". You will find a line of code that looks like this.

Find the code of the Checkout button

This line of code varies among themes, so don’t worry if yours is quite different from mine.

Step 6: Copy the content of ‘class’ and find it in cart.liquid (or cart-template.liquid).

cart.liquid

Then, find “btn cart__checkout” to find the code for the Check Out button like below.

cart.liquid

Step 7: It’s time to insert a new line of code.

To create a Continue Shopping link, you first need to decide which page you would like to direct your shoppers to when they click "Continue Shopping button".

I’ll show you the code for different options below.

01. For a link that directs to the catalog page

If you want to lead customers back to your catalog page, use the following code on a new line before the code of Update Cart button.

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

lead customers back to your catalog page

Now, turn to your cart page and you will find the Continue Shopping button added.

add Continue Shopping button

When I click “Continue shopping”, I can return to the product page.

02. For a link that directs to the last collection visited

You might want your customers to land at the last page they viewed, instead of the catalog page. In this case, you need to insert some JavaScript into your theme code by following the next steps.

  • Find theme.liquid in the Layout directory.

    Find theme.liquid in the Layout directory

    It is easy to locate the theme.liquid as all themes have it.

    • Take a look at the bottom of the file to find the closing </body> tag. Here, you have to paste the code below right before the </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>

    • Click “Save” and enjoy your results.

    Now, go to your cart page and click Continue Shopping to see what will happen.

    III. How To Customize Your “Continue Shopping” Button Styling? 

    Once you added the Continue Shopping button successfully, it’s time to give it some customization. A plain-text button is not so attractive to appear on a beautiful, professional e-commerce website. Just by adding some details to the code of your button link, you can have a button of whatever style you desire. For that reason, it’s worth scanning the helpful guideline provided below.

    There are two options for styling your Continue Shopping button. The first is customizing it to match the style of other buttons in your theme. Another one is giving it a completely new style based on your liking.

    1. Add Styling That Goes With The Current Theme

    Here, you can choose to apply either primary button styling or secondary one to your Continue Shopping link. All you need is to replace the line of code for the Continue Shopping link with one of the codes below.

    a, Primary button design

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

      >Continue shopping</a

    >

    Primary button design in Shopify

    Continue shopping option

    b,Secondary button design

    • For those who use free theme

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

      >Continue shopping</a

    >

    secondary button design

    Customize“Continue Shopping” option
    • For those who use Supply theme

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

      >Continue shopping</a

    >

    2. Add Styling That Is To Your Taste

    Step 1: Open cart.liquid in the Templates directory (or cart-template.liquid in Sections if you can find this file).

    Step 2: Change your current code for the Continue Shopping button into the code below.

    <a href="collections/all" id="continue-shopping" class="btn btn--secondary cart_update cart_continue--large small-hide">Continue Shopping</a>

    Step 3: Scroll to the bottom of the file and insert the following code for styling.

    <style>

    #continue-shopping {

    font-size: 12px;

    color: yellow;

    border-color: red;

    border-width: 2px;

    border-style: solid; 

    }

     modify font size, color, or border style of the button

    The modification of font size, color, or border style of the button is always up to you. 

    Step 4: Click “Save”

    Add Styling to Continue Shopping option

    Here is the Continue Shopping button with the chosen style.

    You’ve grasped all knowledge about creating a Continue Shopping option and customizing it to your preference. For a more lucrative business, try it without any hesitation!

    Sell Online With Shopify

    Trusted by over 1,000,000 businesses worldwide

    Start Free Trial

    Explore the #1 Shopify Page Builder today.

    Try PageFly FREE
    FREE Facebook & Google ads audit - improve ROAS, CPC, CTR & increase sales with actionable tips from certified PPC experts. Request Audit