Checkout Toolbox

Flex Theme Sections

Linear Shopping Experiences

Previous | Next

Episode 70 - Rich Product Content in Your Shopify Store

Subscribe to the Podcast

The Podcast

Uneditted Video

Show Links

Help the Podcast

Transcript

Hey, Scott Austin here.

In this episode, I'm gonna talk to you about product pages and how to make really rich content for your product pages. I believe that product pages should have as much information as you have about your products on that one page. So instead of directing them elsewhere on your site to learn more about this or that as much information as you can put onto that product page, we'll keep that person on the page focused on the product decision that they're making at this time. So I'm gonna walk through seven stores that have pretty rich data about their products, and I'll explain to you how each one of them is built and where we came up with the content, how we made some decisions and all that good stuff, just to illustrate for you, how you can put lot of content onto your product pages.

Now I'm gonna be doing this, you know, as part of this podcast audio, but I I'm also gonna be filming this while I do it. So if you'd rather, if you look into the podcast right now and you'd rather watch everything and watch me point at different things on the screen, then go to the show notes for the podcast and find the link to the video. You can watch it that way. So let's first talk about the, the seven stores we're gonna talk about. The first one is called Fraggle tribe. They're outta Austria and they design and manufacture their own very unique clothing. Uh, the second one is EML they're outta Uruguay and they, uh, design and manufacture their own bag. The one we're gonna talk about as a beach bag, it's kind of interesting. Uh, claims is a company outta Southern California and they design and manufacture their own UV sanitizing device.

Apex chassis is out of Phoenix, Arizona, and they design and manufacture their own steering and suspension components for are off road vehicles. Uh, authentic vintage posters is outta LA Jolla, California, and they find and sell and restore old antique posters. Some of them, you know, like you're 90 years old, others are hundreds of years old. So it's really cool. Uh, product lineup. The game steward is focused on selling board that were started off as Kickstarter campaigns. So it's a very focused product catalog. And then active mend is a healing, uh, pad that helps you recover from soft, you know, tissue injuries. So right now store selling one product and it's it's these, these healing pads. So let's dive into each one of them. Let's start off with Fraggle tribe. And here on the Fraggle tribe site, you can see we've got this definite color scheme going on of these, the soft natural colors.

And we use that throughout the product page also. So the branding permeates through the product page. You can see it here in the, uh, the review stars is all part of the color scheme, the highlights for, for which products, you know, options. You're selecting map to the color scheme, the product seals mapped to the color scheme. You know, every, everything is mapping to that color scheme. So we're providing consistency here. Now Fraggle tribe is a wonderful job in creating product photography. Now they're all their own products, so they can't get, you know, photography in the manufacturer. They are the manufacturer. So you'll see here that they've got tons of photos, each of their products, some of their photo, you know, products they'll have up to 50 photos and they're showing, you know, different people modeling the products on all the different colors and all the different options.

So as I go through the color selections, the swatches, it takes me to the, the right photo for that specific color. And I can see all, all the different, you know, angles and stuff that the, the models are posing. The, the clothing in now here on the, uh, product options for size, you know, small meat, large, all the stores that I'm I'm showing you today are done in the flex theme and the flex theme by default, doesn't have a lot of contrast when you select one of these buttons. So the thing that I like to do is, is make it really obvious to the customer, oh, you have selected small, you have selected medium. So I've added some CSS that whichever one of these product options is selected, that we have, you know, the background color changes and, and the, the outline of that button changes also.

So it's really obvious which one is the currently selected one. So I want, I want a lot of contrast on that. And I also like to show product options as these buttons and the swatches. You, instead of like dropdown menus, you know, my many, many themes will do it in dropdown menu. And I like showing them as buttons because that way we're showing them all the options on the screen at one time. So they don't have to click on a dropdown menu to see what all the different sizes are or all the different colors or all, whatever the options are. It's very obvious. Here's your choices. Look at them all, compare them in parallel and then make your decision. Now the product seals here, this is a custom code that I've created. The product seals are all made from SVG files. So SVGs are vector files.

