Badgezilla

Flex Theme Sections

Checkout Toolbox

Linear Shopping Experiences

Brand-It! Calendar

Episode 84 - More 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 can 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 five 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 and how we made some decisions and all that good stuff just to illustrate for you. How you can put a lot of content onto your product pages.

I did a similar episode to this one in the past, in episode 70, I'm redoing it again for two reasons. First is that it's a very important topic. Bears repeating. Second is that the stores that I showed in the previous episode were all pre online store. 2.0 now with online store 2.0 and the improvements to meta fields, making rich content pages is even easier. Now I'm gonna be doing this for the podcast with audio. So I'll be explaining for you what is on the product pages. I'm also gonna be filming this while I do it. So if you wanna, so if you were currently listening to the podcast and would prefer to watch me demonstrate those product pages, then find the link in to the video in the show notes. Now let me introduce to you the five stores that we're reviewing today. The first one is rhino power.
Rhino power is out of San Diego, California, and they are a sports nutrition supplement company. Second is spiral light candles. They're out of Wisconsin and they create this very unique candle that actually has this spirally burning wick. The third one is fit my foot outta Seattle Washington, and they make 3d printed custom insoles for your shoes. The fourth is nut wizard outta Indiana, and they sell a device called the nut wizard that helps you pick nuts up off of the ground with this long handle and basket mechanism that they have. And lastly, we have electric bike central outta San Diego, California. They're a local bike shop that is focused on electric bicycles. So let's look at each one of them's example of a product page, the first one rhino power, and this product page here is for their supplement for protein. And you can see, you know, this page is really long as I scroll through. There's lots and lots of content up there. So let's walk through each piece of the content, starting with the product carousel and the product form at the top. Now, one thing I did with this store is on their judgment reviews, I used judgment.me reviews in most of the stores that I build out in this one, I actually made custom stars. So rhino power their, their mascot is obviously a rhinos, right? So they have this rhino head in their brand and a lot of things. So I just took that rhino head and I made a little SVG file out of it and turned it into a P and G file. And I was able through CSS to edit the judge me code to show the rhino head instead of the review stars. So on this product here with 107 reviews, and it's a five star, it's actually, it's a five rhino 107 reviews. Now I only use that rhino head in this one element up here. I didn't use it at the bottom of the page. When we showed the rest of the reviews, I used stars there and other page, I used stars.

I didn't wanna like inundate the rhino head, every single place, but I did wanna put it in a couple, couple points and this product is also a subscription product. So in all the products in the store, all the supplement products in the store, you have the option to buy it one time or to subscribe. So it's got the recharge subscription widget right there in the product form. Now this product has a couple of variants. You can choose what flavor you want, chocolate or vanilla, and you can also choose the package size, how many servings you get 20 or 40, and this all, all the stores I'm gonna be showing you with the exception of the last one, use the flex theme. And in this one here, the, the default with the flex theme, when you select a variant is all it does is it highlights the outside line.
So it makes the line darker. And I think the text's darker also. And I like to make it really prominent and obvious to the customer. What is the currently selected variant? So you can see here, I've got this, you know, their brand color when their brand color is, is yellow. So every time you select a variant, it changes the background from white to yellow. So it's very obvious which variants are currently selected. We have product seals in this, this is using SVG files that I've created a whole library of them. And because they're SVG files, it's easy to edit the colors of these. And I actually have in the theme customization, let me actually show it to you cuz it's kind of fun. Let's go into this store's theme customization and I have a theme setting over here called Jade Puma elements where I put all my custom code in there and you can see the first five of them are the colors for the product seals. So lemme just in here go to a page with products. So you can see it in real time and go back to that Jade Puma settings element.

You can see the product seals here below the product form. This one, I have white backgrounds, but if I wanted to change the background color, I could just select it and say, oh, let's go really bright red. Right? And it's gonna be a very different look and feel. So because these seals are made with SVG files and SVGs can be controlled by CSS. I'm able in liquid to create this control element. You can also see, I can change the outline right now. It's a circle outline. I'm gonna change it to a scalloped outline once to give it more of a wavy outside line effect. I can also change the size or I can change, you know, the, the spacing between them. Cuz these are all just CSS elements. So with this element that I've built right with sections anywhere in online store 2.0, it's really easy for me to add this into any store you can see over here on the, on the left hand side of theme, customization in the product, I've even made a block for product seals.

