How to direct 'Continue Shopping' button to custom URL

Last updated

The Continue Shopping buttons in Ecwid are designed to allow your customers to return to the products catalog from non-catalog pages of your store (bag page, search, checkout) and to continue exploring and buying your products. The buttons work this way:

  • If customer adds a product to the bag and then clicks the Continue Shopping button, he is redirected to the category that the added product belongs to;
  • If customer opens the bag without adding products to it and then clicks the Continue Shopping button, he is redirected to the last visited category (or to the root 'store' category if he didn't visit any category before clicking the button).

You may want to change this behavior, for example, to always redirect your customers to the main store page upon clicking 'Continue shopping'. There are two ways to achieve this:

1) Use the "Custom URL for ‘Continue Shopping’ Buttons" app from Ecwid App Market.

2) Add a custom Javascript modification to your store page on your site.

"Custom URL for ‘Continue Shopping’ Buttons" App

 Custom URL for ‘Continue Shopping’ Buttons App allows to set the URL you want to direct your Continue shopping buttons to right within your Ecwid control panel. It is a fast an easy way that does not require any coding. The app is free for all paid Ecwid users.

You can get the app under this link: Get the App

Add a custom Javascript modification to your site

To create a custom redirect for Continue shopping buttons, you can use this code. Add it to the source code of your site page where Ecwid store is added.

<!-- An HTML/Javascript code snippet for Ecwid to redirect continue shopping buttons to a custom page -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
if (typeof(Ecwid) == 'object') {
  Ecwid.OnAPILoaded.add(function() {
    // Redirect address. Change it to the URL of page where you want to redirect your customers.
    // You can use absolute or relative addresses, e.g. 'index.html', 'http://google.com'
    var continueShoppingRedirect = "#!/~/category/id=0";
    // Delay (ms), which is necessary for the empty cart page to appear after onCartChange event firing
    var empty_cart_page_delay = 500;
    // Continue shopping buttons CSS selectors 
    // (you can remove the ones that you don't want to change behavior for)
    var buttons = [
      '.ecwid-btn--continueShopping', // Cart page, Order confirmation page and Search results page
      'div.ecwid-productBrowser-cart-emptyCartPanel .ecwid-btn--secondary', // Empty cart page
    ];
    // Pages (Ecwid.Page.type) where buttons should be customized
    // (you can remove the pages that you don't want to change the buttons on)
    var pages = [
        'CART', 
        'SEARCH', 
        'ORDER_CONFIRMATION',         
        'ACCOUNT_SETTINGS', 
        'ORDERS', 
        'ADDRESS_BOOK'
    ];
    // This function find the continue shopping button on the page and replace it with a customized one
    var replaceButton = function() {
      var buttonObject = jQuery(buttons.join()).filter(":not('.clone'):visible");        
      if (buttonObject.length) {
        buttonObject.clone().addClass('clone').appendTo(buttonObject.parent()).click(function() {
          location.href = continueShoppingRedirect;
        }); 
        // Remove the original button
        buttonObject.remove();        
      }
    }
    // Replace the button on page loading
    Ecwid.OnPageLoaded.add(function(page) {
      if (jQuery.inArray(page.type, pages) >= 0) {        
        replaceButton();
      } 
    });
    // Replace the button on the empty cart page after clearing the cart 
    // (it doesn't fire onPageLoaded event)
    Ecwid.OnCartChanged.add(function(page) {
      setTimeout(replaceButton, empty_cart_page_delay);
    });
  });
}
</script>

This code will redirect Continue Shopping button to the main store page. If you want a redirect to another page, simply change the 'continueShoppingRedirect' value to any URL you want.

You should insert the code above into the source code of the site page, where you have Ecwid widgets, following the Ecwid integration codes. Exact instructions depend on what platform you are using on your site. If you need help, please contact our support team on the forum.

Read more about changing Continue shopping button here: How to change Continue Shopping buttons

Make sure you use improved storefront buttons. See what they look like and how to enable them here: Improved appearance of storefront buttons 

Was this article helpful?
0 out of 0 found this helpful
Questions?
Get help
  • Presales Chat

    Need help choosing the right Ecwid plan? Our Sales team has the answer you’re looking for.

  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7