And the nice thing about SVGs is you can style them through HTML and CSS. These product seals, the original files that I added into this store were not these colors, but these colors were adjusted through HTML and CSS settings that I set to specify in wherever we show these product seals, you know, use the colors from the, the store's color scheme and make those seals match to them. And the product seals also use different roles to display them. So on all the products in the store, we're showing the slow fashion and the fair trade product seals. This product is tagged for spandex and cotton for the materials. And it also has a tag for four way stretch and vegan that make these four product seals show up. So as we built out our product catalog, we had to define a taxonomy of, you know, here's the different product seals we're gonna use, and here's the different logic we're gonna use sometimes for a product seal.

The logic could be look for a tag, or it could be the vendor or look for, you know, what options are available. And, you know, in our liquid code, we wire up that logic to show the different product seals. So if you went to a different product on this same store, you'd see different product seals and those different product seals would be appropriate for that other product. And that to me is like one of the big differences between product seals and trust badges. A lot of people are used to trust badges in a cart or on the homepage. They apply to the entire store. Like, you know, we SSL processing, it's safe, it's secure, all that good stuff. And here on the product level, the seals change for each given product based on the product characteristics. They've got some nice description stuff here about the product, and they also tell you what size the model is.

So you can, you know, get a feel for your size and what that'll look like on you. And then here at the bottom, we have a lot of product accordions. So I like putting, uh, content into accordions years ago. I actually put this type of content into product tabs and tabs look great on desktop, but they're not very responsive. They don't work well on mobile. So years ago I switched from tabs to accordions cuz accordions were really, really well on mobile. So I, I find that accordions are good on desktop and great on mobile and mobile's more important. So that's why we go with accordions instead of tabs. Now the top of this product page, we have a size guide. This is functional. It's built into the flex theme and you see if I click on that, it brings up a mobile that shows me the size guide, but size is so we actually show it twice.

And it's the first accordion that same content that's in that model also shows up here in this accordion. Now this one here is for fair trade. So this is a store level value prop. And they just explain, Hey, you know, we're actually manufacturing these in Bali and we use good best practices. We support the local economy and, and all that good information. Uh, the shipping and returns. These are straight from their policy pages. So they edit that content under their Shopify admin settings for policies. And that same content shows up here. We also show it in footer links and it shows up in checkout Fraggle tribe is a really good job on, you know, building a following and in putting great content out cross social network. So we show some links in there in the follow us link and last accordion for contact us. I like putting a contact us in there for people to just, you know, help build the brand and be, you know, be as friendly as you actually are.

Like if you want your customers to contact you and ask some questions about your products, then put a contact us elements somewhere on your product page to show that, Hey, we're willing to talk to you. Cause there are many brands out there. You can't contact them. You know, they don't answer their emails. They don't have a phone number and they're never gonna answer any questions you have. But a lot of, you know, really good brands are willing to have that conversation with their customers. So let them know that with some sort of contact us on the product page. And then at the bottom of this, we have a judge me, uh, is the app I use most often for product reviews. And you can see here, you know, the judge me colors are matched right into the, the color scheme of the site really, really well.

So that's the, the Fraggle tribe product. Let's go over to EML and this is the a beach backpack. So this backpack is designed to carry beach chairs, which are big and bulky. And as you can see on this product image right here, it's not like you're putting the chairs inside of a backpack. The backpack is designed with straps to be able to wrap around the chair, hold them. So it's a very unique product and it's even, you know, you can see here in the product seals, it's patent pending. So, you know, they're highlighting some value props for this product and they've done a really good job in creating lots of photography and assets for this product. You can see here, there's, there's plenty of different photos of, you know, flat lays and we've even got, uh, video inside of, of the product carousel. It shows you how to, you know, open it and close it and lifestyle photos, all that good stuff.

