Hey everyone. Scott Austin here.

I was recently talking to a client of mine and explaining to them how he created an image for them. The. So this, device called a palm bow, which is a pom pom and a cowbell combined. And what I did is I took one of their, photos because they have brand new photography, because it's a brand new product.

So didn't have a lot of lifestyle images yet. They just have a lot of product photos.

So I took one of their product photos and I gave it to Jim and I and said,

take this product and put it in the hands of a fan at a football game. And the image it gave was was pretty cool,

the team is talking and they're like, how did you do that?

And what I realized when I was having that conversation with them

is how many of the things that I do every day, because I do this stuff every day, this stuff being, you know, an agency building and e-commerce stores.

How much of the stuff that I do every day that I take for granted?

Not every store owner is aware can be done, and how easily some of those things can be done. So what I want to focus on in this episode

is to show you examples of custom code that we've done here at Jade Puma

in our client stores just in the past couple weeks. I just actually went through, my most recently done projects

and opened them up and came up with a list of ideas that I want to show you.

So

this is just a representative sample

of things we've recently done to illustrate how we can use custom code to further the store experience, right. You all have in your Shopify stores, a theme that you've added,

and that theme gives you lots of flexibility and lots of control.

But

there's probably things you want to do that the theme doesn't allow you to do, because the theme can't cover every scenario.

these examples here are probably gonna be things you're like, oh, I wish I could do that in my store. And what? I'll just let you know, it is possible to do these things, and I'll try to give you a feeling for how easy or how complex they are.

every theme in the Shopify store allows us to edit all of the code inside of it, and that's a nice open framework so we can go in and change lots of things if we want to.

Now, every time we change things, every time we edit code, that takes time of a developer, which means money for the store. So

you know, you don't want to go hog wild, you know, to your heart's desire and do everything you can think of. But when your business really needs it, updating your theme or editing the code of your theme is something that is, you know, possible and pretty easy a lot of the times.

All right, so let's dig into it. I'm going to go to the first example. And this is the the storage is talking about. This is palm bells.

And what I did in this page is this is a product page.

In the flexing, all the examples I'm going to show you are the flex images, because I use a flex scene for all my store builds.

But this type of stuff can be done in any theme. It's not unique to flex the editing of the themes,

you're probably used to a product page on the left showing you product photos and on the right showing you the product form. Well, in this one we added a product options app because you have two big selections you're making.

The first one is the Belle color. You notice when I change the Belle color. This is the product options app kicking in. It changes the images for the pompoms to match the color you selected for the Belle

you're probably used to inner product page having variant specific product photo. So when you click your variant options, the product photo that's normally on the left will show up and match the, selections you made.

But this product options app doesn't do that. We're doing that inside of the Product Options app.

So what I realize in this store is that the product photos aren't necessary.

So all I had to do is go in

and edit out and just hide. Basically the product photos from showing up on this product page, other product pages we show them.

But on this specific product where they're building their own Palm Belle by selecting their Belle color first and then their pom pom color second. There wasn't a need to

have those product photos. They weren't adding value.

So all we did is we added a custom liquid section in the product template, and then we added some code in that custom liquid section to hide via CSS.

The

left side of the page, which is the product photos. And then we also added some CSS to the right side. The normal product form of the product page to make it full width of the page instead of just half with.

doing this probably took ten 15 minutes to do, but this is also a theme I'm very comfortable with and no other classes to do it.

And how to add the CSS, but not a hard thing at all to literally just have your product form be full page with instead of a half page with.

So the next example is let's go to a tee box dice,

they sell one product in this store. And it's this set of dice that you use when you're, you know, teeing off on golf to decide which tee you're going to swing from to change the distance that you're playing.

That kind of thing. And this is the way to make your golf game more fun with your friends.

And because it's the one product store we had here on the homepage, a featured,

product photo.

just to clarify for you that are watching this on video,

this theme is actually not the same. I just said a minute ago that everything's in the flex theme.

This store is in. I forget which theme it is, but we haven't put in

flex in this store,

but they have a featured product element here on the homepage,

and it allows for a slider of the different product images.

you know this link here. The

product title was not clickable. The only thing that clicked was the add to cart or the

view full details.

