Design

Anybody else want this? Am I missing something? Is there a better venue for feature requests? Tobi?

Most existing web shops that have a continue shopping button use javascript or the referring page to return to the previous page.

Usability wise, I wonder if going back to the page you just came from is really a huge important link, worth of putting in parallel with Update Cart and Proceed to Checkout. I mean it’s only one of many pages available to go to next? Why not use the main nav to make your next move? Or a minor nav? Or a footer nav?

I just have trouble justifying the continue shopping link. What does it really mean anyway?

Just thinking outloud.

You can do this with liquid if you like.

Example:

<input type="button" 
   value="Continue Shopping" 
   onclick="window.location = '{{ cart.items.first.product.collections.first.url }}'" />

Tobi: I used your suggestion and it works great. Thanks!

Cameron: I appreciated your input. Good points. As a result I made the cart page less “modal” by putting some of the other nav links back in. It was my client (wife) who asked for a “Continue Shopping” button, and once it got fixated in my head, I got all worked up about it.

Tobi,

any ideas why this is not working for me?

What about…

<input type="button" value="Continue Shopping" />
<input type="hidden" name="move_to" value="{{ cart.items.first.product.collections.first.url }}" />

Cleaner, and doesnt rely on Javascript…
Again, progressive enhancement by unobtrusive javascript

I hope it works… I’ll try this right now

Thank you Tobi, I did it as well :-)

So which one do I use, exactly where do I put it???

http://starlooks.myshopify.com

Starlooks, this is the file cart.liquid where I pasted the code (see at the end):

<form action="/cart" method="post" id="cartform">
    <table id="basket">
        <tr>
            <th>Item Description</th>
            <th>Price</th>
            <th>Qty</th>
            <th>Delete</th>
            <th>Total</th>
        </tr>{% for item in cart.items %}
        <tr class="basket-{% cycle 'odd', 'even' %}">
            <td class="basket-column-one">
                <div class="basket-images">
                    <a href="{{ item.product.url }}" title="{{ item.title | escape }} &mdash; {{ item.product.description | strip_html | truncate: 50 | escape }}"><img src="{{ item.product.images.first | product_img_url: 'thumb' }}" alt="{{ item.title | escape }}" /></a>
                </div>
                <div class="basket-desc">
                    <p><a href="{{ item.product.url }}">{{ item.title }}</a></p>
                    {{ item.product.description | strip_html | truncate: 120 }}
                </div>
            </td>
            <td class="basket-column">{{ item.price | money }}{% if item.variant.compare_at_price > item.price %}<br /><del>{{ item.variant.compare_at_price | money }}</del>{% endif %}</td>
            <td class="basket-column"><input type="text" size="4" name="updates[{{item.variant.id}}]" id="updates_{{ item.variant.id }}" value="{{ item.quantity }}" onfocus="this.select();"/></td>
            <td class="basket-column"><a href="#" onclick="remove_item({{ item.variant.id }}); return false;">Remove</a></td>
            <td class="basket-column">{{ item.line_price | money }}</td>
        </tr>{% endfor %}
    </table>
    <div id="basket-right">
        <h3>Subtotal {{ cart.total_price | money }}</h3>
        <input type="image" src="{{ 'update.png' | asset_url }}" id="update-cart" name="update" value="Update" />
        <input type="image" src="{{ 'checkout.png' | asset_url }}" name="checkout" value="Checkout" />
    </div>

<input type="button" 
   value="Continue Shopping" 
   onclick="window.location = '{{ cart.items.first.product.collections.first.url }}'" />

</form>{% endif %}

Check how it looks on my site.

HTH

TY. I’ll try this.

www.StarlooksBoutique.com

do I cut and paste this entire thing and put it in the theme.liquid? I dont know what I’m doing here. Please help. TY

<input type="button" 
   value="Continue Shopping" 
   onclick="window.location = '{{ cart.items.first.product.collections.first.url }}'" />

Just insert the above piece at the end of you liquid…I just did this on my website.

TX guys!
Margie

www.chesapeakeribbons.com

Geeze I finally figured it out. I was putting it in theme.liquid. I didn’t know there were different .liquids out there until I looked for it (duh). lol… not that it took me this long, I tried once and then just now came back to it today. Thanks every1.

So for others out there, put it in the (cart.liquid), NOT your theme.liquid file!

We should do screen shots and point with arrows for people like me that are VISUAL learners… lol…