So lots of, lots of good visual assets there. And we use that in multiple ways. They, they made so many assets, so we have them in the product carousel, but we also in the rest of the product description, which goes on for quite a bit on this page, we actually are showing different, you know, photos and videos throughout. So here you can see another video here. We've got some close up photos, which you can actually open up the school full screen to really zoom in and see the detail of the quality of the manufacturing. You can see what, what types of buckles are used and what does, you know, the thread look like and the stitching look like and all that good stuff. And what we're doing in each of these different elements is we're trying to explain more to the customer cause every customer has different things that they care about.

So what we're trying to do on these product pages is to explain all the different things that different types of people care about in the hopes that whatever a given customer cares about the most, let's say about quality of manufacturing. Well, we've got a quality of manufacturing element here on the page. If other people care about, well, how does it work? How does it actually carry 'em with things? Well, there's a video that explains that put as much information as you can into your product pages so that people can find the thing that is important to them. And you can answer that question for, for them and give them confidence to make that purchase decision. So you see here, we got, you know, tons of photo, tons of copy videos, a that in and out on this product page and even at the bottom. So we've got the, the product reviews on this one with judge me.

And the great thing about that is in these product reviews, a couple of their customers have actually uploaded their own photo was which, you know, just adds more richness to the, the feedback that you're getting from those reviews. And we've got accordions for shipping and, uh, returns. So those are from the policy section of the site. On this one here, we made the decision to have this long scrolling page that alternates between different types of content of photos, cop, the videos and that kind of stuff. Instead of putting them into accordions and there there's no right or wrong there, it just becomes a function of looking at the content that you have and then making decisions from that content, how you want to display it. So that's EML, let's move on to claims now, CLE, uh, you know, they have this, this bright, uh, purple branding going on and you see, we carry that throughout the store in all the elements that we do.

There's, there's lots of purple going on. So that it's very, that that brand is, is very present and consistent throughout things. So in this device here, we got lots of photos. Once again, you know, they, they spent time creating photo assets and infographics and information, product carousel. Doesn't just, just show photos, but it's also showing photos and videos and infographics. So there's lots of different information in there. Now these product seals look a little bit different than the other ones that were based in the SVGs. These are PNG ones. I hadn't developed my, my SVG product seal solution. By the time I made this store, this is an older store for me. So this is an older way that I used to do product seals, but still what's important here on the product seals is that they look consistent. A lot of stores you'll see, will pull together different seals or badges from different sources and they look different.

They're not consistent. And to me, that just looks unprofessional. It looks like you don't care as much. So I really focus on making sure that our product seals and everything else in the store is consistent is part of the brand. It maps to the whole look and feel of the experience. So it doesn't stick out. It doesn't look like a Frankenstein. So these product seals here, even though they're than the other product seals that I've made are consistent within this store and experience, this manufacturer spent a lot of time creating assets, right? So here you can see we've got a video that kind of like professional commercial. Um, we've also got some infographics and then we've got, you know, photos showing the product being used in many different situations. And, you know, that's just to get you to realize all the different ways and places that you could use this product.

Um, then we've got another infographic with more information, and then we've got three videos of customer testimonials. We click on this one, what's going on. I, my name is Chris. You can see we've got those videos uploaded for them. And then we've also got customer views. And those reviews are from judge me also. And they're the color schemes mapped into, uh, the, the purple color scheme for the whole overall store. And then we've got a couple product accordions on this one. Uh, one is an FAQ with just, you know, different Q and a that people have about things that nice accordion functionality. And then we've even more of the science stuff. And then shipping and exchanges. And that's, that's from the policy pages. So tons and tons of content on this page. And you'll notice what we did is we broke that content apart a little bit on this one where we've got this element here, this infographic, and we put a purple background behind the whole thing.

And then then down below, and there's white background and then another purple background. So many times when you lay out a lot of content on a desktop experience, it kind of makes sense. What goes with what, especially, you know, with side by side content, we've got, you know, right here, you know, I, I know that this copy goes with these images, but when you have that responsive page and you look at them on the mobile, it's not as clear sometimes on mobile, what content goes with, what other content, what what's the associated copy for which images and those kind of things. And that's where alternating the colors on the backgrounds can really help. So this looks great on desktop. It looks even better on mobile when we alternate that content. So it becomes really clear that here's one content section, cuz it's got one background color white, and then we go down, oh, here's a purple, you know, background color.