So I can add the product seals right into the product form and move it up and down. Right? in the past, what I do is previous online store 2.0, I'd have to hard code it in where it showed up in the product form. But now the store staff could say, well, I want my product seals to be higher up or lower down. Inside of that product form, however they want to do it. And you know, once again, they can also change the coloring and try different color schemes out to see what works and what doesn't work for them.

So back to our, our product page on the front end for customers, then we have a, a long content description, right? This is, you know, copy that was written by the store staff to explain the product. And then what we have is a couple of graphics. And the first one is the quick, quick reference guide. So they have a whole series of supplements at this company that are meant to work together. You use some before your workout, some during your workout and others, after your workout and different combinations of them based on the type of exercise and the level of performance you're looking at getting. So here in this chart, they're explaining that to customers and showing you, Hey, you're looking at protein right now and you know, use this during and after, but you don't use it before. Here's, here's the products that it works with and all that stuff.
So this quick reference guide is a really good way for people, customers to understand where this one product fits into the overall scheme of the nutrition program brought to you by rhino power. And then we have another lace graphic here. And this is just a simple little HTML element that I built. I'll I'll show it to you here in the back end in a second. What this one does is it just says that, Hey, you know, we ship really quickly and they actually do, if you order before 3:00 PM Pacific time, your order goes out the same day. And these guys do tons of orders per day. And're shipping constantly. But you know, that's a nice reminder to customers that, Hey, you know, we're not gonna sit on this order for three weeks. We're gonna send this out immediately. They just put that front and center on the product page. Now, if we go into theme customization, right, for that product or for any of the products, you'll see what I have down here. Not to find out where it is here.

I think it's this custom liquid one here. Yeah. So with sections anywhere, right? There's sections that you can add, you know, like a gallery section or an image with text overlay, anything that your theme gives you, you can add as a section, which is really nice. You can also make your own sections. And I do that in different places. And we'll, I'll show you one here in a second. Like this step model is a, is a custom one that I made. But you can also just add custom liquid in or custom HTML. And I've ended up using those a lot more than I used to. For example, on this first custom liquid one, it's just the product description, right? If, if you look at the code for that, it, it just says, you know, squiggly bracket, squiggly bracket, which is how in liquid we say, I wanna look at this variable and it's product dot description, right?

This theme by default likes the product description up in the product form, which is, you know, over where the variants are selected. And I don't like putting a product description there because that half of the page, cuz the way this, you know, template is you got the product carousel, the images on one half and the product form on the other half. If I had added this half with product description under the form, it go much, much longer. I like my product description being more full with on the page. So this theme didn't allow for that, you know, inside of its code, but it does allow me the option to just say, well, give me an exception put in a piece of custom liquid and just put in product description as the liquid variable. And then you can put that anywhere that you want to on the page and you can move it up and down.

Now the other custom liquid one I was showing you here was this one for the, you know, all loader ship, same day until 3:00 PM on, on Pacific time. And that custom liquid, I just made a snippet inside of the code called shipping dash promo because to make a sections a little more work than to make a snippet cuz sections have settings and, and a lot more parameters around them. So it's easier for me to just make a simple snippet. And then that snippet is the HTML code that I can go and edit. That'll show the image and the text that shows up there.

And then on the product page on the customer facing side, if I keep going down the page, now we got the supplemental facts, you know, it's cause these are nutritional products. You have to show the nutritional, you know, packaging. So we show that for the two different versions, the vanilla and chocolate of the product. And then, you know, we have this gallery here of lifestyle photos. So you and they Ryan know, does a great job in working with athletes and they sponsor athletes and they use those athletes in their marketing. And that's what you can see here. These are actually, you know, professional athletes in, in the motocros world and, you know, actually showing, you know, showing the product and use and, and wearing the branded gear and all that good stuff. And then in rhino power here, because each of the products was very different in what content I had about them.