And the store staff was like, well, we only have one product, so we're gonna put it on the homepage, which makes sense. But if they have any questions, we want them to go to the product page. There's a lot more information about the product. We have all the photos. We actually have videos on that page also.

And they have a product, you know, description and a lot of copy that explains how you play, you know, this game while you're playing golf.

So what we did is we opened up the featured product section in the theme

and changed a couple things.

One was we made the product image clickable. So when you click it, it takes you to the product page. And the same thing

with the product title. It's also now clickable.

So basically you could click almost anywhere in this section except for the Add to cart button.

It'll take you to that product page to learn more. But if you click the Add to Cart button, it'll add it to your cart. So here I'm going to click on the product image. And instead of expanding the image on the homepage, it takes me to that product page. And I can see the other information that's there which is a lot more rich information

on the homepage.

And this was a really simple edit. It probably took ten 15 minutes also to do.

Next I want to show you, Emmerson knives. They obviously sell knives and they have a whole assortment of knives. I think they're about 50 of them, in their catalog right now. They have hundreds in their catalog over their lifetime. They've been around for decades.

And each knife has all these unique aspects to it

people that, you know, buy knives and collect knives really care about. So there's a lot of information

on this product page as I scroll down that's important for the customers when they're making the decisions. So you can see we have an accordion with lots of information embedded inside of it.

The first thing in the accordion is a specifications where we talk about the dimensions, the weight, the materials and those kind of things.

And then we have more detail about the blade material. So we tell you more about the metal that's used and how hard it is or how soft it is. An important information when making your decision.

We also talk about the finish options because

the steel blades can come in different colors and different finishes, and people care about those things.

And then farther down, we also show all the other knives that are in the same family as this knife. So this knife is called the CQ, c7 b. And when I go down to the bottom of that product page,

I see you know the secret C7 family.

There's a seven, a seven trainer, a seven flipper.

There's a mini. So they got all these different variations. So in case you know, you know, you want

the CGC seven, but you might not be on the right, you know, version of it. You can see all the other versions on this page.

So there's lots of content

on this product page.

And the way we did that

is we took all that content. We made meta fields for them. And sometimes meta objects. So all the information is stored in meta objects in midfield.

And then we have to do when we're adding these elements in theme customization.

This

accordion here, for example, isn't the standard one that comes from the flex seam.

We have a custom one in our flex seam section app

that allows you to

add more content types than is available in the flex seam sections, accordion section,

and

we also, you know, you can bind those elements to the meta field. So

we have some if then statements that we've added. That's the custom code we've added here. Even to our flex seam sections app that

you know, it searches for example

on blade material.

It searches for the meta field blade material.

And

when it sees that, oh, there's there's a value there, it then puts, you know, takes that value. Does a lookup for the information about that blade material and puts it into the accordion. But then there's also logic that says, well, if that midfield is blank then don't show the blade material accordion.

So if the store doesn't have the content they need for that matter field, they can just leave it blank

and the

theme section comes along and says that midfielder blank. Don't add the title or the header for that accordion or the other content on the page.

So that allows us to use one product template across all the products in the catalog.

Because we added the if then logic to all the meta field values, it says if it's blank, don't show it. If it is, if it has content to go ahead and show it and put it here kind of thing. Now this took a little bit more work to do than the ten 15 minutes of the other examples.

But this is something we do in a lot of stores now.

We're putting a lot of product information

into midfield. And actually in 2025, we're starting to put a lot of product information

into meta objects also. And then we have to go through and customize all the sections that we're building or using for building out the product pages

to add those if then statements that if the matter field is blank, or if the meta object is blank, then don't show anything from this section

on that product's page.

useful stuff we do all the time for all of our stores now.

Now the next one is pilot test charts and they've rolled out a new product. So they have, these, you know, navigation charts that they're selling to pilots who are the people that, you know, help big ships, you know, come into the port of Long Beach or something.

And they have these test charts which you actually go to the Coast Guard office when you take your test to get your license. And when you buy these test charts, they actually ship them to that Coast Guard office. So you can see on the product page we have an image that says

wreck test chart

shipped directly to wreck Long Beach for testing.

we want to

reinforce to the customer when they buy this product, we're not shipping it to them.

It's going to be shipped to the Coast Guard office, and you're going to go there and use this product.

