Collection of Continue Shopping Buttons

Published: May 1, 2009

Updated: August 9th, 2020

In previous posts, I created a collection of checkout buttons and progress bars. This time I thought that you will find it useful to look at the Continue Shopping collection (from over 100 websites).

One of the things I looked at, was the naming of the call to action. There were no major surprises: 85 websites named the button “Continue Shopping”.

Only a few websites will use different names such as return to shopping, or back to shopping.

I’ve looked for specific elements – i.e., the color of the button, or the presence of arrow icons. I tried to identify a pattern that would help designers develop more usable buttons. That pattern does not seem to be possible, simply because business rules need to be taken into consideration when you decide on this button/link. However, I can advise on two things:

A. if you want to use an arrow in your button/link, the arrow should be positioned on the left side of the button and it should point to the left. You need to provide a strong sense of direction to your visitors. Usually, when you click on the continue shopping button you will be taken to either the home page or the previous page (which actually means going back).

B. always name this call to action button Continue Shopping

You can view the collection after some statistics:

1. Button Color (there is no rule you need to follow here). You need to take into consideration the color scheme of your brand and what you want to achieve on that page. Business objectives should be taken into consideration when you choose the color: i.e. do you want to force users to click on this button? Then, use strong and contrasting colors.

Note: The majority of the link buttons use the color white. All % are rounded to integers.

Black – 4%

Blue – 19%

Brown – 4%

Green – 7%

Grey – 27%

Orange – 3%

Red – 4%

White – 33%

Yellow – less than 1%

2. Text Color. Again, choosing the color of this element should follow the defined business rules. Depending on what you want the users to do next, increase or decrease contrast on the text. However, the text should be easy to read. Do not use the same color for the background and the text (i.e. white text on white background).

Black – 17%

Blue – 16%

Brown – 2%

Green – 3%

Grey – 7%

Orange – 4%

Red – 5%

White – 47%

Purple- less than 1%

3. Call to Action text – there is no doubt here. You should use Continue Shopping, not resume shopping or just continue

Back to Shopping – 3%

Continue – 2%

Continue Shopping – 85%

Keep Shopping – 3%

Resume Shopping – less than 1%

Return to Shopping – 6%

Shop More – 2%

4. Link or Button? The answer – again – depends on your micro-goal (move users one step closer to purchasing). If you want to push your customers to continue shopping, then you will display a button. If you want them to start the checkout process, then have display this CTA as a link. Some etailers will use multiple text links pointing to various pages on their website. The purpose is to improve page usability (fewer clicks to reach the destination).

Buttons – 84%

Links – 18%

5. Arrows or no arrows? Arrows are used to provide a sense of direction. Use them, but no need to enforce it too much.

Use arrows – 44%

Don’t use arrows – 56%

6. Arrow pointing to left or right? Definitely, left.

Left – 25%

Right – 17%

Down – 4%

Note: % is relative to the 102 websites

7. Arrow position. The arrow should be positioned on the left side of the button.

Left – 29%