For example, and some products only had one supplemental fact cuz they didn't have different flavors. Some had lifestyle photos, some didn't. So what I did is I made a different template for each of the products. So if we go back, let's go here and I'm gonna open up the product in the admin on the back end and just show you that for this product named protein, that the template for the product is also named protein, right? So, and you can, as I pull down the menu for all different templates, there's one for just about every single product name in this store, cuz all the content was so unique and different. We had different types of images and different types of assets for each one. Each, each product got its own template, continuing down the page. This is one of my favorite sections and this is a custom section that I've built now.

And because I use the flex theme for most of my projects, it's easy for me to just take this section that I built for one store and add it to any other store that I'm working on. And what this template does is it shows. And if, if you listen to me a lot, you know, you know that I'm not a fan of merchandising, other products on a product page. I, I believe that we should be helping our customers make decisions along the decision making process of their shopping experience so that when they get to a product page, they should have confidence and we should have confidence that they wanna be on that page. And we shouldn't be, you know, if they're on a page with socks, we shouldn't be selling them hats at the same time we can do that later. Right? You heard my concept before of linear shopping experiences where maybe people who buy socks also buy hats will take that as a separate step, but don't do it on the same page.

Now that said in the previous episode that I showed you of this, I showed you some cross merchandising that I think made logical sense. And, and here's a, another one that I've started doing in the past few months that, that I like a lot. And that is what we're doing on this product page is we're also showing the products that exist in the store that are different in this product, but contain this product. So because rhino power has these nutritional programs, they have lots of bundled packages, which include this product protein and other products that work well with it for different types of goals. So what we're doing on this element is we're showing all bundles that include the protein powder in the bundle. So we're on the protein powder product page. And you know, one of the things we're saying is, and if you like this product, here's the bundles that included this to me is a much better way to cross merchandise than, you know, just showing random, you know, popular products on a product page.

And the way that this theme section works is what I had to do first is I had to create a collection for this product. And that collection is basically got the same handle as the product handle. And I added at the end of that, you know, handle name dash bundles. So the definition for that collection is any, any product who is tagged with the product name. So if we looked at the gold medal powder package and we opened up that product, I'm gonna go here, open it up in the back end, you'll see that it has the tag for protein, which is the name of the product we were just on. So it is tagged protein and because it's tagged protein, you can see here, it's also in the collection of protein premium wave powder bundles. So what the logic on this product page is doing this element that we have for finding the bundles is the first thing it does.

It looks to see if the collection exists. That is the same handle as the product with a little dash bundles at the end of it. So the collection is, has dash bundles in the handle in addition to what the product's handle is. And then if that collection exists, it looks to see if any products in that collection are available. Cuz I could have made the collection, but tag no products appropriately or the products are outta stock or something like that. So if any products in that collection are available, then we show this whole section and show the, all the products that are in that collection. And then we have an accordion here on the product page below this cross merchandising. And the first element is how it's made, which talks about the production and the quality that goes into. And he says a lot of content there, the quality that goes into the production process and the science behind all these products.

And we even put a video in there with one of the founders talking about his philosophy on these things. And we also show the shipping policy cuz it's really important to people and also the return policy. And then below that, we end out the content on this page with reviews. And you can see this, product's had 107 reviews already. These guys are selling lots and what's really fascinating with, with this one is because these guys are targeting athletes and they sponsor these professional athletes. There's this whole community building that goes on of everybody trying to show off the, you know, what they're doing in their sports. So their review photos have quickly turned into, you know, they're not showing products in the review photos, although this one here, for example, right, this person' showing the protein product and the review photo, but the review photos are becoming the customers bragging or showing off about their sports.
So here we've got a guy, I racing a motorcycle really fast. You going around a corner with his knee, touching the ground. It's just like, that's an awesome looking photo has, you know, it's, it's, there's no product in it. It's just the customer showing off his skill which is part of their community, right? These guys are totally targeting sports enthusiast, especially in the motocros space and bicycles, mountain biking, BMX and triathlon. So it's really fun to see how their customers are embracing that and starting to add their sports photos inside of the photos for the reviews. And we really push this. We actually in judged me, you can, after somebody leaves a positive review, you can send another email and say, Hey, you know, glad you left this positive review. Thanks a lot. Do you want to add a photo to your review?