once you purchased it.

So what happens is when I,

add this to the cart before I can add it to the cart.

There's also a couple of information that the Coast Guard office is going to need. So they know when the person walks in that they're the person that gets access to this test.

So one of them is their

Mariner reference number. So I'm just going to throw in,

number there. And that was a line item property and a little code that we added to this form.

And basically here we have

two midfields that says,

are you going to collect an MSN yes or no? It's a true false. And are you going to have a full name? And if those are true, the code is set up to put in these data entry form so that people can actually put their information in.

And the code also adds those as line item properties in the order and in the checkout. Not sure what that looks like here when I hit the add to cart button,

but we've also done here is there's a third line item property form on this page that's hidden.

And that's going to also on this product, add a line item that talks about

how this product gets shipped to the Coast Guard office.

So we add it to our cart. And here you can see

the

reference number I just put in the Mariner reference number. And then the name that I just put in and then the address that it gets shipped to.

the customer put in the reference number and they put in their name. But we add and we have those as line item properties.

So that reinforces it for them and everybody processing the order.

And then we added from that hidden line item meta field the address that it goes to. And I think we store that in a midfield also. So if the midfield exists with the address

then we have that hidden line item property on the product page and then it automatically gets added to the cart when somebody adds that product to the cart.

This also wasn't that hard to do. It probably took an hour, hour and a half

to edit it and test it out. A few different scenarios to make sure it worked properly.

Kind of similar to that, but there's a couple other nuances we added to it is on Bixby Chocolate. They,

have an advent calendar, and as I'm recording this right now, it's September and the advent calendar doesn't ship until,

November 15th.

But they're allowing customers to preorder that advent calendar.

So a couple code changes we made

was triggered by a midfield. So the midfield is just a simple true false for

preorder. So if the midfield for preorder is set to true there's a couple changes we make. The first one is

we change the add to cart buttons, text to say preorder.

So even as I'm adding that product to the cart, the customer is reminded that this is a preorder. We're not going to ship this right now. It's going to ship later on,

and then we also just like on the the

test pilot,

charts site where we have that hidden midfield. We also have a hidden midfield here that gets added once we hit that preorder button and add it to the cart.

So when I go to the cart, I now see that there's

line and it says note orders for advent calendar will be held and will ship in November.

So there's that reminder in the cart to the customer that, hey, this this product's not going to ship right now. You're going to get it later on. And whenever they get their notifications or they look at their order status page,

they're going to see that line item property.

So there's that constant reminder throughout the post-purchase experience

that there's going to be delayed gratification with this product.

As a Shopify store owner, you understand how useful cross sales are to your business. They're a great way to increase average order value, and they're also really powerful for your customers. For example, here, the customer with a chocolate puffin may also want to buy the Puffin gift card or a customer buying a meal plan may also want to buy a snack plan or a customer buying a home bar may want to get an important accessory for that bar, and nothing goes more natural with a duvet cover than the duvet insert.

Now, traditionally for carousels, what a lot of stores are doing is that they cross-sell in the cart. Like here, or they'll even do a bundle up on the product page like here. Now, there's nothing wrong with these carousels and they can be useful for your business. But with linear shopping experiences, we have a more powerful way to do carousels.

This is especially useful in the case where there's more than one option. So here, trying to bundle this puffin with one gift card could be easy in a bundle up here on the product page. But let's say there's more than one type of gift card for the customer to choose from. This is where linear shopping experiences comes in.

You click on the Add to Cart button. That product is added to the cart, and then we ask the customer, right then, hey, do you want to add a gift card to your puffin gift? Yes, please. And then they're taken to see all the different gift card options. Maybe they want a moose or a lobster or one of the different puffins.

They get to choose whichever one of the products they want. They get asked after adding the meal plan. Do they want to add snacks to their order? And then they see a whole bunch of different snack options to choose from? Now on the bar example, there's only one accessory for the bar. We say, hey, do you want to look at the cutting board insert accessory?

If they say yes, we can take them straight to that product page. And for the duvet cover, there is actually more than one duvet insert available in the store. They get to see all the different duvet insert options that they have. So Linear Shopping Experience is an app that's going to naturally place in a very intuitive, logical format for your customers.