So that's a different content section. And then below that's another white one, then another purple one. So a alternating that background is a great way to, you know, break up your content and make it more consumable and easier to understand for your customers, especially on the mobile phone. So let's move on to apex chassis. This one is, as I mentioned before, selling these heavy duty steering and suspension parts, this one happens to be for a Wrangler. They have their own product line. They have a, a bunch of different products in, in their store. Let's just say there's a hundred of them because you know, these are meant for, you know, people who are totally enthusiastic about taking their, their Jeep off road or whatever vehicle off road their customers are total gear heads and they wanna know all sorts of technical information. So what we did is you can see here in the copy, we've got lots of, you know, there's a product description.

And then we got all these different elements here, the special sauce, housing ball, studs, bearing design boots finished. And each one of those categories has a bunch of information behind them. And then we talk about, you know, what it, where it goes and what vehicles it fits on. Some of these, what it fits on will be hundreds of different vehicles. So if they make, you know, a suspension thing for like a, a Ford ranger, well, the Ford Ranger's been around forever. So there might be hundreds of different versions or years that it fits on. So in other words, tons and tons of information and Shopify, you don't have a lot of places that you can store data. You got a product description, you got a product vendor, you got product types. And then you can talk about your variance in your options. And you can see those here, but when it comes to all this, this information here, there's not a lot of good places to store it.

And I end up putting a lot of that meta field. So all this stuff here from the special sauce on down, there's tons of copy there, right? Each one of these is a different me field. So housing is one meta field. All Stu is another me field bearing design is another me field. And then what I do is I use liquid to display those meta fields in this very structured way. So you can see our, our categories are all right aligned. And the content of, you know, the copy for that category is bolted and left aligned. And that's all done through CSS, cuz they're all distorted in meta fields. And you know, this, this product test, some of the meta fields that are actually more meta fields that we're using cuz different products have different value props. And we put that information in there. This manufacturer spent a lot of time creating that product data and they've got their own product database outside of apex.

I think they're using Zoho for it. And then we had to develop a process to how we're gonna store that information in Zoho. And then how are we gonna transfer that information into Shopify? Where are we gonna store it in Shopify? And then how are we gonna display it on the product page when you're doing that type of workflow? There's no one single answer of things and it becomes a lot of iteration. So I worked a lot with the store staff on this. Where're like, all right, we got this type of information. You know, how are we gonna store it? How are we gonna transfer it? Where are we gonna put it in shop? How are we gonna display it? And you have to iterate through that a few times to come up with what ends up being the best design for all different content that you have talk about the, the accordance versus they've got the endless standard shipping and returns Accords that I love.

They also have a value prop that they provide a lifetime warranty. So we have a lifetime warranty accordion also, and that information is stored on a page when I do accordion. Sometimes that content is stored on a page. Sometimes it's stored in a policy and sometimes it's actually just stored in the code or it could be in a blog article. So they're is liquid code, you know, for the accordions, all these stores are in the flex theme and I'm using existing JavaScript and CSS. That's in the flex theme for the accordion functionality that expanding and closing that functionality already existed in this theme. But what I'm adding to it is the logic for what content we're showing and, and we're showing it sometimes that we will have Accords based on tags and stuff like that is also showing a little bit. Now I love customer reviews.

Uh, we'll show you some photos before this. One's great because this one, the customer uploaded their video into judge me where they talk about their product. And basically they're showing off how cool their Jeep looks kind of thing. So, you know, it's great user content and we've seen photos, we've seen videos and also just everything they say is awesome. So I, I'm a huge fan of reviews. So let's move on to authentic vintage posters. Um, as I mentioned, these guys sell old posters. This one happens to be from 1930. So it, 91 years old, this poster is the only one they have in stock, right? These are rare items. You know, when this thing was first printed in the thirties, they printed hundreds or thousands, whatever. But today it's really hard to find these what authentic vintage posters does is they find these rare posters and they also restore them.