And it's been fun watching all the customers start adding more and more of their photos and it just, it builds to the community and the sense of, you know, the people that are buying this product are actually matching to the marketing of this product. So that's, that's really nice to see. So that's rhino power, a lot of content on this product page. They have lots of products and each one of them is as rich and deep as this. So now let's move on to spiral light candles. And this one's really fun because on the the page above this, the candles page, you'll notice we have, I think it's like 28 different SCS or something like that, of the candle. But each of these candle pages is a little bit different, but in this case, what we did is each one uses the same template.

And now we're using the new functionality that exists with meta fields and pin meta fields and meta field definitions to have one template that's very different or slightly different for each of these 28 different SCS of candles. Right? So what we're doing here is the customer's picking the scent they want for their candle at the top level at the, the candles here. And once they pick that, let's just go into evergreen for a second. You'll see that, you know, the, the evergreen candles are obviously green. And if we scroll down, the coloring of the elements is also green on this page. So if we go back to the P and E, which is a pink colored candle, the elements on this page are pink in color. So we're changing the colors and the elements of the page to map to the color of the product.
And it really, I think it does a really good job in bringing things together and making it seem much more authentic to each product's page that, you know, we have the same instruction here. That's, you know, four steps on, you know, how to use your candle. We have this little infographic that explains it, but we have 28 different versions of it for 28 different color schemes. And I, I just think that makes it look much more authentic. And, and that, that level of detail, I think customers, you know, sense if not consciously, at least subconsciously and really drives that quality home to, to them. So on this product page, you know, if I select one of the variants, we have that, you know, bright color differentiation in the background, like I was talking about on rhino power, we also have the judgment reviews.

And then we you know, do a little product description. Now this one, the product description's really short, it just talks about the three different sizes of the products, the actual dimensions. So I kept that one inside of the product form, but in this one, we put the product seals centered underneath the page instead of underneath the product form, just to balance things out a little bit. And you'll notice here that the height of the form is, is much, you know, it's about the same height of the product photos and they match really well. Now this scent description box, this is driven by a couple different meta fields. So let's go into the product page on the back end and scroll down to the pin meta fields. And there's a few of different meta fields on here. The first one you'll see is the color code.

So for each of the color, each of the senses we de define what color is the primary color for that element? So this color code here is, is in the theme customizations. We put this background color matches the meta field. So the meta field defines what color that background's gonna be. So on a pink candle, we Def, we give that meta field, a pink color, and it shows up pink background on that evergreen one, a green candle. It showed a green background. So that's how we're with one template driving different colors is we're making those colors, meta fields. And then we also have, you know, this, the scent description, floral notes and strong scents. So there's four different notes, which we show under the SC guide that these candles fall in there's floral, Woody, exotic and fresh. So that is another meta fields.

So we go back to our meta fields. You can see our note. This one is floral, and you can have more than one note cuz now with meta fields, you can put more than one item in a single meta field. As you can see here, it says in the meta field definition on the product page, it says one item you could actually say, well, this one's floral and it's Woody. And then we would show the floral and the Woody product seal for that. But this one's floral. So the meta fields is floral and that's why we show a floral product seal in our scent description box. And then we also have another meta field for is the scent strong or, or, or subtle. And this one happens to be strong. So that's that meta field is driving the strong scent. And then we also have these images I talked about before. One of them, the the instructions one, we also one a little bit farther down, which is the burn times. Both of these images are, you know, color specific to the candle. So what we did is we loaded up, we made 28 of them for all different colors, loaded them up into the files section of the Shopify store. And then we used meta field. So here's the image for the burn time and that's just a file specification. And here's the one for the instructions. So those are two separate meta fields that we use.
And then on this page, we also put a video because the concept of spiral light candles can be confusing to people because they are unique and they're patented and there's the only place you can get them. So here in this video, we show you, well, if you light the candle up, it burns around the circumference of the candle in this spiral mode for a while. It's like half the half the height of the candle. And then that fills in the center and then you can light the center WoodWick up and get in even longer burn time off the candle. So because the concept of a spiral light candle is hard to explain. It's much easier to show we put in this time lapse video of the, the candle burn. So people can more easily understand what it is that we're talking about. When we say it's a spiral and then just like in rhino power, right?

