Continue Shopping Button: What Does It Mean And How To Add It To Your Cart On Shopify

Do you run an online store? So do you know how to keep your customers to continue to buy your products?

In this blog today, ArrowTheme will bring to you one of the great methods to help you increase your revenue. That is the continue shopping button.

In detail, this article will mention about what does the continue shopping button mean and how to add it to your cart on Shopify. If you are ready, let’s discover.

What does the continue shopping mean?

Some customers go to the cart page to check the total price or details of products like shipping options.

Or because the website led them to the cart page after the customer added the items to their cart.

And then in that page, your customer will see the continue shopping button that will help customers return to the website to continue shopping.

Why should use the continue shopping button on your online store?

Online shopping plays an important role in society. Because thanks to online shopping, people don’t need to go out to buy something.

They just need to stay at home and with some clicks, they can complete their shopping with ease and convenience.

The following are some reasons why online shopping is prefer in the quarantine period:

Shopping encounter

For many people, shopping in a traditional or physical store can be a significant source of anxiety and concerns about infection. These problems are reduced while you’re at home.

Hygiene precautions

Shopping online is a good way to keep social distance. Because masks, gloves, safety barriers, social distancing and other hygiene measures are here to stay. Therefore, many customers would prefer to have their orders delivered to their homes.

Convenient

Online shopping is secure, and quick. Don’t waste any time.

How to add the continue shopping link to your cart on Shopify?

1 Firstly, you have to go to Online Store > Themes in your Shopify admin.

2. After you’ve found the theme you want to change, go to Actions > Edit code.

3. Thirdly, you have to click cart-template.liquid in the Sections directory. If your theme doesn’t include this file, look in the Templates directory for cart.liquid.

4. Fourthly, you have to search the file for name=”checkout” to get the code for the Checkout button. The checkout button’s line of code varies by theme, but it should look something like this:

5. To make a Continue shopping link, paste a new line of code after that. However, the code you paste will be different depending on the page you want the link to go to:

5.1. For the link which goes to the catalog page:

Paste the below code on a new line before or after the code for the Checkout button to insert a link to your catalog page:

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

5.2. For the link which goes to your homepage:

Paste the below code on a new line before or after the code for the Checkout button to insert a link to your home page:

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

5.3. For a link to the most recently viewed collection:

Paste the below code on a new line either before or after the code for the Checkout button to insert a link to the most recently viewed collection:

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

6. Click Save the file. You’re finished if you added a link to either your catalog page or your home page. However, if you added a link to the most recently visited collection, you need to include some JavaScript in your theme code. Carry on with the next steps.

7. Click theme.liquid in the Layout directory.

8. Near the bottom of the file, look for the closing </body> tag. Above the ending </body> tag, paste the below code:

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

9. Finally, you just press Save.

How to add the button to your cart on Shopify?

You may style your Continue shopping link to make it look like a button in case you are using a free Shopify theme.

Therefore, you may make your button match with the other buttons in your theme by adding a class property to the code.

Moreover, for major button styles, all free Shopify themes have the same class name, and most use the same class name for secondary button styles.

To make your Continue shopping link using primary button styling, follow these steps as below:

In case you want to add a Continue shopping link, add the attribute class=”btn” to the  code you pasted. So this is how your code should look:

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

To make your Continue shopping link with secondary buttons, follow these steps:

In case you’re using a non-Supply free theme, add the class=”btn—secondary” property to the line of code you pasted to add a Continue shopping link. Thus, this is how your code should look:

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

In case you’re using Supply, add the class=”btn-secondary” property to the line of code you pasted to create a Continue shopping link. This is how your code should look:

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

Conclusion

Above is all about the definition of the Continue shopping button and the ways to add it to your cart on Shopify. In case you still do not understand any term.

Besides that, you want to get more useful information for your ecommerce business. So don’t heritage. Feel free to access us at Arrowtheme blog. 

Furthermore, are you looking for the fully solutions for your ecommerce website? So you found the right place. Our awesome Shopify Packages that come in three different packages:

• Basic
• Standard
• Advance

Each of them has a different cost to meet your company’s needs. Our Basic package is for someone who wants to build a low-cost Ecommerce website.

Furthermore, our Standard and Advance packages are appropriate for those who want to create an Ecommerce Website with advanced features. We are confident to bring to your website the best things ever.

Read More: The simple way to create custom single product page in WooCommerce