The Podcast
Show Links
- Redirect Add to Cart Button - https://gist.github.com/svaustin66/faf84f162472dd5597908f6b5aff3177
- Custom Product Builder app - https://apps.shopify.com/customization-tool
- Editing theme code episode - https://jadepuma.com/blogs/the-shopify-solutions-podcast/episode-34-edit-your-shopify-theme-code-for-the-first-time
- Build-a-Bed - https://mulberryparksilks.com/products/build-a-bed
Help the Podcast
Transcript
Hey, Scott Austin here.
As I build Shopify stores for my clients, two things that I focus a lot of my energy on are:
In this episode, I'm going to talk about one of the tools in my toolbox for breaking down the shopping process into easy decisions. I call it linear shopping experiences. That's my own term for this as I've not heard of an industry term for the concept. So most shopping experiences online are done in parallel. For example, I built a store that sells skins for ATVs. And the product page was quite complex as the customer had to decide on the graphic for the skin, the colors, and clearly define their exact model of ATV and what options the ATV had that would affect the design and shape of the skin. I built this with a product options app with a lot of conditional logic in it for all of the possible permutations. Now some products are just complex and the customer needs to make a lot of decisions in parallel before they can add the product to their cart.
But some shopping experiences can be significantly simplified by turning them into linear shopping experiences. And I like to make the shopping experience as easy as possible for the consumer. So I try to break the shopping experience down so the customer is making one or just a few decisions in each step instead of making a dozen decisions in parallel on the product page. One way I do this is by adding some logical structure to browse experience. You can do this using list of collection pages, collection pages with filters, sub-collections, and products. The goal is to make the overall process easier for the customer by limiting the number of decisions they need to make at each step. Now that's not always possible. Sometimes you're going to have very complex products, like the ATV skins, that are going to have multiple decisions that are made in parallel when making the purchase decision. But there are many situations where we could make those decisions linear and have the customer make one decision at a time instead of combining all those decisions into a single decision point. And that's where that concept of linear shopping experiences come from.
Here’s a shopping situation to illustrate the idea. Let's say you want to buy a boat and you also want to buy a truck to tow the boat. Those can be two separate decisions. First, you may decide what boat you want and make that purchase decision. And then you'll use that decision to inform the next decision on what size truck do you need to tow that boat. But you don't need to make a truck and a boat decision at the same time. So that's an example of a linear shopping experience.
Another, more typical for Shopify, shopping experience could be for a store that sells gifts. You could also make a gift card a part of the purchase process. And one way to do that in a traditional Shopify setup is to have the gift card as a variant or option in the gift product. Do you want a gift card yes or no. So the customer is making the decision about the gift product and the gift card at the same time. And there's nothing wrong with that. I've done it in many stores and it can work really well. But as an alternative, we could break that experience into two steps. Making it easier for the customer to make the decisions separately.
I'm going to give you some different ways that you can build linear shopping experiences inside of a Shopify store. We'll start with the simplest and then step forward in increasing complexity of the shopping experience.
So let's start with a basic solution. Let's use the example that I just gave you of a gift product and a gift card. So we can have two separate products for this. One is the gift product let's just say it's a birthday present. And you can have a second product which is the birthday card. And that birthday card could have different variants for the card design. The way we make this a linear shopping experience is by directing the customer to the birthday card after they add the birthday gift to their cart. The way to make this happen is by adding a little bit of code to the add to cart button so when the customer clicks the add to cart button they don't get redirected to the cart. Instead they get redirected to another page and in this case that other page will be the birthday card product page.
All that's needed to make this happen is a single line of HTML code added to the product form in the theme files. Now if you're not comfortable adding code, that can seem daunting at first. I'll include a link in the show notes to the previous episode I did about getting started with theme edits. The edit is a simple one to make. The added line is an input field with a type of hidden and name of return underscore to and a value of the URL that you want the customer to go to after they click the add to cart button. I'll include a link in the show notes to a file that shows the syntax of what that looks like and where to place it. That single line then sends customers to the designated page when the Add to Cart button is clicked. The product still gets added to the cart too.
And there's some variations on how this can be implemented to customize it to your store's needs. For example you may want every product of a certain product type to go to a specific product like the gift card one. So the added code will include an if statement like if product.type equals Birthday Gifts. And these if statements can stacked with elsifs. That way you can designate different landing urls based on different product criteria. The common fields that I use if/thens for are product type,product tag or metafield. And lately I've been using the metafield method the most especially now that metafields are much easier to manage inside of online store 2.0.
The page that you redirect the customer to doesn't have to be a product page like my example used. You can redirect to a product, a collection, or a page. Technically, you can redirect them to any URL even off your site. But I've never used anything beyond collection, product or page as my destination. Now it can be confusing to the customer if they click the add to cart button and end up on another product page or a collection page. So I find it best to really set the context on what's going on on the designation page. For that reason, I typically use a page as the destination that I redirect to. And that page has a little explanation text at the top that says something to the effect of 'hey you just bought a great birthday gift do you want to add a birthday card to your order?' And right there I give them the option to say no by adding a go to my cart button. I put that go to cart button at the top and the bottom of the page because I don't want the customer feel trapped in this gift card experience. And then in the middle of those two buttons I put the content that is being promoted whether it's a single product or a collection of products.
This simple method is done with just a few lines of liquid code. To make this experience a little more elegant, you can change the behavior on the add to cart button being clicked from redirecting to another page and instead having a pop-up right on the product page. The pop-up can ask if they want to add a birthday card to their birthday present in our scenario. And, of course, optimizing this copy for the particular situation with improve the experience. The pop-up will include two buttons that are the yes and no answers to the question. If they answer yes, they are taken to the destination page and answering no leads them to the cart. Adding this pop-up to your theme will be a bigger code edit involving HTML, CSS, Liquid and Javascript. That said it is still not very complex. But too complex to walk you through verbally. The additional effort pays off as it ends up being a much nicer experience and more intuitive for the customer instead of being taken away from the page without understanding why. Instead, the customer is presented with options and opts to see the additional product.
I've added this simple linear shopping experience too many of the stores that I've built for my clients. It's satisfying to see how many shopping experiences are made better with just the simple solution. That said I highly recommend that you use it when it is actually linear shopping experience. And what I mean by that is that a birthday card is a logical Next Step after ordering a birthday present. But I wouldn't create a linear shopping experience of pants and then shirts. Although that scenario may be a common one for people I think it's pushing them a little bit too far out of the normal flow of what they're doing. Here are some examples of shopping experiences that you could make linear that to me aren't unnatural or uncomfortable for the customer:
- buying a birthday present and then seeing related birthday cards .
- buying a pair of boots and then seeing related products like waterproofing or polish for those boots.
- purchasing a product and then seeing warranty options for that product.
- purchasing a camera and then seeing all of the bags and accessories that are applicable for that camera .
- purchasing a cell phone and then seeing cell phone cases that fit that cell phone.
So let's move on to the next level of complexity in linear shopping experiences. This is when the customer is putting together a complete set of things step-by-step. There are some apps that do this but at the simplest level of implementation I usually do it with code that I add to the theme. One example that I did last year was for a restaurant where they delivered pasta meals to your door. And you got to build the meal that you wanted. So we broke down the purchase process into steps .
- Step one was picking what type of pasta do you wanted.
- Step two was picking what sauce you wanted.
- Step three was picking any add-on meats that you wanted.
- Step four was picking any add-on vegetables that you wanted.
- And step 5 was adding other things like bread and dessert to your order.
So what I did in this scenario was create a collection for each one of these five steps. And then created a flow that walks the customer through the steps one at a time with a little graphic at the top that let them know what number in the process that they were on and they could see how far along the process they were to being finished. So for example on step one for pasta once they added the desired pastas to their order and clicked add to cart, I took them to the sauces collection page and let them pick what sauces they wanted. And at that top and bottom of that sauces collection page, I had a button that let them skip that step if they wanted to not add any sauces to their order. By breaking this out step-by-step in logical buckets of pasta sauces meets veggies etc, the decision making process is easier for the customer. Limiting and focusing their decisions in each step makes it easier for them to get through what could be a pretty complex decision-making process. The add to cart code here is the same that we were talking about for the previous, simple scenario. All we're doing is chaining them together across multiple steps in the shopping experience. Now adding the graphic at the top that shows them where they are in the ordering process creates a more complexity in the set-up and code. But it pays off by bringing the whole process together under one umbrella. I started by making custom collections that were just part of his linear shopping experience . So for example I had a normal pasta collection on the site and then a different pasta collection for the linear shopping experience. And I used that differentiation to let me know to show the graphic. We're trying to avoid a scenario where the customer can land on the vegetables collection without going through the linear shopping experience. We don't want them entering the process in the middle and seeing the graphic that says you are step 4 as they can be very confusing.
So let's move onto the next and final level of complexity. This scenario is when a visualization is needed so the customer can see the result of their decisions. We're going to need an app to implement this one as it would be too complex to code into the theme ourselves. If you go to the Shopify App Store and search for product options, will see a number of apps that provide product options. But product options is more of a parallel shopping experience and essentially provide by robust and complex product variants. The app category we will need is a product builder. Searching for that will return just a few results. I've only used two of them. The first was Bold's Product Builder, but that one is no longer available in App Store. Now I use Custom Product Builder by Buildateam. I'll link to it in the show notes.
This app is amazingly powerful. What makes it so powerful is that it allows you to show visualizations of the products that are being put together. This can work in a product options scenario where people are configuring different components for a product. And it can also work for a linear shopping experience where they are purchasing separate products but those products go together in a logical way. I've used this app for a store that I built for Mulberry Park Silks. They sell silk sheets and bedding. What we did with custom product Builder was allowed the customer to put together their own colors for their bedding that they wanted. And we broke it down into steps these steps:
- Select the size of bed.
- Select the color for the fitted sheet.
- Select the color for the flat sheet.
- Select the size, color and quantity of the pillowcases.
- Select the color and quantity of euro shams.
- Select the color of the duvet cover.
As you can see, there are a whole bunch of decisions the customer has to make when ordering a sheet set. But the app breaks them down and reuses decisions. For example the customer only has to specify the bed size once and that information is used on the fitted sheet, flat sheet and duvet cover. And as a product gets selected, its image gets added to the visualization. This one starts out as a bed with a naked mattress. Each product added adds a layer to the visualization so that the customer can see how the colors work together. It works like a wizard guiding the customer through every step of the process. At the end of the process, each product is added to the cart as a separate product which allows the customer to remove a product or change one out without having to go through the whole process again.
Building this shopping experience took a lot of work. And that’s because you need product images of all of the different choices in the purchase process. The images are PNGs with transparencies. Each image gets stacked on the previous images. The stack of images makes for a very compelling customer experience. It’s like the car configurator you see on most auto sites. The app even lets you change the view of the product. Putting together the Build a Bed shopping experience for Mulberry Park Silks took many, many hours. The result though was worth it and customers are finding it engaging and even fun to play with. I’ll link to the Build a Bed in the show notes so you can look at it.
What we are doing with Linear Shopping Experiences is a type of cross-sell. Now, I always get cross-sells and up-sells mixed up. So here are some definitions:
- Upselling is the practice of encouraging customers to purchase a comparable higher-end product as a replacement to the one they are purchasing. Think of a McDonalds meal plan where you get upsold to the large meal if you are ordering the medium sized one.
- Cross-selling invites customers to buy related or complementary items in addition to what they are purchasing. This is the classic McDonald’s ‘do you want fries with that?’
Bundles are a very common type of cross-sell in Shopify stores. Bundles can be effective. The downside is that are a parallel purchase process and make the customer make multiple decisions at once.
If you are using bundles or any other type cross-sells in your store, then I recommend that you consider adding linear shopping experiences to your store. Linear Shopping Experiences don't have to replace other cross-sell solutions. They can work side-by-side in many store. And even if you don’t already have a cross-sell solution in place, linear shopping experiences are worth testing in many Shopify stores.
The goals for Linear Shopping Experiences include:
- Increasing conversion by reducing the confusion of a parallel shopping experience.
- Increasing average cart size by making customers aware of products that are directly related to products in their cart.
So track those metrics before and after your implement Linear Shopping Experiences to see what impact they have on your store.
Thanks for listening.