Cross sells into your store, and for every given product you can do a unique cross-sell. So that cross sales can point to a collection, a product page, or even just a page like a landing page that you've designed for that cross-sell experience. Add linear shopping experience to your store now, and get the benefits of these natural and intuitive cross sales for your business.

Moving on to our next example.

This is botanical medicine. This is a store we're working on right now. It's not live yet. We're, transferring this store from another platform.

And one of the things that they do is they have conferences twice a year, and people sign up and, you know, pay in advance

for their conferences

And in their old platform. It is a very manual process, and we're trying to streamline it a little bit, just using normal products inside of Shopify

and having them purchased in a slightly different way.

So this is what we call a quick order form. The quick order form is something that we have in our flex Team sections app.

But this one needed

a bit of customization for their unique business scenarios. Right? So with the quick order form does is we're actually on a collection page,

not on our product page. And what we're doing is we're showing all the products with the ability to add those products to the cart in the collection page,

but it's not like a little individual add to cart button for each one.

It's more of like a spreadsheet view where you can adjust the quantity you want for any given line item or any different any given product. In the variants and product options of that product. So the first one is event registration.

And right now there's there's two options for event registration that's open.

One is you know in-person attendance because it's before March 7th.

So like early bird.

And then there's also online

attendance.

There's also a couple other options shown for in-person for later than March 7th. But those are shown as out of stock right now because

it's before March 7th. So, you know, you

get

savings for being an early bird. But we're showing people

and reinforcing that, hey, if you don't, you know, purchase now, that price is going to go up as we get nearer to the conference date.

And then there's pre-event events, activities that they could attend.

There's also a social event that they have to pay to attend

continuing education credits and a tote bag. So all these different products

on one page, they can, you know, sit here and think for a minute, like,

do I want to go to the social event? And they can say yes and add that to their cart.

But what we've also done is and we did this based on the store staff's feedback,

is they frequently in their old system

had people sign up for like the pre event or the social event, but they didn't sign up for the event registration. So we also have some code in here that requires them to sign up for event registration first, and then they can add the other products to their order.

So as I tried to add the social event, I got an error message in the page. Scroll up that error error message and said you must add the required event registration product to your cart before adding other items. That's kind of awkward text. We actually just made this. This weekend.

But we also in the section that we made for this, made that texturing,

a setting and theme customization.

So store staff will be able to come in, change that text to whatever they want it to be that's, you know, better, more authentic for their brand and their audience. Instead of our awkward developer text.

And we always try to do that when we're doing customizations. We try to give as much power to store staff, to edit things as possible

without having it hardcoded in the code, and require us, the developers, to go back and open it up if they wanted to change some wording.

But now if I go in and I select

my online or my in-person event registration, this quick order form highlights that in green. So I know, hey, that's in my cart

And my cart icon actually changed and added a product to it. So we're actually adding the products even though we're not moving anywhere, we're still on that collection page.

It is now added to our cart.

And if I was to leave this page and come back, it would look at the cart that you have on your current session.

match all the products that are in there, if any are in there from this quick order form

and would highlight them and change the quantities in the quick order form so you know it's already in the cart.

And now that I've, you know,

added event registration, I can, you know, to sign up for the pre event if I want in the social event

and the other products that are available in this quick order form.

And then in one click the button I can view my cart. And all of those products are already added there.

So now what we have is the ability for

this

customer

to come in to one page, see all their options for this conference, decide which ones they want to have,

and opt into those

in one checkout,

one credit card purchase,

add all those to their cart.

Now this, you know, was based on the flex team sections,

an app that we provide here at Sheet Puma.

The quick order form was based on that, but then we had to do some heavy customization to that for the ability to require the event registration before anything else.

If I was to start scratch on a new,

theme, or if I didn't already have the flex team sections with the quick order form,

you know, it would take some work to make this page.

And by some work I'm thinking, you know, 5 to 10 hours, depending on how much testing is needed.

But, you know, totaling the realm of possibility.

And when I showed this to the store staff, they were super excited,

They said,

you know, this is going to help, you know, our customers understand the purchase scenarios better. It's going to help prevent mistakes that have happened in the past, which, you know, as a customer support hassle.

So they were really pleased with

the automations that we could add, the business rules that we could implement and enforce

for their business model.