And then once they're restored, then they see sell 'em to people to get mounted, framed and, and put up on their homes and offices and that kind of stuff. This store does a really good job in coming up with, you know, looking at the product and coming up with a little story and information about it. For example, in this one here, this is a bicycle manufacturer from Italy and I didn't notice it. Um, but they called it out here is note the Italian color is probably displayed in the jerseys. So if you look at the poster, right, the poster is got a lot of red, white and green, and the three jerseys are those colors, the Texas and those colors, cuz that's the Italian flag. This store staff took some time to look at the product and really explained to you and point things out that you may not notice, which actually makes the product even more intriguing.

Right? So good job on them for that. And then below that we've got this year and size information. This is actually stored in meta field. The way we're storing this, the, the line that I'm looking at says year circa 1930 dash 91 years old, all storing is the 1930 in a me field. And then everything else is done in liquid code with liquid code. I see that that meta field exists. So then I put in the word year and then the circa. And then I put the me field value of 1930 down. And then with liquid, I calculate from today's date back to 1930, how many years that was 91 years. So then I show the eight. So we're only, you know, having the 1930s stored the meta field, but that gives us a whole bunch of other information around it. And the same thing with size, we're just storing the width and height and inches, but then we show it in inches and in centimeters we're using liquid to convert the inches to centimeters and showing all that information.

Now here, um, we have product seals. These are the, uh, SVG products, product seals that I have developed. And you'll notice that with the SVGs, let's just go back to Fraggle tribe. This one here has an outline that I call scallop. You can see around it, but the authentic vintage posters doesn't have that outline. And because I can control the colors of these SVG files through CSS, I can basically turn elements on and off, which gives me more control and allows me to make the product. Seals look very different for each store, which is the goal here, right? We want these product seals to look bespoke and fit completely in. And you know, this store for those of you just listening to me, this store is a black background, right? Which was a, a bold decision we made that I think worked out really well.

And we had this steel blue or dark gray as a highlight color and then orange for action and the product seals just totally mimic that and reinforce that whole color scheme and just, you know, a total aside, the reason we picked a black background is the black background allow the poster, the art to really pop, right? So the, the product image, as you look at it on a black background, the product comes forward more. And it really, it stands out more. If this was on a white background, the product image wouldn't be so dominant as it is with the, with the dark background. I'm not a fan of cross merchandising on a product page often. Right. And I do it in this store. We do it. And I'll explain why. So on the other pages, all the, the four that we've talked about already, not one of them had cross merchandising on the product page.

None of that. You might also like kind of thing. I actually think that's usually lazy when people do that. Or there's just not thinking things through that. Well, so here, because this is artwork, you know, people are probably gonna be browsing all the different artwork options. Hey, I like bicycles. Let me see all the bicycles. I like Italian art. Let me see all the Italian art. So what we do on this product page is we actually show our product tags and each one of them is clickable. And it allows me to go off and see everything else with that same product tag. So this product happens to be tagged 1926 to 1950. That's the age it's tagged cycling and transportation, which are the categories it's under, it's tagged Italy, cuz that's the source country. It's also tagged line and back cause that's its restoration. Uh, it's tag oversized cuz it's super large.

So it's a size. And then it's also tagged stone lith graph, which is printing method. So for example, if someone was really interested in cycling and they were looking at this one cycling page or product, they could see that cycling link, click on that and then see all the other posters that are also cycling poster. There's a bunch of them to choose from. So it allows people to browse back and forth in this serendipitous way. Picking what information is the most important to them cycling Italy, its age, whatever. Whatever's the important thing you're looking at now. This one has a lot of product accordance and these have a lot of if vans. So I just mentioned the is the product is tagged stone lithograph. So it's got a stone lith graph accordion and this content is stored in a page and explains what is stone lith, lithography.