That same section that I built for rhino, I reused inside of spiral like handles. And this one shows the bundles that include the P and E product. In this case, there's a build your box functionality. And there's also this floral ensemble of three different scents that both include the P and E candle. So if you wanna like buy more candles than just this one, but you like this scent, here's the bundles that include it. And then we end with the the judgment reviews using, you know, some color schemes from the theme and a shipping and returns accordion at the bottom of the page. And those are pulling straight from the shipping and returns policies that are in the settings of the Shopify store so that the store staff has to write that content once. And it shows up in multiple places in the shopping experience.

So that is spiral light candles. Let's move on to fit my foot. They sell these 3d printed custom orthotics for your feet or insoles for your shoes. And you actually use an app on your phone and take photos of your feet and they can build their 3d model from your photos that you took. And they, they give you instructions. You're like, all right, stand against a wall, put a white sheet of paper underneath your foot and all this other stuff. And you walk through this process, you take like four or five different photos and they build these custom orthotics based on your feet. And the really cool thing about it is they do your right foot and your left foot different because a lot of people actually have different dimensions for their two different feet. So on this page here we have the, at the top, you know, the, the customer reviews, there's 217 reviews and judge me for this product.
So these guys are selling lots and lots of these. They've also because the average order size for these, you know, the insole started $99. They also have some sandals, many people order more than one cause they have more than one pair of shoes. So they also show, shop, pay up there so people can do payments and we've got the, you know, the bright color, you know, background change going on when they select their variance. And one of the things we did in this store and, you know, I was working with their graphics guy, Carlos and I had never done this before. And I was super, I was like at first, like, does that make sense? And I actually love it. Right? So what we did is he, he defined the the colors for the brand. They already had some brand guidelines and came up with, you know, the buttons have this, you know what I call pill effect, right?
They're, they're all the way rounded on the sides, but for the add to cart, they define the buttons to be square. So we use the pills for the variance and, and other buttons throughout the experience. But the add to cart buttons are square and they also have different colors. So it just makes 'em stand out a little bit more. I'd never done it before. And when, you know, Carlos gave me that direction, I was like, oh, I like that. That's that's really good. We also use the, the product seals that I talked about before, these are the SVG based ones. So inside of the theme, we can adjust the colors of these. Now we had a bunch of, you know, copy and you'll see that in a, in a few different places on this page. And we also had a lot of imagery.

So you know, this, this brand and these products have been around for a while. So they got lots of content to use. And here you can see, we just did this quick little gallery in the middle of the product page. So a lot of people put all their photos for their product inside of the product carousel in these long pages. What I like to do is put all the photos outside of that, except for the ones you need that represent the choices you're making. So for example, here's full length. Here's the three quarter. So as I change my variance in the product form, I see my product photo matching that. So I actually like people not scrolling through the whole carousel, cuz there's like 50 different photos. I like that to more represent the product choices they're making and then use the rest of the content on the page.

So here we have this gallery of six different photos and you can expand any one of those and go full screen and scroll through them, which just show you different views of the product and a little, you know, text in there to explain the value prop that we're highlighting in this photo. So like I said, I'm, I'm a big fan of, you know, spreading your photos out on your page and not just putting them in a carousel. And you know, if you think about the world of Instagram, you know, and we're looking at this on a desktop, but you know, most customers are gonna be looking at things on mobile phones and especially what Instagram has taught us and other apps is to scroll forever. Right? Very rarely do we, you know, scroll left and right on, on these apps. Although some of them do that, right?
If you're looking at one post with five photos, you're gonna scroll through the five photos. But as you're looking through multiple posts, you're scrolling up and down so long pages and infinite scroll is kind of a concept that most customers are comfortable with on their phones, cuz their apps do it with them all the time. So I'm not afraid of having a long product page and having these photos here, you know, stack up on mobile because customers are very used to that experience also. And as we keep scrolling down this page, now we've got some, some graphic showing the, you know, the results, you know, people that buy these, you know, report 72% have improved stability, you know, 80% have reduced pay. And you notice what we're doing here is we have images and we have text saying the same thing, right? Because different people are gonna be drawn to different types of content as they're browsing through things.
Some people read every word, some people are skimmers and some people just look for graphics or for video. So I like giving as much content and as many different formats as possible so that whatever method is the one that a, a given customer uses, then they can find that content, they have another graphic that just compares traditional insert versus the fit my foot. And you can, you know, easily see that one is formed to one's foot and one is not. And then we have a long list of an accordion content of text of benefits. And in the flex theme, the there's an accordion functionality that comes with, which is really nice, but it doesn't allow for good rich text capabilities like this, this bulleted list here. You couldn't do bullets like that using HTML. So I, I built an additional accordion one that allows different types of content inside of the accordion.