So let's move on to another store that we're working on that is not launched yet. And that is classic 40 fives.

This is being migrated from a SQL server based store

that was built in 2001.

So it's going to have quite a dramatic upgrade once we launch it, which I'm super excited about.

And on this one, they're selling 45 records, right, for jukeboxes. And in that type of use case

and they've got over 65,000, I believe records in the store. There's like, you know, 14 to 20,000 or so available right now. But once they sell a record,

they keep it in the catalog even though they don't have inventory for it, because there's a lot of information about each of these records.

As you I'll show you here in a second.

And we don't want to lose all that valuable data,

about these, these 45 records. So if we scroll down on the product page, we've actually built out a table with all sorts of information. And this is all done through meta fields.

I think we have, like 54 Midfields at the product level,

for this store.

And we have meta fields that we show to customers. And we also have meta fields for store staff,

that they use in evaluating the products

trying to figure out how to price it and all those kind of things.

We even have the ability to show those

store staff based meta fields

in the

customer facing side of the website.

If you're logged in in the store and tagged as an admin, we show you all the back end. You know, back end and air quotes, meta fields,

that are for the store staff to use.

But here in the front end, you know, we have condition about the record. We show the details about the song and the

disc.

We even have MP3 snippets for some of them. And then we can play those snippets, so people can listen to the song and, you know, like, oh, that is the song I thought it was. And they have information about the A-side and the B-side of the record, like the artist, the track time, the producers and all sorts of information.

And then in this case here, the artist for this is Sister Sledge and at the bottom of the product page, we show all of the available records from the artists. Sister sledge,

in case someone wants to, like, collect them all or something like that.

So

this is all, you know, once again, done through metal fields. We're using metal fields a lot in stock in stores these days, like I said before.

And we've got all that, you know, conditional logic. So we built out this table

to display, you know, all the metal fields we wanted to show on the customer side of the website.

But then each one of those metal fields in the table, we ended up put that conditional logic we had to decide for that matter field, would we have conditional logic?

For example,

in the product I'm looking

at right now,

we have five things we evaluate the condition of. One is the overall product. The second one is the label, the third is the sleeve, the fourth is the vinyl or the record,

and the fifth is the audio quality. For this record, the sleeve, there's actually no evaluation. For whatever reason.

It might not have a sleeve or they just haven't done it yet.

But we show

that, you know, title, the sleeve title, because we actually want to show them why we didn't evaluate it for whatever reason.

So we had to make decisions on each one of these meta fields. Are we going to hide it if it's null?

Are we going to show it anyways if it's null? But in the end you get this rich table of information

about the record. And that's

also, you know, consistently displayed across all the product pages.

So you know that the customers be able to say, like if they care about a certain piece of information, they're going to remember, you know, after looking at 15 different records.

Oh, it's it's stored in this part of the table

where,

previously what the store had done. It was all in the description. Right? And there was no consistency in the text of the description of where things were stored.

So sometimes the producer information at the top,

other times it would be the bottom. And it'd be hard for the,

customer to find that information.

But now that it's in Midfields,

we can have a very consistent layout in our tables.

And what we can also do is some very powerful stuff

with collections and filters. Now that all this data is more structured

than just inside of a text field, and I'll show you that here in the next thing that we did for classic 40 fives.

So

as I mentioned before, there's like 65,000 records in the store.

14 to 20,000, I forget which live and available for sale. And from that there's like 5000 artists.

in this store we made artists, the product vendor field in Shopify back end is the artist in this case.

if I look I'm going to click on above for example.

And we have a collection of all the records from ABBA.

Now if I go back for a second, the page I'm on right now

is a

page we built, and it's all custom code.

And what it is, it's shop by artist. So

there's 5000 artists on this page, and we made a collection for each one of these artists, which is a whole

process.

It was a lot of fun figuring out all that data.

some collections are empty today because they don't have, you know, that artist all their records are sold. Remember, we have

three times as many records in the catalog

then are available today because the other two thirds have been sold.

So what we do on this page

is we go through the list of all the artists collections,

determine if that artist is,

that collection has any available products

in it.

If it does, we add it to this page.