Um, hopefully I said that properly. So, and there's other ones for the linen backing, which is how it's restored. They've got a, uh, got questions, uh, accordion over. I mentioned how I really like the, you know, if you're gonna let your customer ask you questions and engage with them, let them know that. And authentic vintage posters actually publishes their phone number too, which is awesome for, for building trust. And we also talk in detail about the conditioning grading. Each product is graded for its condition. This one happens to be good, to very good. And that accordion explains what all the different, uh, levels of condition grading are. We also explain about vintage posters. If this was an antique print, there'd be, you know, a different copy up here. So our accordion has a whole bunch of if then statements looking at tags and product types and that kind of stuff.

And then we've got the shipping returns, which most stores have that at the bottom. I've got the judge, me customer reviews. The unique thing here is this product has a quantity of one. You'll need to notice that we took out the quantity box in the, uh, product form because there's only one of them to buy. So whoever buys this, if they leave a review, there's no other product to sell. Would that same review? Cause the product is now sold. So the decision we made for this store was to show all customer reviews on the product page. One reason we did that was as we started looking at the review content, the customers talked a lot about the service that this store provides, right? Package really well. This one says it right here. And a couple of others will say, you know, poster exactly described package well received promptly.

So there are many times talking about the quality of service, not just the product and that's relevant regardless of which product you're on. So that's why we made the decision to put all product reviews onto every product page. So people could get more feedback on the service. So let's move off of authentic vintage posters onto the game steward. This store here, um, spent a lot of time building out the experience, the brand, right? So you can see here in the store logo, there's like this little octopus, um, imagery, this kind of effect, right? And we carried that through on the product page. We have what, what we're calling the cloud header, right? Every product page starts with this full width of the content part of the page, this little cloud screen, Shaw looking thing that maps right into the theme, the color scheme of the site, and also has, you know, some game elements, you see a dice and, and a game piece in it and you scroll farther down.

We've got this background with the same look and feel, which is, you know, this ocean waves thing with game pieces in it also bringing the, the whole store experience together with these different elements that have a common theme to them. This header clouds and the water background on the tab in images, getting that to be responsive was important for us. Cause we wanted to look great on desktop, which what we're looking at it on. Now. We also wanted to look great on mobile. So we actually made two different images and we toggle between them with CSS. If you're on mobile, you see the, the smaller ones. And if you're on desktop, you see the larger one. Getting that to be responsive was important for us. The, these products are pre-ordered. So you're, if you buy this product, now you won't ship immediately because it's being manufactured by the game publisher.

And that might take months or sometimes even years, uh, depending on where that product is in its development cycle. So you can see here, we've changed the ad to cart button to be ad pre-order to carts. So we're very clear that this is a pre because we did this background element here. Tabs was more appropriate than accordions here. We couldn't have this, this background branding element if we had done accordions. So that's why we chose to do product tabs on this one and making those tabs responsive memory. I said before tabs don't work as well, or as easily as a better a way to say it. They don't work as easily on mobile to be responsive, but we spent a lot of time making those tabs responsive. So they lay out really well on desktop and mobile and here on the content about the product on that content tab, you can see they've got tons of information and this information comes from the, the game publisher and they've got hundreds and hundreds of games at any one time, their selling side of the store.

And they had to develop an entire process to get all this content from their publishers and into the Shopify store. Just like I, I mentioned with apex, we spent a lot of time figuring out what information we want, where we wanted to store it and how we're going to bring it from the database that's stored in outside of Shopify into Shopify. Same thing is true here. The, the store owners have have their whole data management system that built themselves and to bring all this content into the store, some other tabs that they have, let's go back up to the top here is they've got a categories, sort of like, you know, tags, just letting people, you know, browse and, and, and cross brows. Just like we talked about before with the, uh, authentic vintage posters got questions. This store is really well known with its customers for great, uh, customer service.

So they published their phone number first on their got questions thing. They actually answer their phone. If you read their product reviews, customers talk about how great the service was, how friendly the staff is, how knowledgeable it was. It's one of their differentiators. So that's why we've got the got questions tab. And we open that up with the phone number. They've also got an FAQ in the tab, shipping coming straight from their shipping policy, full money back guarantee coming from their policy. Remember I mentioned this as a pre-order here. So once again, sort of like we have with the authentic vintage posters, anybody who purchases this product is not gonna be able to review it to the product sold. They usually sell out all of their pre-orders before they ever ship. Therefore we're not using judge me for product reviews in this world. What they're using is Google reviews.