So you can add a photo, you can add rich text or you can add a video even. So I'm, I'm using the, the rich text capability on this one to format this content a little bit better than just generic text. And then we have a video that shows the manufacturing process for these people can watch, if they're interested in seeing that we've got the judge meet customer reviews, lots of reviews for this product. And then we have the, the standard accordion from Shopify with the shipping and the returns policy in them sorry, the standard accordion from the flex theme. So that has fit my foot. Let's move on to nut wizard. So this is a device that it comes to the long pole, right? And if you have nuts on the ground, the product will pick the nuts up and put them into this little basket for you instead of you, you know, bending over or being on your hands and knees and picking up thousands and thousands of nuts.

And they've actually got, you know, videos and photos shown like a truck full of nuts. You could imagine how long that would take if you're doing that by hand. But this product allows you to just, you know, go back and forth with this basket and pick the nuts up off the ground more easily. And the nut wizard comes in a whole bunch of different sizes because the way the basket is structured and the, and the wire cage on each of these baskets, the SPAC between the wires is gonna allow different nuts to, you know, get sucked up into it. And other ones just fall out of it. Right? So you can imagine the nut wizard let's go to the extra LAR, let's go to the top page here. So here's the extra small basket and here's the extra large basket, right? Small acorns would just fall out of the extra large basket.

So this one's like meant for pine cones and apples and things like that. So on each one of these, what we're doing on the product page is we've got the standard product form. We're showing the judgment reviews. We've got the brightly colored variant differences showing up. We've got the product seals. This one's showing a lot more color than we have on the other ones, cuz this the store, we, we did a lot with color on this one because the products were, you know, very generic product photos and they're all the same. So we use color a little bit more. We got a nice little product description and then we show a video that people can understand, you know, what, what is a nut wizard? How does it work? And then we go through this little graphical thing of what it works with. So each nut wizard page that you go to.

So for this one, because these images, so this section here is different for each one of the nut wizards and some will have a different number of photos. So we couldn't do this with meta fields. We had to do this with a unique section for each one. So therefore we made a unique template for each one of these products in the, in the nut wizard experience here. But you can see we, we found images that show what it picks up. And then we compared, you know, the small one, this is the one we're on right now, small. And we showed all the other nut wizards on the same page, cuz the hardest decision for the customer, you know, once they decide they want a nut wizard is, well, what size do I need? And actually, you know, many customers buy two different sizes cause they have different types of nuts in their backyard with multiple trees.

So we spend a lot of time explaining to them, the small works with these nuts and here's, you know, the breakdown of the other sizes and what they pick up and we even show a table with. So we we're showing the same thing three times because different people are gonna absorb the content in different ways. We've got it as a photo, we've got it as an infographic and we've got it as a data table. And then right in the middle of that, you know, we say, Hey, if you're not short sized to get, give us a call, right? We've been published a phone number. So we know that that decision is hard for customers to make. We give them a bunch of content, a bunch of different ways so they can make that decision. And then we give them the option to, well, I still don't know what one I want and give 'em the phone number to give a call, right?

And then we also have an instruction manual, a download that they can click on and download it and, and, and learn more about the products and then the full judgment reviews. And then the accordion with the shipping and return information. You know, you'll notice a, a lot of my product pages have the same basic layout. And then what I do is I look at what content we have about those products and what is the decision making process for these products or, or what should the decision making process be? What information do we need to bring forth to the customers? And then we, you know, customize the product page based on all of those things. So now we're gonna move into the last of our five and that is electric bike central. So electric bike central is a local bike shop. So they're selling here in the local San Diego area and they're not, you know, manufacturing their own bikes.

