The Podcast
Uneditted Video
Show Links
- Authentic Vintage Posters - https://www.authenticvintageposters.com
- Ryno Power - https://rynopower.com
- The Game Steward - https://www.thegamesteward.com
- Mulberry Park Silks - https://mulberryparksilks.com
- Sugar Feather - https://sugarfeather.com
- Animal House Fitness - https://animalhousefitness.com
- Spiral Light Candles - https://www.spirallightcandles.com
Help the Podcast
Transcript
Hey, Scott Austin here.
In this episode, I'm gonna show you examples of when I've added functionality to a store without using an app. Instead, all the things that I'm gonna show you were done by editing the theme. So let's start off with my explaining a little bit about apps in your Shopify store. In general, apps are great. Every store is gonna be running several apps to add functionality and enhance the shopping experience. And the Shopify app store has many, many apps. You can find an app for just about anything, but for some site enhancement, an app is not the only solution. Another alternative could be editing the theme and adding the functionality there. Now, the huge difference between an app and a theme edit is that an app can call the API, which is a technical way of saying interface of another server outside of the Shopify ecosystem.
And this is an important, and this is important for complex tools like email, where you need to store all the customer data gathered somewhere. So there are many instances where you'll have to go with an app for a solution. Things like email shipping rules, reviews, loyalty, and many more complex services need to be done via an app, but not every improvement is that complex. We can forgo an app. If these requirements are met one, no need to access external servers, two, the improvement is on the front end or the layout of the website. In other words, if the code can be contained in the theme. So why would you wanna skip an app and add the customization to your theme? Well, the biggest reason that I see is when a store's needs are not bet by an app, most store owners have had the experience of finding what they think is the perfect app.
Only to later find out that it doesn't support a key feature needed for your business. It's very hard for an app to cover every single possible scenario. When your needs exceed in app's flexibility, then you might want to add the functionality to the theme. Also many apps have a specific way of doing things. For example, I was installing an app into a client's store the other day, and the customer dashboard is only available in a popup or model, and that doesn't fit in well with the customer experience of the rest of the store. All the other dashboards and interfaces were presented in pages. So a store may opt to add functionality to the theme, to keep the customer experience consistent and support the brand.
But adding functionality to a theme is gonna take some technical knowledge. The minimum requirement is someone that is versed in HTML, CSS, and liquid. Additionally, any functionality that requires customer interactivity on the page is gonna require JavaScript. So if your store doesn't have an in-house web developer, then you'll need to find one. There are plenty of Shopify experts out there that can help you with this, including of course, Jade Puma. Let's shift gears now to showing you functionality that I've added to my client stores by adding code to the theme. For those that are more visual, I'll include a link to the video in the show notes, let's dive in the first customer here is authentic vintage posters. And just like their name says, they sell really old posters. So on the product page, there's a couple enhancements that we made to the theme. The first one is these product seals. I've got some SVG files that I use for product seals, and that allows me to change the color of them using CSS, which I can do in theme settings. So lemme show you how that works
Here. I am in the back end on theme customization, and I can see the product seals right here and over under theme settings, I've added some functionality under a bucket called Jade Puma elements, and I have color selectors there for the different colors of these product seals and also a couple other settings. So for example, I could say, I want the highlight color, which right now are the primary color, which a text is in is in white. Let's say I wanted to make that red. I can select the color selector. And in one click, it's now red across the entire site. I also have the ability to have these outlines so I can change the shape and look and feel of the product seal. So they don't look like other stores, right? The whole goal here is to make the product seals fit into the brand of the given store. So if I wanted to, right now, I have the background color set to the same background color as the store, which gives these, you know, a cleaner look and feel. But if I change that to a different color, I'm just gonna pick a random blue. You can see now that I've got this scallop background on my product seals, and I can change that outline to be just a regular circle or I could also change it to be a Starburst.
And I can also change the size of the product seals on desktop and separate setting for on mobile and also the spacing between them. So with this functionality, I can change these product seals to map to the exact brand of this store. And what's nice is I've built this code in a way that makes it reusable for me, and I can use it in other client stores and then customize it for them also. So I have one library of product seals that I keep adding to as customers come up with new product seals that I didn't have before. And then I add the code in and through these different settings and theme settings, I can make each one unique to that. Store's brand. Another thing we did on the product page in is the tags are clickable and link off to a filter. You, you can see all the whole collection of the catalog filtered by that tag.
Usually in a store, I'm not a fan of clicking off of the product page to other products, but here in authentic vintage posters where there's hundreds and thousands of posters that people are browsing through. And each one is very unique. We want more of that serendipity of the browse experience. Therefore we added the, you may also like element, but we've got this custom code here and you can see as I, you know, hover over any one of the tags, I can see it highlighted. And that tells me that I can click on it. And if I click on Italy, it'll take me to all of the posters that are from Italy in this store. And if I click on any one of those, I can see all the other tags that apply to it. So let's say I'm looking for things from 1950 to 1959. I can click on that year grouping. And there I am looking at all the things from the fifties in this store.
One last customization we did for this store is we promoted free shipping within the theme and not in an app. So up here in the top bar, this is the flex theme, which is a top bar element. I've added a control. So if we go back to the Shopify admin and look under that Jade Puma section, I've got some settings for free shipping, a checkbox that turns it on or off, whether we should it or not. And a slider for what the dollar amount is. Now, we didn't choose to count down on that top bar element. And it just says free shipping on USA orders over two 50. So if you add a hundred dollars item to the cart, it doesn't say only $150 to free shipping. We've seen some research that shows that countdowns on free shipping can make the brands seem a little more carnival like and a little less high quality.
So we were going for the high quality approach, let's say the Nordstrom type of approach. We don't count down the free shipping, but we do do is if you do add a product that exceeds the free shipping and that threshold is set in our settings, right. I just added a $1,900 product in my cart, which is over the $250 threshold. And now I've got a promotion in the cart that says this order has free USA shipping. So we've added the ability to promote and then reinforce in the cart when they've exceeded that threshold, the free shipping by just editing the theme, let's move on that next door rhino power, a rhino power. I've got a bunch of customizations in. And the first one is the product seals, which we talked about before in authentic. So let's just show you what those look like, cuz they look completely different here.
So on this one here, you know, the, the brand colors are black, white, and yellow. We went very black, white, and yellow with the product seals. So it's very authentic to this brand a little less background in these. And so they just, you know, pop a little bit more. And the nice thing is cuz this SVG files and I can edit that through CSS. And I was doing that through the seam settings before I can also override that. So on the homepage, we decided to put the product seals up with a black background instead of a white background. And then just a couple lines of CSS. We changed the black text to white text. So it was super easy to show it one way on the product page and then an inverse on the homepage.
Another thing we've done in rhino power is done a cart upsell. So let's go to the cart. I've already got a product in there. And our upsell is I, I consider this like an impulse purchase, you know, the, the end cap on the checkout aisle. So this is a factory iron logo, two pack. It's only $6 and most people are coming to the store and they're buying the nutritional products, the, the supplements for their, their athletic performance. So what we decided to do in the impulse items, the upsells in the cart is have brand items. So people aren't probably shopping for the brand elements because they're looking for the supplements. But if we promote them in the cart, what we've found is people actually like them. And then this becomes a brand play an influencer play where now the, the customer's buying this factory iron on logo for only $6 and they apply it to their Jersey or whatever, you know, in their, their athletic performance. And now they're representing the brand. And the nice thing about this is we've stacked up a couple different promotions. So the first one is for the factory iron logo. If I add that to the cart,
I now see that's in the cart and the promotion moves onto the next item, which is the factory sticker kit. Once again, this is a brand element promoting rhino power across the, across the ecosystem. So if I add that to the cart, it shows in the cart and now that's all we've got is two items stacked up inside of the cart promotions. And this just like we were showing you an authentic, what I've done in rhino power is I've got a setting in the back end when I go to theme customization under theme settings for Jade Puma elements. So in my Jade Puma elements, oh, sorry, wrong, wrong one on this one. So this is a online store, 2.0 theme. So I was actually able to make that a section inside of Shopify cart, simple cross sell section, and all the settings are held within that section.
Sometimes I've gotta put settings inside of theme settings under Jade Puma elements. And that's when I'm gonna use those settings in more than one place. Right. We saw that in authentic where I had a cart threshold for free shipping. Well, I used that in two different places. I used it in the top bar and I used it in the cart. So because I'm gonna use that in multiple places, I've gotta store those settings centrally, but with this cart, simple cross sell element, all the settings that I set can be within the section because I'm not gonna use those settings elsewhere. So in the cart, simple cross sell section, you can see I've got the product defined some content, you know, the, the upsell text, the marketing text, and I'm allowing up to three products, but we just didn't select a third product. So when we added both to the cart, the element just hit itself. And the nice thing is if I go back and remove one of these elements from the cart and I have to refresh the page and it shows up again, it, it promotes the item. So it it's smart enough to know what's in the cart. What's not in the cart and promotes items appropriately.
Another thing we did for rhino is they've, bucketized their products into three groups. And you can see that here, right there before your activity, during your activity and after your activity. So we also allow people to design their own package and we bucketize that in before, during and after. So if they click on design your own package, this is a collection page that shows all the products that fit into the before bucket. And you'll notice at the top, we've got this header up here of step one before step two, during step three after and step four, review your order. So we're allowing them to walk through those three steps and let's say they want to add, you know, one of these products to their cart. We then give them a modal that says, do you wanna stay on before? Are you still on step one?
Or do you move wanna move on to step two, go to during so they can add more than one product from each step into their order. So let's say they they're done with step one. They want to go to during, and they can click on a product here, say, add to cart that say model pops up and let's say they wanna stay on during, at this time and look at the other products. And if they decide, ah, there's none of the other ones here that I want to do right on that collection page, we allow them to go to step three. So there's a button there and in the mole. So we give them multiple opportunities to step through this purchase process, you know, step by step, getting all the products they want. And then when they're done, they can review their order. And they see there are different products in the cart that they were, you know, added through this hand holding experience.
So this is really nice when you have a linear shopping experience where you've gotta pick piece, you know, one first and then two and then three or multiple items from each one of those levels. It's really hard to do this without walking the people through the process. Step by step. A lot of people try to do this on the product page, where with bundles, which is a perfectly fine way to do it, but I find this very linear approach. And I've talked to you before about linear shopping experiences. This is another example of linear shopping experiences.
So let's move on now to the game steward and they sell Kickstarter back board games. And what we found in building out this site and researching the customers when customers ordered more than one product in their order, usually those products were from the same game collection. So we came up with a concept of game collections and incorporated it throughout the shopping experience in this store. So an example of a game collection, let's just look at Zoba side here and you can see there's multiple games that are under this collection of Zombicide. And I'm looking at the collection. Now I'll pick on any one of these games and what we've done on the product page is let customers know that, Hey, this game is part of a game collection. And it's a Marvel zombies is the game collection, right? So what we did is every product name started with Marvel zombies.
And I actually encode, I broke it up, but there's actually a dash. So the, the collection name for this or the product name for this product is Marvel zombies dash class of the sinister six. So then code, we pull out the dash and put that onto two different lines. But now we know that this product is part of the game collection of Marvel zombies. Now this is where doing things in the theme can be a little bit tricky, right? It is coded in such a way that if there's a dash in the title, then we split the title and call the first half the game collection and the second half the product title. So you have to follow that taxonomy, but because this is a theme at it and not done in an app, we can't enforce that in any way. So you have to have a really diligent team.
You have to define your taxonomy well and have a team that follows it really well. But now that we know that this game is part of a collection, we do a lot of different things with that. The first one is here. We have a link that says shop all marvels zombie games. So there's logic in the code that says, if this game is part of a game collection, show a game collection promotion right there. And it's right, right under the the anic heart button. And if I click on that, you'll see that I go to a unique view of the collection. So these are all the different games in that collection. You can see there's a whole bunch of them, but the view that I'm looking at is what I call a spreadsheet view. So on the collection page, I can check the box for more than one of these games right now.
I just checked for three of them. And on the collection page, I can add those selected items to the cart. So I don't have to go in and out of multiple different product pages and add them individually. I can do them in bulk, straight from this special collection page. Some other things we do to promote collections is at the bottom here. You'll see. We have, remember I talked before, I don't like, cross-promoting randomly on a product page, but on this product page, we're showing other games that are in this collection. So maybe they don't want this version, cuz there's so many different versions that, you know, people have to get straight. So we're letting 'em know, Hey, there's other versions. You wanna see that whole collection. And what we also do is we show the games that are in stock and outta stock. So lemme show you another collection.
This, this game collection here is name. I never pronounce, right? Lulu wars on that collection. There's some products that are outta stock. So let's go to an outta stock one and I can see this one here is all sold. We can also get the the restock alerts. We put the restock alerts right on the collection page from the Clavio restock capability. Now I click on this outta stock one and once again, I can do the, the Clavio pop up to add myself to the notification, but we also sell have the shop Al Hulu wars games element on there and more in the footer in the footer element, only shows games that are in stock, none of the out of stock ones. So even though this game is not available right now, we allow them to opt in for it and see all the other games that are part of the same game collection.
Now let's add a product to our cart from this game collection. So I'm gonna add that pre-order to cart. And then what we do in the cart is we say, Hey, you've got one game from this collection. Do you wanna look at and add any other games from that same collection? So you'll notice I have a Chiu wars product in the cart and all the other promotions on that cart page arch, Lulu wars. Now, if I got rid of that Shalu wars and went and added a product from another game collection so that Zombicide collection add a product to the cart, then that cart promotion is only gonna show Zombicide games. And if we have more than one game in the cart, it'll show from the multiple collections and it's just highlighting products that are actually in stock right now. So that's how we've done the game collection promotion inside of the game steward.
Now the next one I'm gonna show you is Mulberry park silks. They sell silk sheets. And what they do is they provide a lot of content, a lot of information about the products to their customers. So they have really long, detailed, informative product pages. They've got videos, they've got infographics, they've got photos, they've got text, all sorts of good stuff going on. I just love how much content is on these, but the content they wanted to add there worth that enough tools in the theme toolbox to add them. Now they're working on the flex theme here, but it's before online store 2.0, so it was a little more difficult to build out a rich content page. So we had to do is add a lot of new types of sections and elements and blocks to the theme to get them to do that. And because their product pages are so long, we wanted the ability for people to quickly get back to the ad to cart button.
If they're scrolling down and, and kind of get lost in the depth of the page. So here I'm scrolling on this page and you can see, as soon as the add to cart button went off the screen, I have an add to cart button show up in the footer. And if I click on that, it takes me back up to the top, to the add to cart. Now it doesn't add the product to the cart because this product has variance. We wanna make sure they double check the selections that they're making before they add it to the cart. But that add a cart button is a nice way. When somebody scrolls down this page scrolls a long, long way, it's a nice way for 'em to get back to that top and easily, get back to that purchase process. Another customization we've done here is we have product seals, which we've talked about a couple times and we're able to control the colors of those.
And we also have product tabs. So this was a CU custom element. A lot of people who like product tabs will get an app to do that. We've built it into the theme and there's a whole bunch of logic behind it that the store staff knows how to use to manage it. And then if I go into the back end of this store and open up this page, this product page in theme customization, you know what you see, you know, because this is before online store 2.0, there's the main sections for the product page of product and recommended products and product sidebar. And then there's a section that we custom developed called silk sheets info. And this has tons of blocks that we created and blocks that do a whole bunch of things that weren't built into this theme, right? So this is where we got, got the ability to add in tabs and all the other things we're doing.
So lemme show a couple other, the customizations we added. So we just talked about tabs. Another one is, so this theme does a really good job with an image and text in image with text, but it didn't do a good job with images that were different dimensions. So Mulberry park, you know, didn't have all their images in the exact same sizes. So we had to go through and redesign this, this theme element so that it was more accepting of different sized images. What we did is we said all we're gonna cap the height of the image and we're gonna make the width of it dependent, you know, based on the aspect ratio of the photo. So that this element in the theme normally be really, really tall, cuz it's a, it's a portrait photo, but we made it scale that image height to the same as the other images.
So they look a lot more uniform. So it's one example of customization we did based on their needs. Another one was we didn't have the ability to add a really wide text box with a small image element. So we added that one in and then they also wanted the ability to have more than one photo side by side. But on mobile we wanted them stacked. So we had to have an element that allowed that. So you can see, we went in and added lots of new sections or actually in this case blocks to the custom section that we built that allowed them to present all the different information that they had. And the way we did that is we first looked at all of their content, right? We decided what content they wanted to show on the page and then how we wanted to show it. And then we went out and built all those building blocks into the theme so that they could do that.
So let's move on to the next store, which is sugar feather. And what we did for sugar, feather is we allowed them to in their store, have a wholesale experience in the same store that the consumers are looking at. So here, if I go to a Belgian linen, they sell pillows, I can see all the different pillows and, you know, look at them by design and, and price and color and all that good stuff. But what happens is if I log in and before I log in, I'm gonna show you here. The main menu ends in colors and sale. Those are the last two elements of the main menu. So now I'm gonna log in. And the account that I'm logging in with is tagged as a wholesale customer. So I log in and right here on the account page, we let the customer know that, Hey, this is a wholesale account and your wholesale prices are gonna be reflected throughout the shopping experience.
But you also notice I have a new menu item in the main menu, quick order. So what quick order allows wholesale customers to do because wholesale customers are buying in bulk, right? They can look at the different colors. Let's say they wanna look at the ocean pillows and they can go to the quick order page. So that's just that spreadsheet spreadsheet view I was talking about before with the game steward, right? So one of the you're probably noticing here is I've got a bunch of building blocks that I've built that I get to reuse amongst different stores. The difference is, or the, the, you know, the complexity is not every store is gonna use them in exactly the same way. So I have to, you know, have the ability to go in and edit them. For example, in this spreadsheet view here, we're showing the inventory of the products and we're also showing the wholesale price and the manufacturer suggested retail price.
And in the game steward, most customers only add one product at a time. So we had check boxes to select that product, to add the card. It added a quantity of one here. We actually have quantity selectors because their wholesale customers might want five of one pillow and 10 of the next kind of thing. So even though I have these basic building blocks the nice thing about that is because I built them and I know how they're built. And I built in the ability to edit them easily. I can go in and customize them for any given store owner's unique needs.
So in, in sugar feather, the wholesale customer can log in quickly see the product collections in bulk order in bulk, add the cart and check out similar to that in animal house fitness is a subscription product. And subscription's probably the wrong way to say it. So what they're doing here is they, they sell a fitness product and they're also gonna allow you to access training video. So it's a fixed price of $20 to purchase the guided workouts, 10 pack. And you can see here on this train page on the the main menu, when I click on that, it takes you to that product page where I can purchase it, but it also says, Hey, are you already a member? If you've already purchased the workouts login below? So what we're doing is when somebody purchases this product, we use Shopify flow and we tag the customer that they purchased a product.
So when they log in, so I'm, I'm logging in now with the customer that is already tagged to have purchased that training product. I'm gonna sign in. And in my account page, I have the guided workouts, 10 pack. I have a link taking me to that, but also if I click that same train link at the top menu, which a minute ago took me to a product page. Now it's gonna take me to the guided workouts page. And this page here was optimized for mobile. So all you see is, you know, 10 links to the 10 different workouts. And if you click on one of those, it takes you into the video for that day and you can watch the video and, you know, see what the workout is about and check out the other workouts. And the nice thing here is I'm just gonna copy this URL. If I log out of the store and go back to that video URL, it's gonna require me to log in cuz I, I haven't authenticated that I have access to that store. So we added code to this site that at different levels require you to log in, to get access to certain pages. And when you log in with access, changes out the menus
And the last one I want to show you today is a pretty complex shopping experience. This one is a build a box. So a lot of people understand what build a box is. It's sort of like when you're picking a dozen donuts, you're like, I want one of those. And one of those and one of those. So this build a box and I built a couple build boxes and each one is a little bit different based on the business needs of the different stores. For example, I built one before for store those Maroons and they don't manage inventory of their macaroons because people are just picking flavors and they always have all the flavors in stock, so they don't manage inventory. But this customer for spiral light candles, we're building a box of candles and inventory management is super important. So this one I had to go in and add inventory management capabilities to the store or to the build box function.
So the way the build box works is, you know, you can pick your size when we show what the price is gonna be, when you on, as you change the different things, you can pick your quantity. Let's just pick six. And I now see the, I think it's 28 or so cents that show up that I, of the candles. And I can add up to six of them to this box. I can do six of just one type if I wanted to. And when I get to that threshold, it's gonna tell me that, Hey, you're at your six. Now you can add it to the cart. I also just got a notification. If you noticed that I also hit the inventory threshold. So there's only six cranberry mangoes available right now. I'm gonna go to 24 and just show you that inventory management thing again, I'm just gonna click on sea glass. And up there we go. As I got to four, it, I got a little modal that says, Hey, limited stock available. So now I know that that's, that's the only inventory I have for that one. And then if I don't want, if I only want sea glass, I can downgrade to six. It keeps that quantity there. I can add two cranberry mangoes, and then I can add that to the cart and what it does when it adds it to the cart.
It adds each one of these products as a line item. And that way we're managing the inventory. Well. So as you probably know, in Shopify, you can't have the same skew twice in your Shopify store. And this store's inventory management system didn't allow us to do some fancy bundling stuff like some of the inventory management systems do. So that's where we came up with this, build a box solution where when we're actually building the box, if you pick, you know, six different of these scents, it adds six different light items to the cart. And then how we get discount pricing in that scenario is we added an app. So sometimes you use apps when, when appropriate, we added an app that actually does the discount pricing in the cart for the quantity that they added. If we weren't doing inventory management, then I could have done that in the pricing of the build a box product itself. But you gotta look at each store's unique needs and figure out the best solutions to meet those with all the tools available, including those tools that you build.
All right? So that's, that's the demo of things that I've built that most people use an app for, but instead I use a theme customization for and editing the code. I hope these examples provide you a better understanding of what is possible by just editing the theme. So I take away for you is that if you are trying to create a specific experience in your store and you can't find the right app, consider creating the experience within the theme, the development cost will be more than a typical app, but you'll gain complete control over the customer experience and keep it on brand. Now you're, you're probably gonna need a Shopify expert to do that. And Shopify experts website has lots of recommendations. There's lots of companies out there that can help you with that.
So thanks for listening.