And what we're showing is we're showing all their Google reviews. So right now you can see they've got a 4.9 out of five with 1,193 reviews. We found an app that brought in the Google reviews information and put that onto the rating tab. Now their product seals, we went with their own custom built graphics for their product seals instead of my SVG solution. And these look, you know, absolutely beautiful and fit into their whole, you know, scheme really well. And what's really nice about these. If you click on this full money back guarantee, product seal, it takes you down and selects the full only back guarantee tab and takes you to that content. So clicking on the different product seals take you to the right element of the page, farther down the screen to see that information. This one here, this, this product is part of what we call a franchise.

So Batman is the franchise in this situation where there's multiple Batman games being sold by the game steward. So what we did is we built some custom code around this whole concept of franchises. And what we do is we say shop all Batman games here and we'll link people to the other games in the franchise. Because when we looked at the product of the store's been around for years, and we looked at the orders, you know, in their past history. And what we noticed was when people were buying more than one game in an order, usually those games were part of same franchise. So they might buy the base game and then an add on pack or an expansion pack or premium pieces or whatever. But usually when they were doing multiple purchases, in one order, they were part of the same franchise because that was the way the customers were purchasing.

We decided that's the way we're gonna merchandise in the store. So we added this cross merchandising within the franchise. We have logic built into our taxonomy where we can easily identify that a game is part of a franchise. This game's actual title is Batman colon. The dark night returns deluxe bundle, but it displays this Batman on one line and the dark night returns deluxe bundle on another line because in liquid we're, we're taking that colon and everything before the colon's the franchise and everything after the colon is the product name. So now we know this game is part of a franchise. And then we ask ourselves in liquid code, Hey, is there more than one product in that collection? The Batman franchise collection right now. And in this case here, the other two products are sold out. So we actually just take them and we take 'em to a collection page that shows the products that are available in that franchise up here, and the products that are not available in that franchise cause are sold out, down below.

And we do the same thing at the bottom of the page, the product page, where by scroll all the way down, um, I'm gonna click a tab. It's a shorter tab as we can get there quicker, you can see here's the cross franchise merchandise and cross selling by franchise says, see games in collection. There's a total of three games. There's one for the product page we're on. And then we show the two sold out ones down below here. Now, if this product was still available, you could click a on it and purchase it and add it to the cart. The same thing with this collection page that we have, let me actually show you one, cuz they work so well. I'm gonna go to another product. This one here, this product that I'm on notice there's no shop all link here because I looked up in what the liquid code is doing.

It's looking at Roman roll, which is the franchise. It looks for that collection and it doesn't see any other games in that collection. There's only one game in that collection. So that link doesn't show up here, this, uh, franchise. I don't know how to say that to Lulu has a ton of games in that franchise. So here, when I shop all to Lulu wars games, we take them to this quick buy functionality. So you can see there's 60 games available for sale from that franchise and down below there's 14 outta stock games. And what we can do on this page, cuz people like to buy more than one product at the same time from the same franchise. We now allow them to just say, I want this one, this one and this one without going in and out of product pages, because a quick order form, they can say, I want these three games, add those to the cart and then they're good to go.

And they just add it to the cart. Now those three products at the same time, get added to the cart for me. So that's uh, the game steward and our last, uh, product to talk about is with active men now active men, they make these healing patches and these patches are good for any soft tissue injury that you have like a bruise or a sprain, but that could be on your shoulder. That could be on your ankle. It could be, you know, on your knee, different body parts. And you could have different, you know, reasons that you got injured. You know, maybe you have tennis elbow or maybe you sprained your ankle or maybe you, you know, bruised yourself, you know, playing football, whatever the reasons other this one product can be used on multiple body parts for multiple types of injuries or sports. So we have this whole combination of content and value props to put together.