They're reselling a bunch of different bike models, right? So they, they have bikes from gazelle Magnum, specialized drama, urban arrow, and more. So what we did is we went out to each of the bike manufacturer's websites and we got all the content we could about each of the products. So each of the product pages, so every brand and every product has its own unique product page template because there's all this different content. And each, each manufacturer provided different amounts and each individual bike had different amounts of content. But this stronger S T three is a great example of how much content the manufacturer provided on their website. And, you know, because they're an authorized reseller they're allowed to, you know, get that content right off the website. We didn't have any portal we got to log into. We just literally right, right. Clicking on images on their, their, their website and, and downloading them and reusing them.

You'll see lots and lots of information. And also, you know, if you've ever been to a local bike shop, they don't have every bike in every color, in every size, right? So availability is super, super important. And they use a point of sale system. I believe it's called light speed. That is where most of their sales happen is in the store. Obviously, cuz you gotta come to the store, try your bikes out. They've gotta assemble them for you. So most of their sales were happening in the store and the website was outta date on its availability information. The light speed, their point of sale system was the record of what the availability was. So we found a third party app that connected the light speed to electric bike central. So now what they can show on their website is their in-store availability, which has been really important for them.

We even built a collection of just in stock bikes. So if you're thinking about going down electric bike central and buying electric bike this weekend, here's the ones that are available in stock today kind of thing. So on the product page, we're also showing what the availability, you know, how many what's the quantity that they have, what sizes they have in stock. And that's really important information that's being synchronized from their light speed point of sale. We got the same product seals. Now you'll notice in every store that we've been on, how different the product seals look, they're all made with that same SVG architecture. And I, I have a library literally of hundreds and hundreds of these product seals. Now every store that I build, I reuse some of the product seals that I have and then, you know, I'll make new ones based on their needs and that just increases my library.

And they're all built with the same infrastructure that allows me to change all the colors out with CSS classes and that kind of stuff. So I'm able to reuse all of them, fit them into this, you know, architecture that I've built out. But you'll notice that each one we go to the seals don't look like they're all from the same source because we can vary the color. We can vary the spacing, we can vary the size, we can vary the outline. So each one looks very different and more authentic to the store that they're in. Instead of looking like some third party app that got thrown in on top of something. And that's why I, I built that, that structure that way, that allows me to customize them deeply for each store's experience. So this one has, you know, some nice, less product seals on it.

Also stronger in this case gave us a nice video, which is the, the 360 rotating video on their bike. So we, we put that in there. They also had lots of imagery. So we used, you know, tons and tons of photos on, on right here. You can see a bar of four different views, these black backgrounds and then, you know, they had different value props. They're explaining. We figured out what the value props were, the differences between the bikes, what photo highlighted that value prop and, and built a little, you know, text with image assortment of 'em. They had another video we threw in and then they talk about their app. There was, you know, documents to download with technical data and spec sheets. And then we had a whole bunch of other photos that we just built into a gallery that people can scroll through and just see the bikes in use even more so tons and tons of content.

And then we also built out a page for each of the manufacturers. So, you know, the code in this accordion here is basically look up the manufacturer, the vendor, the product dot vendor. And if there's a page with the same handle as a product dot vendor, then show it here. So if you're on the specialized a bike, you know, with the vendor specialized, it would say about specialized and pull the content in from the specialized page. This one's pulling the content in from the stronger page. So we're able to write this page one time about the manufacturer, but use it on every product that is made by that manufacturer. And then at same accordion, we've got the shipping policy and the return policy. So that is five different content, rich product pages for five different companies,
All using online store 2.0 with, you know, sections anywhere. Some of them are using meta fields. Some we have different templates for each of the product pages, but that allows us to give these really long, deep content pages to help customers make an educated decision about that product. I hope walking through these helped you understand what you can do in enriching your product pages.

Thanks for listening. Thanks for watching.


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


Search