We also have some, you know, quick links. So this page as I scroll through is really, really long right. There's over 5000 artists listed on this. And I've done it in three columns. But you know, as the whole time I've been talking about how long this list is, I've been scrolling the page and I just got to the bottom.

So it's really hard for people to find, you know, the one they're looking for, let's say they want the rolling Stone. So at the top we have a little quick nav. You just click on R

and then you can find the Rolling Stones. So now I can see all the R's. And I'm going to look and see if I can find Rolling Stones.

And I'm going to look for row

in the list is all alphabetical.

And I'm up to rc r g

r n. And so it's going to be in here somewhere. Rolling Stones now the interesting thing here is

the artist title name is the Rolling Stones.

But we've got it under the R's

and alphabetically under the R's. It's under row not under the

because we have some business rules that the store staff gave us around how we display artist names on this list, for example.

I'm also looking at Kenny Rogers right above the Rolling Stones.

Well, Kenny Rogers is under the R's because we go by last name. If it's an artist name.

Rolling Stones though, Rolling Stones is under R because we don't take into account the en artist names.

But if I look at another artist name like Rockwell, there's no the for it, so it's in the R also.

So what we had to do is create some rules around the three different types of artist names.

Artist name rule number one was for if it's a person's name,

then we go with the last name

artists. Rule number two. If it's just

band name like Rockwell, then we just put it there and then three is if it's a band name with a, we don't consider that.

So we had to have rules behind all of that in our code accounts for all of that. So you know what it's doing when we load this page up. And I'm gonna do a hard refresh here in a second. You can see it load up because it takes a little bit of time to do that, because it's going to go through all of the artist collections that we have, which we're only going to show a 5000.

But there's more than that of all those sold out artists. And then it's going to alphabetized that list of them using the specific rules that we talked about, to put them in the alphabetical order. That makes sense for people that are looking at artist list.

So if I do a hard refresh of this store right now,

you can see we had a little loading artist icon that showed up for a second.

And it

a lot of this is cache on the server side on Shopify because I just load this page a minute ago, so it was a little bit quicker than it happens the first time in a while. It probably takes up to five seconds sometimes, but we also had to put a loading icon in place so that while that five seconds was going on, we're letting people know that, hey, no, we're still doing something here.

Just wait a moment and you'll have your page for you here. So this was a large amount of work, right? This is a massive catalog. Lots and lots of products. Lots and lots of vendors, lots and lots of collections. And we had to iterate on this a few times because we would do a little bit of work.

We would show it to the store staff and they're like, well, why is the Rolling Stones under the T's? And we're like, oh, you want or the are. So then we figured out how to do that, right? And then we show it to them again and they're like, great. It's now to the hours, but it's still under the T section of the Ars, not the row section of the Ars, like, oh, we got that rule.

And, you know, so it took a little bit of back and forth, you know, to play with the experience, to realize because we didn't know up front, you know, none of us knew all the rules that we would put into this. But once you start building something like this in an interactive fashion, with us as the development team and the store staff working together to see how that experience works and iterate going on a few times.

We came up with what I think is a really nice solution for such a large catalog that was shot by artist. So this one was a lot of work, right? But well worth it. Their store is going to be much better off with this now in place.

Now we're going to move to our last store example.

This is Scorpion Percussion. I got two different examples in Scorpion that I want to show you.

Because we're doing a lot of work in the store and working on the customer experience and making things easier for customers to shop for.

this product that, that I have up right now, it's called Your Band Work shirt

is actually not for sale yet.

product is actually hidden, which is why it's all all the variations of it are showing is sold out.

what we've done here, remember we had the concept a little while ago of the quick order form for,

the botanical medicine website where they were ordering the different things they wanted to do when they attended the course.

So we take that same concept, but we do this one at the product level. So here,

if you're a band, this is, you know, a band wants to come in and buy a shirt from Scorpion Percussion to sell to their fans. They're not gonna buy one of these shirts. They're going to buy, you know, a hundred or 200 or 500, and they're going to buy all these different sizes and colors that are available to give all the choice to their their fans that they can when they're selling this merch on their tour.

So what we do is on this shirt, all the product options are now quick order options. So we're showing all of the product options and allowing you to add a quantity for each and every one of them. So right now I can see in size small I can have color black or color of gray. Now it's all shown is sold out right now because you know this product's not live.