So what we did with active men is created a ton of content. You know, some of that content here, we have medical professional testimonials. Other content is professional testimonials. There's some infographics, there's lots of images. There's lots of text and value props. Hey, this has unique patented hydrogel healing patches, or you know, it's, it's natural, you know, and helps your body, you know, heal itself. You know, here's, here's information about the inventor. Here's information about, you know, how long it's gonna last get better sleep. So all these different value props, different, you know, images, videos, and that good stuff. And you can see here, we use the SVG product seal, uh, solution to come up with these different product seals. But what we did for this one is this store is selling one product for all these different uses and appeals to different people for different reasons.

So we built a series of landing pages. This is an actually the product page. Even you can buy the product on it. You can see up here in my URL, I'm on a page. We designed different pages for different target audiences. So this one is for someone who's hurt their shoulder. So here you can see someone playing tennis, cuz now they've healed their shoulder and they can play tennis. Again, everything we talk about, the imagery we show is about shoulders and the content talks about shoulders and is specific to people with shoulder injuries. What we did on another page is we focused on a different type of user. This person is someone who's hurt themselves running. So now we show people running, same product. Some of the messaging is the, but some of the messaging is different based on the injury type people with shoulder injuries, we talk to one way people with running injuries, we talk to another way.

And what you'll notice on these pages is, you know, the store has a very obvious, you know, black, white, and blue color scheme cause you're in the logo and these are all stock photography. Most of it's stock photo. Some of it's actually, uh, photo shoots they did. And what we do with the stock photography is to map to the brand like this wasn't a blue wall in the stock photo, but we in Photoshop made it a blue wall. So it fits in, not everybody's wearing, was wearing blue clothing in the beginning, but in Photoshop we turned it into blue, but it wasn't all the exact same blue. You don't want it to just be, you know, exactly the same blue cause that looks like it's too overt, right? So we, you know, have different tones of blue on different images to map everything together and then make it all whole, if we did this exact same page with the exact same photos, but not with the blue Photoshops in, it would not look as consistent.

And it's one of those when you see it side by side, you're like, wow, that is really, really powerful. And you'll notice here, we've got that blue background going on on this copy. We talked before on the claims page where sometimes you'll change the colors when you got really long pages of content to break things up and especially on mobile, make it clear what goes together and what does not, you know, we have a whole series of pages. I I think at like Lego, we, we created all this content Lego pieces with different value props, body parts and, and all that good stuff. And then we said, all right, we're gonna focus on this type of customer. We're gonna focus on this type of customer and this type of customer. And from this, we built out a whole series of landing pages that are basically product pages.

And we point through our Google ads and our social advertising to the different landing pages that are appropriate based on the mean we did for the customer on the ad platforms that we were using, they look beautiful and these pictures are so long. We actually added the cart form at the top and at the bottom. And I like putting the product seals, as you can see here, right? Every time we got an ad to cart button, I like putting the product seals near that. So we're reinforcing for people, right, right now they're thinking, do I really wanna buy this or not? So these product seals are a nice visual way to reinforce things like, Hey, this is natural ingredients. Maybe that's important to a given person or there's a money back guarantee or it's patented, right? So wanna reinforce the, you know, unique value prop for your, your customer that you've talked about elsewhere.

Uh, but it's just a visual last second. Hey, don't forget these. This is a really good thing to know about this product. Go ahead and add it to the cart. And we're just trying to establish more trust and give that customer more confidence in that purchase decision that they're trying to make right now. So that is, uh, seven, uh, product pages across seven stores. Hopefully this gives you a really good feel for the different types of content that you can put into your product pages and the different ways that you can put that, that content in, right. You've got, you're gonna have infographics. You're gonna have photos. You're gonna have videos. You're gonna have copy. You're gonna bullet points, all sorts of things. And you know, there's no one way, there's no recipe for this. Hopefully, as I explained in these different products, you, the reasons we did certain things, you realize your product pages needed to be bespoke to your business, to your customers and to the content that you have available for your products. Hopefully you enjoy watching all that.

Thanks for listening. Thanks for watching.

JadePuma is a certified Shopify Expert. If you need any help with your Shopify store, we can help.

Learn More Get Started

Search