Tobi’s suggestion is a good first step, but that button doesn’t really make much sense when the user clicks on “View Cart.” The “continue shopping” button, in that situation, will throw the user back to the section of his most-recently-added cart item and, I’d imagine, baffle him in the process.

In an ideal world, it would be nice if the Shopify folks could do some system-wide clickstream analysis to discover the most effective destination for “continue shopping” in common scenarios… and then give us a magic button to insert in cart.liquid

The key benefit of Shopify is that it does the hard work for us, and this is another ideal opportunity for such assistance.

I tried this code

<input type="button" 
   value="Continue Shopping" 
   onclick="window.location = '{{ cart.items.first.product.collections.first.url }}'" />

I noticed that when i click the Continue Shopping It brings me to other page/collection I made, What happen?

What about when clicking this button brings me to Products page? any idea?

Hi Louiezen

To take it back to product simply use the following code

<input type="button" 
   value="Continue Shopping" 
   onclick="window.location = '{{ cart.items.first.product.url }}'" />

Essentially just take out the ref to collection.first

Cheers
Mike

www.inspiradigtal.co.uk

Jabbet wrote:
... that button doesn’t really make much sense when the user clicks on “View Cart.”
The “continue shopping” button, in that situation, will throw the user
back to the section of his most-recently-added cart item and, I’d imagine, baffle him in the process.

Actually, it probably depends on what is being sold. For instance, it does make sense in the following scenario …

Some products (ex: invitations or clothing), might have matching/suggested items indicated on an item’s description page. For example, for invitations, there might be image links to matching RSVP Cards and Thank You Cards. For clothing (like an evening dress), there might be image links for suggested accessories that go well with it (like jewelry, shoes or clutch bags), and for men, maybe suggested ties.

In these instances, you want your customer to be able to go back to that most-recently-added cart item’s page with the utmost convenience, so that they can order these accessory items without having to search for them again.

I know when I’ve browsed through shopping carts, especially when reaching an item after having to go through a series of clicking on many sub-categories and scrolling through hundreds of items to get to it, I would find it annoying that when I’d add to cart and then click the “Continue Shopping” link/button that it sent me all the way back to the homepage.

It can be very frustrating to have to find one’s way back to that item’s page to view the accessories (or to even have to hunt for where those accessories are themselves).

So depending on what you are selling, you should determine what would be most convenient for your customers.

This message is for Nenitiko (everyone else can skip this post, lol).

Nenitiko ...

I had gone to your website to see if you had implemented the code you wrote in your post for your own site (as you had mentioned that you were going to test it out).

Anyway, in doing so, I noticed some problems with your site that I thought you might want to know about in case you hadn’t checked out your website lately.

I just realized that your post was like 2 years ago, lol, but I figured I’d post this anyway, in the hopes that you still peruse these forums. I had no other way of contacting you privately, as there is no “private messaging” system on this forum, and your contact form on your website (indicated in your profile) does not submit due to the following error message …

"There are missing fields on your form please correct them."

You will want to check that out, cuz I did not have any empty fields, so the error message might be that you have “required” fields in your form that are not entry fields on your form page.

The other problem on your website is …

Many of your items give an error message when adding to the cart.

For an example, go to this page on your website and add the item to the cart—> http://www.specialswarehouse.com/products/ballerina-style-flats-red-and-white

The cart error says:

"We were not able to add this item to your shopping cart because no variant ID was passed to us."

It could be because there’s no size choices in the drop-down menu.

Most all of your women’s shoes items give this error (as of this writing, on your homepage, the first shoe item works because the drop-down menu has sizes listed, but none of the other shoes work due to no sizes), so if you haven’t been receiving orders, this is likely why.

Unfortunately, your potential customers might not have had any way to contact you to tell you about it, due to the contact form cannot be submitted. Thus, I thought it necessary that I try to contact you here.

Hope you are still active on this forum so that you get this message.

Much success to you and your business.

<input type="button" 
   value="Continue Shopping" 
   onclick="window.location = '{{ cart.items.first.product.collections.first.url }}'" />

I would like use a custom graphic for the “continue shopping” button, to go with all the other custom buttons in the theme I am using (glacialis). Is there a clean way to do that with this otherwise-perfect solution?

Nevermind! Figured it out…