But if I change that quantity to ten for, you know, each one of them,

I can order ten of the smalls, and maybe I want 15 of each of the mediums, and then I want, you know, 20 of the larges

and 15 of the extra larges

and, you know, maybe, you know,

to want to have 15 of the double XS, and I'm not going to keep going here because there's, there's more sizes.

But now

I can put all those quantities in it. Highlights is green when I put, you know,

data in there. So I know which ones I filled out and I can see which ones I haven't filled out yet.

So I can go fill those in if I want to.

And then with one click of the button, all of those products and variants are going to be added into my cart.

I'm getting an error on my screen right now since sold out because our products aren't aren't live yet for this one,

but this allows people to do bulk orders, bulk purchases of multiple sizes and options

in, you know, one page instead of going back and forth and in and out of the page and add this to the cart, come back, change the options, add the next ones to the cart, and those kind of things.

We also, when we built this, form for the product page,

we allow you to bucket sizes. So right now I'm seeing size small first and then it shows. Colors for small are black and gray. We could have done the exact opposite

And it's just a setting in the section that we built. You just you just click which options

most important one 2 or 3.

So this is option one size being the most you know for important one. Or the top level decision

we could have done is we could have said

option number two which is color.

what I would see at the top would say black. And underneath that would be small medium large, extra large double extra large.

And then it would show, you know, color gray small medium large, extra large.

So we allow the the store staff to change, you know, which ways they sort it. Or it can just be unsorted and just shows all of them the way that they're showing in the product database.

So this is a useful way to allow, you know, bulk purchases without going back and forth, back and forth, back and forth. This took quite a bit of work also to build out.

Probably five hours. I'm going to guess there was a lot of testing to make sure all the edge cases worked properly.

does it have one option, two options or three options? How many you know, what number of options do they have?

That's what I mean. I want to talk about all the edge cases. So it's it's a little bit of work, but,

they're doing this.

You know, once we built this template, we applied it to, you know, like ten different products that have this scenario of,

bands you're going to be buying this as their merch with their logos on it in different sizes or different colors. So it makes it easy for the bands to come in and do all of that quickly and easily.

And now for my last example, we're going to stay on Scorpion Percussion and show you something. We just launched, probably about a month ago,

I'm super excited about. You know, if you listen to the podcast a lot, you've heard me talk about the concept of linear shopping experiences

where

instead of making all the choices in parallel, you want to make a single choice at a time.

And you know how I and when I design navigation and collections and list of collections and products, I'm always trying to

minimize the number of choices being made at any given time. Well, that's what we did. Kind of to an extreme in a good way here on this drumsticks page.

So

incorporate

percussion shells, drumsticks. And there's lots of options and drumsticks.

Right. There's there's different sizes, there's different shapes, there's different colors. There's different lengths.

And we couldn't just have one product for drumsticks. There's just too many options and too many choices going on.

So what we did instead

of having a collection or having a product, is we just made a page that

brings in the choices you need to make and doesn't change what collection or product you're you're not navigating through pages.

When you enter this experience. So, you know, the first choice you have to make is

do you want there a stock which is there good sticks

or do you want there be stock which are the imperfections. Right. So I'm just going to select

a stock.

And then what I see on my screen

and we optimize this for mobile.

So I'm going to show for those watching the video the mobile view of this. Because we actually made this a really fancy page on desktop. There was a lot going on. I was super happy. I was totally geeking out right? The geek in me was loving what we were doing. Like I could hover over one element. It would show me all, you know, all this trickle down effects of it for the next four choices I was going to make, but we found out was on mobile.

It was just too complicated. It was too hard. People didn't get it right. It didn't make sense. There's too much, you know, too small screen for too much information, which is a common mobile problem.

So we optimized for mobile, took out all the extra cool stuff we were doing on desktop,

and just made it for mobile.

And what we're doing here

is we're walking the customer through the decisions they need to make to pick their drumstick, and it's for decisions they have to make beyond the one they've already made.

So there's a total of five decisions. I actually six when we get to the end, I think,

right, that first decision was a stock or B stock of drumsticks.

The second decision is what is your diameter. And there's actually seven diameter shown here. They have names. We show it in inches and centimeters. And they can say

well I want the three a diameter.

So they click on three a. And then the next choice is what shape do you want. And depending on which

diameter they picked there's different shapes. So in this one here the three A has an acorn shape a ball shape and an oval shape. Now if I had picked a D.

It's only available in the barrel shape. So it automatically selected that and took me to the next choice

of

length.

But if I had picked the five a, it's got the same choices as the three AA. So depending which diameter you pick, it's going to show different shapes. So the tube only has acorn an oval available

step one tell

us your

your diameter. Step two tell us your shape. Now I'm going to pick the acorn shape for the tube diameter.

And now my next choice is well what length do you want. There's a 16 inch 16.5 and 17 with a little explanation. Not a lot, but a little to explain the differences. You know why you would pick one length over the other.

And then when you pick your length

it then ask you what grip you want. Do you want lacquer, natural or venom?

The little description about them. And it also talks about how that affects the price of the product.

All right. So then we select that. And then lastly do you want to print on these drumsticks. Because a lot of bands will get their their band logo printed on the drumsticks. So when they throw it to the crowd at the end of using it, you know, the fan has a as a a little token of the band kind of thing.

I can say, no, I don't want printing or yes, I do want printing. And if you do want printing, it says, you know, a minimum order of 12 is required. So if I click on signature printing,

it then asks me, do you want to upload an image or do you want to use an image on file. Because a lot of bands come in and just order, you know, regularly through the site, so they have to upload the image every time.

They can just upload or use the image they've already used before. And I'm going to say use image on file, and then it automatically uses a quantity of 12, which is the minimum order quantity for the printing. And I the product form will not let me, you know, take that down to 11. I can go up to 13, 14, 15 if I want to.

And I see the impact on my process. I'm doing that the whole time.

And any time in this process, I can hit the back button and go to the previous step. So I just selected signature printing and I'm like,

well, I didn't I didn't really want to order 12 a.m.. I just wanted to check that thing out. So then I get no printing

it starts me off at a minimum order quantity of one drum pair of drumsticks.

in this, you know, very linear shopping experience type, experience. Here

I am, step by step, walking the customer through many, many different decisions. Right? I haven't mentioned products at all. All I'm asking are questions and the customers giving me an answer. What diameter do you want? What type of, shape do you want? What length do you want?

And then when they finally hit the Add to cart button,

we take all the information they've given us, map that to the product catalog,

and show them the product that maps to all the answers they gave. So now I see a product that has a Acorn style tip, a 16 inch length venom grip finish diameter of tube.

So that'll add information all there in my cart.

So the way we do this is we actually have a,

comma separated file that shows all the different options that are available.

And then what, you know, product variants they lead to.

And then we have a lot of code around that. This was a very costly from a time standpoint, project. But when I showed it to the store owner, he was absolutely delighted.

Right. They actually have a mobile phone app that does a lot of this functionality

and

having a hard time maintaining that app and, you know, keeping it up to date as all these things change.

And he's so happy that he now has that same level of functionality that he had in the custom built app

right on his website that anybody can access from any device,

without having to download an app and all that kind of stuff.

he's absolutely loving this functionality. And the customers are finding the shopping experience much, much easier because the way it used to be was a collection that showed all these different products. With all this terminology, you really weren't sure what decisions you were making when you were picking one product over another. So we broke it down. So it's a decision making engine and easier for customers to navigate through and understand the cause and effect behind what they're doing.

So that's the the set of products I wanted to show you guys.

So that's the set of themed customizations that we've done recently here at Puma that I wanted to share with you all to get you thinking about what shopping experience does your store miss today? Because, you know, the theme doesn't do certain things that you want to do, whether that's having a shopping experience that's bespoke to the decision making process of your store, or enforcing business rules that are important to your business or just, you know, making things a little more common sense for customers.

Customizing your theme. Doing custom code inside of your theme is possible for every theme in the Shopify ecosystem, and it's not that hard, right? If you hire a Shopify expert or if you come from code yourself, anybody can open up the code and edit it. But there's a whole ecosystem of Shopify experts out there that can help you do this type of stuff.

So the Uber point of this podcast episode is, don't think that your theme, you know, functionality restricts you or constrains you. You can totally draw outside those lines if you're willing to customize your code.

hope that was insightful for you. Thanks for listening.