<p class="continue"><input type="image" src="{{ 'btn_continue.gif' | asset_url }}" alt="Continue Shopping"  
   value="Continue Shopping" 
   onclick="window.location = '{{ cart.items.first.product.collections.first.url }}'" /></p>

Plus the appropriate CSS, in my case:

p.continue{
clear:both;
text-align:left;
padding-left:10px;
}

Hi everyone. First post here. Sorry if my formatting is WAY off.

When I was first setting up my shop this thread did catch my eye as I'm one of those who thinks a continue shopping button is very useful. And the non techies I work with also thought it was important.

I also didn't like the solutions here much either.

I don't like the emulate the back button approach because it can take them back to a product page that may now be showing a bad stock figure. Or have a basket link that's showing the wrong amount. And they've done that product they really don't want to look at it any more.

And I didn't like the cart.first.items.x.x.x.collections.first.url stuff because sometimes it just doesn't take people to what is the logical place. Especially if they've just updated quantities or done other things.

And most importantly this second solution doesn't work with search, e.g. Search, Search Results, Click Product, Add to Cart, Continue Shopping. I feel continue shopping here has to take them back to the search results (and the right page of results at that) as that's the list of products they were working down and examining.

I've implemented a solution on my store and thought I'd pass it along. It uses JavaScript and Cookies so the squeamish can look away now.

First in all the pages I reckon are important way points on the shoppers progress I call a piece of code that remembers the url in the cookie. So thats my home page, search results page and collections page.

Since I'm remembering the whole url this works well as it remembers the terms they may have searched for and what page or results/products they are up to.

Then on the cart and product page I implement a link that points to the URL mentioned in the cookie and I call this link 'Continue Shopping'. This link then always takes them back to the list of products they were last looking at.

I hive off the cookie code to mycookies.js, this is standard javascript you can find easily on the web. I really should credit it but I've forgotten where I nabbed it from.

function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

The code in the collection.liquid, home.liquid & search.liquid then looks like this, it simply remembers the full url in the cookie for one day:

<script type="text/javascript">
createCookie('tlpurl',document.URL,1);
</script>

And the code in the cart.liquid and product.liquid sort of looks like this:

<div style="text-align: center; margin: 0px 0 30px 0">
<a id="backlink" href="/">Continue Shopping</a>
</div>

<script type="text/javascript"> 
document.getElementById('backlink').href=readCookie('tlpurl'); 
</script>

I don't know whether this code will help anyone but to me it seems much more logical to the shopper when the continue button works like this.

Thanks for contributing Andy! Great solution that may help someone down the line.

This looks great Andy. I like how you've made it library agnostic. Thanks for sharing it.

Hi Andy,

I implemented according to your recipe. But the Continue Shopping link points to home only? No matter which collection I'm browsing before going to cart. Any idea?

Thomas,

Which recipe exactly did you apply? Andy's?

If you need help with this, you'll need to provide a link. It's complicated to guess what could have gone wrong here.

Caroline

Remember if your setting cookies you'll need to set P3P privacy policy otherwise IE6+ will reject your cookie and it won't get set.

Look at the bottom status bar and see if you get a red eye icon.

Yeah, I used Andy's recipe and I'm using Safari/Mac. Never heard of P3P before.

PS: IE testing is planned for next week and I fear it.

Hi, sorry about that delay.

Only time I've got right now is Fridays.

First to double check. You've put the createCookie snippet in the places you want the continue button to return to.

I'd start by sticking an alert('Yoohoo ' + document.URL); after the createCookie() call just to make sure its running and that the URL is what you expect.

Then I'm pretty sure (although I don't have it installed in front of me) that Safari should let you examine the cookies that are set. Make sure you can see the cookie and that it contains the right URL. I'm using Chrome myself and it's in the 'options / under the hood' tab.

It sounds like Safari may be setting the cookie on the first page it sees but not overriding it with the new value when it hits the collection page. I'm doing browser compatibility testing today (hopefully). So I'll install Safari and double check the code is working with it.

Right I've just checked it in Safari 4.0.4 and it works fine for me. Did a search, went to page 4, looked at a product, added it to basket, clicked 'continue shopping' and went back to search results page 4.

I'd stick that alert debugging in and check the cookie. On safari for me its on 'top right gears icon' -> preferences -> security -> show cookies.

Mine shows up correctly for website - www.thatlookspretty.com , name - tlpurl, the contents correctly shows the URL (well sort of, the safari dialog is hopelessly small and I can't resize it)