Build a Web Store With Shopify!

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON LENGSTORF: Hello, everybody. And, welcome to another episode of Learn With Jason. Today, on the show, we have Kelly Vaughn. Kelly, thanks so much for joining us.
I'm super pumped to be here doing some eCommerce stuff today. This is going to be great. So, for those of us who are not familiar with your I can't imagine that's anybody at this point can you tell us about yourself?

KELLY VAUGHN: I'm the CEO and founder of The Taproom. It is for high growth businesses. I'm the co host of Ladybug podcast and Commerce Tea, which is a podcast I started with a friend 15 weeks ago. So, I'm doing two podcasts now and I'm all over the place with content related to Shopify and free lancing and eCommerce. And I also wrote a book.

JASON LENGSTORF: Oh, I also wrote a book. (Laughter). The casual drops. (Laughter). Lots of love for the Ladybug podcast in the chat.
What's up, chat? It's good to see you. It feels like half my heart is gone. So I'm super excited to be back. So, we're going to talk, specifically today, about eCommerce. And one of the things I think is really interesting with eCommerce, especially with the lower barrier entry to tools, they're making it more accessible to get an idea out there and to make something available. And one of my favorite examples of this is your store, where you have these incredibly funny, like, mugs and T Shirts and stickers that are around developer humor.
Can you talk about the origin of that? Where that came from?

KELLY VAUGHN: It all originated with wanting to learn more about headless commerce and to define headless commerce, we have to talk about eCommerce. So, if you're unfamiliar with the concept of headless commerce, it's separating the storefront from the backend of the site. You can use Shopify for your home for all your product data and transactions, but basically take that data and build a custom storefront. I wanted to figure out how that works. Specifically, with Shopify. So, I started a Gatsby site I actually used my own personal site for it. And I used a Shopify store for an API to pull in data but I needed a product to test it out, obviously. And so, there's a website called Printful. You design the product and when an order comes in, it goes to them, they print it and ship it for you. You don't have to do any work. The occasional customer service in query.
I took a project I worked on that was really, really frustrating me. And it has things like "please work." "Fuck." Sorry, I don't know if I can do that on here.

JASON LENGSTORF: It's cool.

KELLY VAUGHN: It was hilarious looking at it. It generates these pictures for you, like stock photos. One of them is a picture of a mug surrounded by donuts. I posted a picture on Twitter because I couldn't stop laughing about it and somebody was like, no, seriously, I want to buy that product. I'm like, okay, this is just a test, but if you want to buy the bug, then by all means, buy the mug. I opened up the store and that was the start of Covelli.

JASON LENGSTORF: I didn't realize I always thought it was one of those things that you were, like, ah, this is a unique, short name but I'm going to pronounce it however I want. (Laughter).

KELLY VAUGHN: Also, like, super secret actually to the some people who are tuned in. I'm in the process of rebranding away from using my own Twitter handle to a proper name for the website, for the business. Because all my customers come from Twitter and I'd like to expand away from the Twitterverse. It's been fun coming up with products, mugs, stickers. The Git Commit history, the blankets and pillows. Face masks, because it's 2020 and obviously I'm going to create face masks. I actually have one downstairs.

JASON LENGSTORF: I think I saw some prototypes or photos or something you were posting. They looked like they were going to be super fun.

KELLY VAUGHN: They're really great. I have an abnormally small head so it's too big for me, but it fits my husband just fine so he's walking around with a Git Commit History face mask.

My partner is small and she has moved on to buy children's face masks.

KELLY VAUGHN: Two things. I have a small head and very little cartilage in my nose. So, super weird fact about me, when I visit some of my friends, the first thing they want to know is poke my nose. This is going to be super weird. I can literally push my nose in.

JASON LENGSTORF: Wow!

KELLY VAUGHN: I had a bar surgically put in my nose.

JASON LENGSTORF: Oh, dang! When you were a baby, I guess, you had, like you could literally, like, honk your nose.

KELLY VAUGHN: When people were like, "boop" and my nose goes in, they were like, "oh, did I just break something?" (Laughter).

JASON LENGSTORF: That's great.

KELLY VAUGHN: My fun features.

JASON LENGSTORF: Bobby in the chat says that is a deep boop. That's, like, the boop is good.

KELLY VAUGHN: That's a good boop. Again, super weird facts about me. Can you touch your tongue to your nose? I learned last year, you're supposed to clip your tongue if it doesn't extend out. It wasn't until last year when I was at the dentist, I swallow and my tongue pushes my tooth forward. This is super relevant to Shopify. (Laughter). As a result, I have a short tongue span, but as well. I can push my nose down and
(Laughter).

JASON LENGSTORF: Loopholes.

KELLY VAUGHN: It's a cheat code. So, you know, it's what I have to do. (Laughter).

JASON LENGSTORF: All right. So, that is incredible. I think that could be maybe your next book is on on how to you know cheat the system of tongue to nose touching. Cheat boops. (Laughter).

JASON LENGSTORF: So, when we're talking about eCommerce, like, I think there's a really interesting kind of trajectory I've seen over the last years' of my career. In the early 2000s, everybody wanted to sell things online, but it was a nightmare. There was not just the part of being able to list products or have, you know, something listed. But then you had to figure out how to charge for it so there was compliance and can you keep credit cards safe and what do you do with the money once you get it and how do you get it to the bank? People would ask for eCommerce and I would say "it's not worth it." The amount of hassle this is going to be, you're going to regret this. I feel like it's the opposite now. Now, I'm like, yeah! Do it today! Go click this button, you'll have a store.
What do you think changed? What were the main hurdles that we've overcome, that got us to where we can stand up so fast now?

KELLY VAUGHN: I think having a third party handle the security side of things was really important. I think it started with PayPal honestly. The first eCommerce sites I was building, many, many years ago, integrated a PayPal buy button. They took care of transferring money to your bank and then along came Stripe and really opened things up to the rest of the internet to be able to actually build out some kind of eCommerce functionality without having to handle to handle the credit card transactions.
There's some interesting things I've learned, over time, working in eCommerce for six years now. Having an option like PayPal is really convenient. If people don't want to enter their credit card information in, they don't trust your site, they feel more comfortable buying via PayPal. I have my credit cards handy through Last Pass and one click button and I'm ready to check out. These really opened up the options for being able to offer some kind of transactional checkout that somebody else was handling the heavy lifting for you so you did not have to worry about the security there. That is one thing I love about Shopify. I'm not touching anybody's credit card information.
I used to work I worked retail, briefly, when I was in college, and the one day that the systems went down, we were literally writing people's credit card numbers down on sheets of paper so we could process them later. There's so much wrong with this situation but it's not my company so I'm just going to keep doing what I'm supposed to do.

JASON LENGSTORF: Thank you for the subs, both Ben and Andy. I appreciate it. Way before the show started. Brett subscribed. So, thank you, all. Enjoy those "boop" emojis.
Holy crap! Thank you so much. It is September right now, which means, I guess, you can get a discount on subscriptions. The longer you subscribe for, the longer they are. If that's a thing you want to do, you can do that.
Holy crap! Thank you so much. We're getting it rolling here. We got the hype train going.

KELLY VAUGHN: I feel like we're playing a slot machine and we keep winning.

JASON LENGSTORF: Now we got bits, thank you!
Kelly, we we are we've talked about what is possible now. I would really love to see this in action and I definitely want to make sure that we don't have to kind of get into crunch mode to get something done.
If you don't mind, let's switch over and start some coding.

KELLY VAUGHN: Let's do it.

JASON LENGSTORF: I'm going to move over into pairing view. If you don't already follow Kelly, make sure you go and do that. And, you'll be able to get all sorts of good jokes and whatever this picture was in support of. (Laughter). Um, and so

KELLY VAUGHN: I'm pretty sure that was to Emma about something, as usual.

JASON LENGSTORF: I love watching you and Emma, like, banter on the internet. It's very much like having a window in to somebody's DMs. (Laughter).

KELLY VAUGHN: It's one of my favorite things. Every now and then, we'll reply and be like, "oohh, I hope it's never taken the wrong way." Of course it's never taken the wrong way.

JASON LENGSTORF: My manager, [Indiscernible], and I are supposed to have this burger battle. She's like, my [Indiscernible] burgers are the best burgers and I'm like, cool, I'm going to make a Smash burger. We've been talking trash about it for, like, a year now.

KELLY VAUGHN: I love it. Keep it up.

JASON LENGSTORF: We've regularly we start and it escalates and I'll say something and she doesn't immediately reply and I'm like, I finally crossed the line. I'm fired. (Laughter).

KELLY VAUGHN: Exactly. I love it.

JASON LENGSTORF: Okay. So, yeah, this so, I've got the store up online and then you have another so this one, you said, is headless, so this is using Gatsby.

KELLY VAUGHN: If you visit my site now, it's a view based site and it is the most basic site ever because I don't have time for much at the moment. That is the site.

JASON LENGSTORF: Gorgeous. It's beautiful. Minimal.

KELLY VAUGHN: Nice and easy. This is a Shopify store. This is going to be your more traditional Shopify store. This is using a theme called Flex out of the theme box.
My second store is actually just selling my book, which is startfreelancing.today. This is a landing page that's been turned into a store that I use the Shopify Buy button for.

JASON LENGSTORF: And that's this one here?

KELLY VAUGHN: If you click that, it takes you down to the "buy" section. Clicking on one of these links will take you to Shopify's checkout with that already in your cart.

JASON LENGSTORF: These Shop Pay, Google Pay, they both store your information and so you can check out without having to do anything, which is very cool and very dangerous.

KELLY VAUGHN: Shop Pay saves your information not specific to the store, but to Shopify. If you visit another Shopify store, you enter your email address in there and they're like, hey, we recognize your information and they send you a six digit code and it takes you to the Shop Pay checkout. Don't click on it right now because people might see your information.
I really like Shop Pay for multiple reasons. It also integrates tracking and stuff so when you when you buy, it's going to show, like, a map and your address and then had the thing tracks, it'll show the tracking information not oh, no. Oh, John, thank you so much. John just gifted five subs so we're going to hear a lot of noise. Thank you so much. Welcome to the Boop Crew. You've also got access to the Corgis. So, yes, so, Shop Pay, it's going to show you your tracking, it keeps things available between stores, which is amazing. I'm a big fan of this. Also, if you're looking at freelancing, there you go. It's a good book. I'm biased, but that's okay. One important distinction to make between Shop Pay, it is that checkout experience. Shopify Pay is a reskinned Stripe. You get decreased credit card transaction fees, you get the fraud protection from Shopify. That is the part when customers are checking out. If you're using Shopify payments, you can enable Shop Pay.

JASON LENGSTORF: I understand. So, if I want to build out a store, what would my first step be?

KELLY VAUGHN: If you're building a store, I would go to Shopify.com, and create a new trial store. You have a 14 day trial to get started. You are all set. However, if you're interested in building a development store, just kind of playing around with Shopify or you want to build a store for a client, I recommend being a partner.

JASON LENGSTORF: Let's look at "partners" and "Shopify.com."

KELLY VAUGHN: You can join. It's completely free and what's really cool is when you launch "stores" you get rev share for the monthly payment that the merchants are paying. So you get 20% of whatever they're paying, every single month, through the life of their Shopify store.

JASON LENGSTORF: That's really cool. I really like, too. As especially in a role like yours, where you're running an agency, you are consistently bringing in new people and kind of setting them up with things and one of the hardest parts about agency or freelancing work is recurring revenue because a lot of times with agencies and with freelancing, you are trading time for money and you only have so much time and there's only so much somebody will pay per hour. If you can do revenue share or affiliate sales, it helps to add that buffer so you have the extra money around so that you don't have to sell every single minute you're away. You can have some vacation and things like that. (Laughter).

KELLY VAUGHN: Yeah. So, one of the other cool things about Shopify, if you don't want to do theme development which is what we'll be looking at you can do app development. If you're familiar with WordPress, it's like a plugin. It's extending the functionality of the Shopify store, whether it's in Shopify's admin, like a product reviews app or an Instagram feed. There are all kinds of things that exist. You can create a Shopify app and connect it to your partner dashboard and then if you apply to have it listed in the Shopify app store, you get a certain percentage of everybody who purchases that app and is paying monthly to Shopify.

JASON LENGSTORF: That's really cool. So, I I have created a new store. I had to create a password, which is why I did that off screen. And we are now am I already selling? I'm just playing around? There's nothing more app than that. (Laughter).

KELLY VAUGHN: Just playing around, but my annual revenue is over $1 million a month. (Laughter).

JASON LENGSTORF: Let's see. "Other food and drink." There we go. And, no I'm not. Okay, can I skip this?

KELLY VAUGHN: You might not be able to.

JASON LENGSTORF: Give me a quick second, I'm just going to put in my info here.
I started typing in my address and auto filled all of those things for me.

KELLY VAUGHN: Yeah, it uses the Google Maps API to pull all that in. Really handy, especially in checkout to.
To talk about Shopify pricing, if you're going through a development store, through your partners account, it has an unlimited free trial. Again, as long as you are not going to be using that dev store to sell your own products, you can use that for eternity.
If you're going to be paying for Shopify, the plans start at $29 a month and this gets you access to Shopify Storefront. It goes to $79 a month and then Shopify+ starts at $2,000 a month. There's a Lite one for $9.99 a month. You're not using Shopify to run your store. You're only using it to manage your backend data, your product, your collections. You can't use the shopping, browsing experience.

JASON LENGSTORF: Would the Lite plan give you access to the API, like, if you were going to do so, if you wanted to build, say, a Gatsby site using Shopify as your eCommerce data, you could do that on the Lite plan for the $9.99?

KELLY VAUGHN: Yeah. I don't think the storefront API requires you to be on the $29/month plan. I'm hoping I'm not wrong about that. I don't see any information about it. So, I assume it's fine.

JASON LENGSTORF: Yeah. It seems looks like it, maybe?

KELLY VAUGHN: Yeah. It would say if you as long as you can create a custom app in the Lite plan, that's all that matters. They don't block apps, I don't think, so...

JASON LENGSTORF: So, this could be an option. And we are not going to do headless today, we're doing Shopify Storefront themes. So there they be a possibility for a follow up episode where we do a headless mode, too.

KELLY VAUGHN: Yes, that would be a lot of fun.

JASON LENGSTORF: That would be super fun. Let's take a look at this. We're using my free trial, where I have access to I assume everything right now?

KELLY VAUGHN: That's correct.

JASON LENGSTORF: We can set up what we want to do. Let me maximum what we do.

KELLY VAUGHN: You're looking at a Shopify admin. This is where the merchant is going to go in and seeing what orders were placed. If you have any apps installed, you're interacting with the apps directly through here as well. I think it's useful for us to create a product so we have some product to work with.

JASON LENGSTORF: Okay. Um, so, let's do Corgi with Spaghetti and then I think what we can do is

KELLY VAUGHN: I hope there's a picture somewhere on the internet.

JASON LENGSTORF: Oh, I've got this. I'm ready.

KELLY VAUGHN: So I see a question about how much maintenance is required. The beauty of it is, Shopify is a SaaS product so they're handling all updates on their end. The only maintenance that would be required is if the client wants to install another app or make changes to their theme that requires custom coding and we'll get into the theme structure in a moment, here, so you can see what can be changed and what can't be changed without actually going into the code. There's a lot you can do without actually touching the code at all.

JASON LENGSTORF: I decided that I'm going to Photo Shop some spaghetti into this.

KELLY VAUGHN: I love it. Spaghetti Factory.

JASON LENGSTORF: Spaghetti Factory.

KELLY VAUGHN: I feel like that one would work well because it has a transparent background.

JASON LENGSTORF: I wish I had sauce. Spaghetti with sauce. Let's open the image. Perfect. It's an iStock, which I think is going to look super cheesy, which is what we're after. And then we can paste it right in here. Perfect.

KELLY VAUGHN: Beautiful!

JASON LENGSTORF: Here's our Corgi eating spaghetti and we can just cut this out, like a Photo Shop pro.

KELLY VAUGHN: Are you keeping the fork in there?

JASON LENGSTORF: Of course I'm keeping the fork in there, how else would he eat?
(Laughter).

KELLY VAUGHN: It's a good visual.

JASON LENGSTORF: So, here's that. The mask, do I put it on top or on bottom? Put it on bottom nailed it. Okay. So, here is our perfect Corgi. I will export this.

KELLY VAUGHN: In the UK, I found access to Shopify really poor. Shopify is fully available in the UK. What do you reckon for a person who is just starting their store and they aren't sure about what revenue. If you are just starting a store, your number is probably zero. The numbers on the form, that's completely irrelevant. It's Shopify being curious about your life and what you're doing.
Pricing section here, the price is what the customer's actually going to be paying. If the item is on sale, you're going to enter in a number higher than what the customer's paying. It's on sale, 50% off, you put 20. Shopify does handle taxes for you. If you're selling virtual products for anything taxes, consult a CPA. You can enter in the cost per item. You can skip that if you don't want to

JASON LENGSTORF: This is actually really interesting. If we were going to post this as a poster, if this was going to cost us $2.85 per poster, we can see whether this is making us any money. That's important because especially a CPA's a Certified Public Accountant. An accountant.
One of the things that gets really tricky, the price of the product is not the only expense. If you're going to spend $4 to make a T shirt and you charge $5, you pay someone to ship it or time. You have to pay for shipping itself. There's packing materials. There's overruns and returns that factor into the cost of the item so you have to sell it for, like you have to sell it for a profit or else you're going to end up paying money to run your store.

KELLY VAUGHN: There's also a cost of acquisition, as well. How much are you paying to get that customer to your store to place that order? You're running Facebook ads, that costs money, too. So, all these things you take into consideration.

JASON LENGSTORF: So, we've got the option to do inventory.

KELLY VAUGHN: Yes. And Shopify does have built in inventory tracking. If you only have 20 of these Corgi Eating Spaghetti, you can show it.

JASON LENGSTORF: We're going to pretend this is a physical product and it weighs .2lbs.

KELLY VAUGHN: A very, very nice poster.

JASON LENGSTORF: That is some thick card stock. (Laughter). Customs information. Wow, this is there's so much in here.

KELLY VAUGHN: Honestly, a lot of these things are things that you can skip unless you're selling internationally, then skip it. Again, accountants will help with this.
Okay. So, variants. So, this is basically what are the product options. Let's say you're offering this poster in small sizes, you can see the option is "size" and then enter in "small, medium, large." You can have up to three options on a product and 100 variants on a product. This is available in three sizes and in 10 colors, you have total variants. If you have five colors and five glittery options, you notice the number of variants, it becomes a lot. So Shopify caps the variant count at 100 for a given product.
For the most part, that works because if you offer your customers too many options, it becomes a little bit overwhelming. You see small, medium and large and you're going to have 60, total, in stock. We upped the price for medium and large, as well.
There last thing on here is SEO. Shopify does built in search engine optimization. If you click "edit website SEO," you can change that to something more optimized for Google. The page title and description that you write here aren't actually beneficial for SEO. This is what the user sees on Google so you want to make it as enticing as possible to get the customer to click on the button click on the link to actually go to your site.
The question I love this. Was it Shopify that supports uploading a 3D model of product? Yes. They recently offered support for 3D support and AR and VR. They gave a demonstration of buying a stroller and let's say a stroller that fits two children, you need to make sure it fits in your house. It'll show the stroller on your phone and see how it looks in your space.

JASON LENGSTORF: That's really cool. Um...

KELLY VAUGHN: For the sake of time, we can go ahead and save this product.

JASON LENGSTORF: Do I need to care about any of this?

KELLY VAUGHN: No, you don't have to. That's if we're going to have multiple collections and sort by product type.

JASON LENGSTORF: We can look at an example later in the show.

KELLY VAUGHN: Click on the "i" next to online stores. So, you have a store. It pulled the title. All this is placeholder information. So, it already installs a Shopify theme called is it launch or debut? I honestly don't remember which right now. This is what we're going to be using. If you click on "catalog," you can see your product.

JASON LENGSTORF: I'm pausing my notifications. Okay. Cool. Here we go. Hey, look! All these things happened. It shows that it's on sale. Let's see...it shows me small, medium and large. Oh, you know what I want to do? I want to make one of these out of stock so we can see it. Let me make this out of stock, so there's no medium. Okay.

KELLY VAUGHN: Hi, Thomas. Thomas and I are doing a Kelly+Kelly four part Twitch on Shopify development. Next week, we're getting into build process.

JASON LENGSTORF: Oh, very cool. I think I did it wrong.

KELLY VAUGHN: Nope. You did it right. Did you save it?

JASON LENGSTORF: Oh, here it is.

KELLY VAUGHN: It automatically updates when you select another variant.

JASON LENGSTORF: That is really slick.

KELLY VAUGHN: We created a Shopify store, we created a product. You can go through and add this to the cart. You won't be able to check out because we haven't connected to a payment provider yet. You're able to see it there and the checkout button is technically there, as well.

JASON LENGSTORF: So for now, I have to pick a plan, I have to edit a theme. This is really, really interesting because of how quickly this all happened.

KELLY VAUGHN: You get up and running very quickly. So, we have this beautiful website that has absolutely just placeholder content on the home page and nothing else so I assume we want to make it look a little nicer. So, let's go back into the Shopify Admin.

JASON LENGSTORF: Here?

KELLY VAUGHN: Yes. And click on "online store." So "online store" is considered a sales channel. This is the $29/month plan or higher. This is Facebook, Amazon, point of sale. The "buy" button is what I use.

JASON LENGSTORF: It just occurred to me you could use this for retail.

KELLY VAUGHN: You can use it I could pull it up on my iPad if it was near me. You can add this point of sale sales channel for free.

JASON LENGSTORF: That's super cool. We can do Amazon, eBay, Pinterest. Can't do wholesale.

KELLY VAUGHN: To explain how this works, you can sell stuff on Amazon via Shopify. It can create Amazon listings from the Shopify Admin using the Sales channel. When somebody places an order on Amazon, it decreases the amount on Shopify.

JASON LENGSTORF: That is the that's, like, the hardest part when you have multiple sales channels. Usually, it's fine. You have 100 in stock and you're making one or two sales a day. If you accidentally sell 50 more than you all, it's like, oh, God, do I have to refund or talk people into waiting six weeks.

KELLY VAUGHN: Never a fun conversation to have.

JASON LENGSTORF: Look, I can even I'm going to disable the password so that I can share this with you all, so you can look at it. This is live now. This is the shop. It's up.
So and as you may have seen, there password

KELLY VAUGHN: Okay. You can enter the password there.

JASON LENGSTORF: Fine. You can put the password in. So that'll let you go look at the store if you want and then I'll I'll select the plan, I guess well, if we get there.
So, for now

KELLY VAUGHN: We're going to go back into Themes. Just a side note, Shopify's also a content management system so you can create informational pages, you can create a blog on here. You can have everything under one roof. So, we are going to customize this theme now. So, thank you, debut is what is installed, by default, when you create a new Shopify store. So we're going to create that "custom" button. So, there are two sections on here: Sections and theme settings. Theme settings are the global changes, changes to fonts, changing colors, all those kinds of things. On the "sections," this is customized based on whatever page you're currently viewing in this Shopify. You can drag and drop the things to go in a different order. These live update. Let's click into that image with text overlay, as soon as you drop it somewhere.
So, we can now update things immediately on here and they will they will update, you know, once it actually syncs up. If you scroll down, you'll see some text fields.
So, what we're doing is we're creating a Hero and you upload your own image there, as well. You see, above, you see three little icons there. The desktop one is selected now. On the left, you see a mobile icon. On the right, it shows a full screen. You get a preview of what your theme looks like on mobile devices, as well.

JASON LENGSTORF: Can you see where it was again?

KELLY VAUGHN: Below "preview," the first one on the left is going to be mobile.

JASON LENGSTORF: Oohhhh! That's super cool.

KELLY VAUGHN: You can come in here and change all of these all of these changes that are built into the theme to start. So, let's let's back out of this theme section, here, and we're going to scroll down to "featured collection." So, let's click on that. And select "collection," "home page." Now we have our product preview there. It automatically created it for you. As you create more collections, you're able to choose which collections you want to feature here. Again, you can change the heading from featured collection to, you know, the only product we have in the store or whatever you wanted to say.
So you'll noting on the Start Freelancing Today store, you see the theme. You save some time there.
But, I think there's a level here that we wanted to actually do some development work. You want to build a Shopify section quickly?

JASON LENGSTORF: Yeah. Of course I do. Let's do this!

KELLY VAUGHN: Let's go ahead and hit "save" on the top right.

JASON LENGSTORF: Should I turn off the other sections?

KELLY VAUGHN: You can just hide them.

JASON LENGSTORF: Oh, amazing! Look at it go! We have this beautiful we could ship this. If we had posters to sell, we could literally ship this right now and it would just work. That is amazing. That is really, really cool that that just works like that.

KELLY VAUGHN: Okay. So, let's talk about Shopify Theme Kit. So, Shopify does not have a proper local development environment so what we need to do is we need to connect locally to your store with your theme that you want to make changes to. So whenever you make a change to a file and save it, it'll automatically upload that file and reflect on the website. We are going to start by installing Shopify Theme Kit. They have installation instructions for both Mac and Windows on here.

JASON LENGSTORF: Okay. My favorite part where I start copy/pasting things in my terminal and hoping for the best.

KELLY VAUGHN: Yep.

JASON LENGSTORF: And while I'm doing that, I'm going to make this smaller.

KELLY VAUGHN: Always, it's updating [Indiscernible].

JASON LENGSTORF: Oh, no! Do we have time for this?

KELLY VAUGHN: It'll be fast.
So now we're going to install
[Music playing loudly]. In order to use Theme Kit, we need to create a private app. So, go back to your store.

JASON LENGSTORF: This one is my store. Okay.

KELLY VAUGHN: Click on the Shopify icon on the top left. This is going to take you back to the admin. And we're going to click on "apps." So, everything on the Shopify App store is considered a public app. This is verified by Shopify. They work and they're not going to break your store and all that, hopefully. But there are also private apps, which is what we're going to be using for development. It's that text below, "working with the developer on your shop." Click on that. Oh, no!

JASON LENGSTORF: Uh oh. Oh!

KELLY VAUGHN: You have to enable it. Whew! That's new.

JASON LENGSTORF: I thought we were in trouble. (Laughter). You have to warn me about these changes. So, because I'm going to assume you've read that and checked that button.

KELLY VAUGHN: Of course, I've read that. It's my favorite bedtime story.
Anybody who has access to your store can access private apps as well.
This is pretty typical whenever you're creating an app that has access to APIs. You only want to give it access to what you actually need, otherwise, you can use the Shopify API to, you know, create products and create orders and delete customers and all kinds of things and we don't want to do that.
Okay. So, we're going to use the Admin API. We don't actually need access to products so we're going to switch that to "no access." Search for "theme." There are a lot of API permissions on here.

JASON LENGSTORF: Wow! Look at all these! This is amazing!

KELLY VAUGHN: You can really get granular. We're going to do "read and write." And scroll down. So there are two different APIs here. There's the admin API, which is what we'll be using to do theme updates. The storefront API is if you're doing a headless build. This gives you access to all that storefront data so you can actually display it elsewhere. You can go ahead and hit "save."

JASON LENGSTORF: Is this going to show a key. You're about to start a private app. I'm pulling this off screen. Nobody look. (Laughter).

KELLY VAUGHN: Once you save it, the password is hidden, but you can copy it. You're going to want to enter in

JASON LENGSTORF: Let me show this because it is useful. So, it created my private app. I just gave it a name that I would recognize and it gives me a public key and then a password.

KELLY VAUGHN: Yep.

JASON LENGSTORF: And then the shared secret, I'm going to have to roll this, I think.

KELLY VAUGHN: Yeah, shared secret, you're not actually using anywhere. You're using the password. You can copy it and hit the "copy" button and once you run through the setup, you're going to want to hide that because you're going to have to enter in the API key, at that point, or the password.

JASON LENGSTORF: Okay. So, this is available to us.

KELLY VAUGHN: This is available. Go ahead and copy that password, if you haven't done that already.
Go back to the Theme Kit instructions.

JASON LENGSTORF: This one?

KELLY VAUGHN: One of these. Okay. So, we are going to get started on go to "commands" on the left side. And we're going to go to let's do "configure."

JASON LENGSTORF: Assuming this worked, I can

KELLY VAUGHN: I jumped ahead.

JASON LENGSTORF: Like this? Theme

KELLY VAUGHN: Yes. So, we're going to do create a configuration file.

JASON LENGSTORF: It's working the way we expected.

KELLY VAUGHN: Thomas, which one did we do for the last stream? I honestly don't remember. (Laughter). This is something I do it just, like, without thinking. It's like driving a car. Okay, I think while I drive, too. I just forget which commands. My fingers do magic. Okay. Let me just pull up [Indiscernible] on my end. Configure an existing theme. That's what we're going to do. So, go to "getting started" again.

JASON LENGSTORF: Here?

KELLY VAUGHN: Yeah. And click "configure an existing theme." So...we are going to

JASON LENGSTORF: I do "theme, get list."

KELLY VAUGHN: The password is going to be your API

JASON LENGSTORF: I think I can put this in my environment so I can use it as an environment variable. Let's do, like...

KELLY VAUGHN: I also dressed for the occasion, just so we all know. I'm on brand.

JASON LENGSTORF: Okay. Trying to remember I'm very bad at Bash.

KELLY VAUGHN: Same.

JASON LENGSTORF: Let's see if I can do this. Shopify API um, okay. So, whatever I've done was wrong.

KELLY VAUGHN: Do you want to create the

JASON LENGSTORF: Let me make sure that I just didn't break my whole environment. Okay. We're good. So what I'm going to do is I'm going to run this theme "get list."

KELLY VAUGHN: If you want to save a step, for not having to run the list command, we can grab it from Shopify. Go back to where the online store view that shows one of these windows. We're we're turning into a million tabs here. I think it's the last one. Oh, no, not that one.
Go to "online store."

JASON LENGSTORF: This one?

KELLY VAUGHN: Yep. And then you're going to click "customize" again.

JASON LENGSTORF: Here?

KELLY VAUGHN: Yep. And you're going to see an ID pop up in the URL and that's what you're going to use. You're going to remove "list t."

JASON LENGSTORF: So, no okay. So, I need

KELLY VAUGHN: Now this is going to download a theme from Shopify, so make sure you're in the directory you want to be in.

JASON LENGSTORF: Is it going to create a directory?

KELLY VAUGHN: It's going to create a folder inside there, theoretically. Again, we've built our own build process at this point, so...

JASON LENGSTORF: So, I have Corgis Eating Spaghetti. My Shopify.com. And then the "T" is the theme.

KELLY VAUGHN: Yep.

JASON LENGSTORF: Do "init." It's going to work. As soon as it stops showing my password on screen, I'm going to pull it back over. In the meantime, we wait.

KELLY VAUGHN: All the times when I wish I had jokes I could just pull out.

JASON LENGSTORF: I know. I usually just do an awkward dance.

KELLY VAUGHN: I usually create elevator music and it's terrible. (Laughter).

JASON LENGSTORF: As you have heard, we have elevator music on command. (Laughter). Um, almost there. 91%. Ryan's ready with jokes in chat. 99% 100%.
Uh oh!

KELLY VAUGHN: What did you do?

JASON LENGSTORF: Well, I put it in the wrong folder. You were right. (Laughter).

KELLY VAUGHN: Small details.

JASON LENGSTORF: I put it into a folder with a whole bunch of other stuff so I might reclone it.

KELLY VAUGHN: Fair enough.

JASON LENGSTORF: Let me get into this

KELLY VAUGHN: Angie, if you're still tuning in, thank you for posting that screenshot of me poking my nose. That was perfect timing. (Laughter).

JASON LENGSTORF: Okay. It's going to faster this time. It's mostly cached. We're already at 50%, so just bear with me.
What do you get when you cross an elephant with a rhinoceros?

KELLY VAUGHN: What do you get?

JASON LENGSTORF: I think I know this one. Where you at, Ryan? Elifino. Kelly doesn't care, at all, about that joke.

KELLY VAUGHN: I'm sorry. It was a work thing. (Laughter). The government keeps calling me about the loan I didn't accept.

JASON LENGSTORF: Oh, fun. Okay. We are at come on, come on, 900%.

KELLY VAUGHN: Elifino. That's good. I just caught up. (Laughter). I never claimed to be on top of things.

JASON LENGSTORF: It's frozen at 99%. I am concerned. Nooooo! Stop! Uh, yeah, so, this is a question: Is the theme cloning, that's pulling everything with the assets API?

KELLY VAUGHN: That's correct. Yep. It's great that have Shopify developers and developer advocates in this chat because I can sit back and tell people what to do and not answer anybody's questions.

JASON LENGSTORF: Why are you frozen on me? Okay. We got it. We got it. We got it. We got it. I'm going to pull this back over and we'll just open this up in VS Code.

KELLY VAUGHN: This is the theme structure. Don't open the theme file. It contains all the information you need. You can create multiple development environments, change which theme is active on there. The rest of the theme structure, you've got your assets folders that contains your style sheets, your JavaScript, any kind of images that are uploaded. That kind of stuff goes here.

JASON LENGSTORF: Sorry, I'm going to do a quick thing. I have everything ignored in the top level folder, to not commit those, which was dimming everything. Let me reopen it. Now we can see.

KELLY VAUGHN: Awesome. Okay. There we go. All right. The config file contains what are going to be your theme settings and sections. Those contain, like, what you actually selected. Setting schema is the theme setting tab. The themes data is all the themes used in the theme sections, all of the information. It's JSON format.
And then, Shopify does offer support for offering gift cards and the password.

JASON LENGSTORF: Cool. Okay. Very cool.

KELLY VAUGHN: As Thomas clarified, section settings are within the sections setting themselves. The settings section contains the data set within the sections, within the theme customizer. I'm just drawing you a map.

JASON LENGSTORF: I got you. And so this is there's a whole bunch of

KELLY VAUGHN: Tons of things.

JASON LENGSTORF: And the labels are all localized, which is very, very cool and also very kind of hard to parse. My suspicion, here, is that it's probably best to do this part through Shopify?

KELLY VAUGHN: No. So, you actually still do it through here. When you're starting a theme from scratch, it doesn't have all this localization. If you open the locales folder, you can see more information about, like, the language settings.

JASON LENGSTORF: There's a ton of locales in here, which is great. This store, by default, is going to be available globally.

KELLY VAUGHN: Exactly. Yeah.
So, next folder, here, next directory here is "sections." These are going to be what you just played with on the home page, dragging and dropping those different sections. But also, sections that are linked to each template. So, like, the footer.liquid file sorry. Product.liquid is a template file and you'll see a reference to a Shopify section called "producttemplate.liquid." If you go so, that just contains scroll all the way to the bottom of the file. And there are all the sections. These are the theme settings specifically for the product page.

JASON LENGSTORF: Oh, I get it! If we're in

KELLY VAUGHN: Click on "home page," the little drop down above the logo. Yeah. Go to "product pages." You see that "product pages" section?

JASON LENGSTORF: Yes.

KELLY VAUGHN: Those are the settings you're seeing within that file.

JASON LENGSTORF: So, we've got

KELLY VAUGHN: If you search the word "quantity," for example

JASON LENGSTORF: Can't spell it though.

KELLY VAUGHN: "Show quantity selector."

JASON LENGSTORF: And then the definition is now here. So we've got our label.

KELLY VAUGHN: So the label is how it appears in the theme settings, be "show quantity selector." You have text, text, rich text, color, product, collection, all kinds of fun things. Shopify's documentation for this is super, super detailed and really helpful for understanding Shopify sections. You can set a default value if you wanted to.
If you go to on your sidebar, scroll past the "sections" directory. Next, you have "snippets." So, "snippets" are React components and things that are reusable.

JASON LENGSTORF: Got it. Sort of like what you would think of as a short code in WordPress or a component in React or Vue. Very cool.
So, cool. Let's do hey, [Indiscernible], can you check the chat for me? Nickie, you asked a question about getting these changes live. We're going to get there. So, stick with us.

KELLY VAUGHN: So okay, let's go ahead and run "theme watch." If you want to run it directly in here.

JASON LENGSTORF: "Theme watch."

KELLY VAUGHN: So now oh.

JASON LENGSTORF: Do I need to do this?

KELLY VAUGHN: Yeah, "allow theme flag." Usually you're not making changes to a live theme.
Let's go into "theme.liquid." It's the top one that you see up there in Layouts Directory.

JASON LENGSTORF: Sorry, I was reading the chat.

KELLY VAUGHN: Open up "theme.liquid."

JASON LENGSTORF: Theme.liquid, in here?

KELLY VAUGHN: Yeah. This is the theme structure of your store. Everything is in here. So, go ahead and scroll through the page a little bit.

JASON LENGSTORF: Okay.

KELLY VAUGHN: Scroll through the code here.

JASON LENGSTORF: And so this is these are Liquid templates so we're able to include smaller pieces?

KELLY VAUGHN: CSS variables and meta tags are examples of snippets.

JASON LENGSTORF: Got it.

KELLY VAUGHN: It is HTML. This is really to me, of course, I've been doing this for six years now. To me, it's a very readable kind of language to kind of parse your Shopify data.

JASON LENGSTORF: Yeah. Yeah. That makes sense. Liquid was developed by Shopify, right?

KELLY VAUGHN: Yeah. It's used by other libraries, as well. But Shopify has really built its own Liquid.
We've officially reached the body. A couple of things that are going on here, you see a section header and section footer. These are examples of Shopify sections that were in that "sections" directory. You see "content for layout." Depending on whatever page you're viewing Shopify's going to display the appropriate view for that page.
Let's go ahead and add text somewhere on the site. Let's add it above the "main" tag. Like an H1 tag saying, "hello," or whatever.

JASON LENGSTORF: Oh, boy. I just reformatted everything. Okay, we can go look at the store. This was out here.

KELLY VAUGHN: Yep. You need to refresh it.

JASON LENGSTORF: Refresh.

KELLY VAUGHN: Oh, hello, Chad.

JASON LENGSTORF: Immediately live. That is slick!

KELLY VAUGHN: So okay. So, you'll see I see questions about the structure of Liquid tags. Let me put in Shopify.dev and Shopify Cheat Sheet is a really, really handy cheat sheet that Shopify built. Where was I? Which contains the different the different tags that you can actually use across the site. Including the iteration tags and the operators and different types and control flow tags and all the all the things.

JASON LENGSTORF: Uh huh. And I think Liquid is one of those things where it starts out looking pretty confusing and after you've done it a few times, it starts to feel pretty straightforward. You know, it just introduces some new, like, characters, like the double curly brace for variables and stuff like that. It's pretty nice to to use once you get the feel for it. This is also what I use for if you build an Eleventy site, Liquid is one of the templating systems.
Cool. So, we have

KELLY VAUGHN: I'm going to answer some questions that are showing up right now. One question: It's not good to do changes directly on a live site. When you run Theme Watch, you saw it warned you and you had to allow the live changes to the site. Second, Shopify actually allows you to create multiple themes. Only one is published on the site, the rest are unpublished. You can reference an unpublished themes ID and preview the theme as you need and you never have to worry about overwriting it.
And then

JASON LENGSTORF: So, here, then, if I were to should we show that real quick, just adding another theme?

KELLY VAUGHN: Click on the Shopify icon again.

JASON LENGSTORF: Shopify icon. Themes.

KELLY VAUGHN: Yep. So, ummmm, go to I guess we can just install another theme. Go to "explore free themes" just to pull up another one. I also see questions about scaffolding. "Reference to Slate" was an opinionated framework. It is no longer supported. RIP. I miss it. We've since built our own build process. Next week, Thomas and I are doing an episode on Twitch I do podcasts, I don't know what they're called. Twitch streams. We're doing a stream on basically going through the build process

JASON LENGSTORF: What's the link for it?

KELLY VAUGHN: I think it's twitch.tv/Shopifydevs.
I also promised at the first Shopify Partnership Town Hall that I will share my build. I will be sharing it next week.

JASON LENGSTORF: Nice, nice. So, I have a theme. We have "debut" and I just added this.

KELLY VAUGHN: You can preview that theme and see exactly how it works. If you go to the catalog, you'll see your product there.

JASON LENGSTORF: This is different from you can see, like, this one shows the sale up at the top right. It's got some different fonts and settings but it, in general, you know, it just works. And this is a I'm in a preview.

KELLY VAUGHN: Yes. So the URL structure you see in the address bar is the exact same as it would be on your live store. The only way you know you're previewing, you see the bar. If you want to share this preview with a client, you click the "share preview" button and it creates a unique URL to share the site.

JASON LENGSTORF: So what you're saying is if you were to let's say we we have this theme and we wanted to make modifications, we could just duplicate this and upload it as a new theme and then use the the "watch" tool and have a dev version we could send? So that would be a workflow we could use to let clients see the changes without having to publish it?

KELLY VAUGHN: We're never touching the live theme. And we just have, like, a naming structure for the themes we use so, you know, we each have our own dev themes with our names on it that have "dev" in brackets. But we have v1.1 and the major change that was made for that so we can keep track of everything that was happening on there.

JASON LENGSTORF: Nice. Very cool. This is super exciting and, like, what we've done here, with this tool, is we've effectively gotten to the point if we were just setting this thing up this is our first action, nobody's looked at it yet. We make changes, when we save them, they automatically go live and as we get more mature, we would have a dev version once it's approved. This is a pretty good, like, crash course.
Are there any specifics that you think are really worth calling out here, or digging into, as we kind of head toward the end. We got about 20 minutes of time on the clock. So, if there are any highlights that you want to show up, now's the time.

KELLY VAUGHN: Hmmmmm, I think maybe creating a snippet or creating a section might be useful. I'd be interesting seeing, in the chat, what others would like to see in the last 20 minutes that we have here. My default is "create a section." They create a section, I know it can be a little bit confusing.

JASON LENGSTORF: What if we did this, what if we put together a sale banner? Instead of this "oh, hello, chat," we could put together a peek banner where people can see, we're running a sale until August, buy now. That sort of thing? And that

KELLY VAUGHN: Okay. Yeah. Let's call it a promo bar. And we're going to let's create a new section. So, this section is not going to exist on the home page, it's going to be a global section available, no matter which page you're viewing. So, I think it's going to be helpful pulling up the section documentation so you can see the structure of it.

JASON LENGSTORF: Section documentation. Building themes.

KELLY VAUGHN: So we need to basically create the schema for creating a Shopify theme section.

JASON LENGSTORF: Where should I look for this?

KELLY VAUGHN: I'm going to send you a link here.

JASON LENGSTORF: Can you drop it in the Twitch chat?

KELLY VAUGHN: Okay. So, here...

JASON LENGSTORF: Use sections. Okay.

KELLY VAUGHN: So, there are three major parts to the themes section. The first is going to be a schema. This is where we're going to set up the settings we want to have available to the merchant to make changes. The next is the JavaScript style sheets. If you want section specific JavaScript or styling, you can do it directly within the section file. We're going to build out schema. I think you can click on the schema tag and it'll take you down to that section. Yeah.
Okay.

JASON LENGSTORF: So, I would do

KELLY VAUGHN: Yes. So, okay, we're going to start with that base yep. Always open closing schema tag.

JASON LENGSTORF: And then it looked like it was a JavaScript object, or a JSON object, I should say?

KELLY VAUGHN: Yep. So, first, we're going to name it. We'll call it "promo bar." And now, hit "comma." Actually, let's go ahead save that. Go to "theme.liquid."

JASON LENGSTORF: Theme.liquid.

KELLY VAUGHN: And, we are going to add the promo bar section. So, you're going to look for "section header," which is a little bit further up. "Section quote header." It's not going to be "equals." Try a single quote. Boom! Okay.
So, there's our section header. So, above that, we're going to add section what did we call it? Promo bar.

JASON LENGSTORF: Section. Promo bar.

KELLY VAUGHN: Go ahead and save that. And just for fun, go to the promobar.liquid file and we're just going to add above the schema, create, like, a div, that contains the text promo bar.

JASON LENGSTORF: Jeez, my phone's yelling at me. Any HTML?

KELLY VAUGHN: We're creating some kind of element in here.

JASON LENGSTORF: So we could probably do it like...everything is on sale.

KELLY VAUGHN: Yes.
So, go ahead and save that. And now let's go back to the store.

JASON LENGSTORF: Back to the store, which is here.

KELLY VAUGHN: And refresh.

JASON LENGSTORF: And, refresh. There's our promo bar.

KELLY VAUGHN: There's our promo bar. So go to the theme customizer. We're going to be jumping around a little bit here. It'll be worth it.

JASON LENGSTORF: I believe it.

KELLY VAUGHN: You see your new promo bar section on there. Go back into your code.

JASON LENGSTORF: Promo bar?

KELLY VAUGHN: Yep. And you're going to go "comma," "settings." And this is going to be an array. Okay. Now, we're going to create an object inside this and we're going to set the type to "text." Going to set the ID to "title." And we're going to set the label to "promo bar text."

JASON LENGSTORF: Okay.

KELLY VAUGHN: Okay. Now, delete the text that you just added inside that paragraph tag and we're going to add the double braces and say "sections.settings. Title." Might be "section," singular. Sorry. Go ahead and save that.
You might get an error. Go back to Theme Kit or the yeah. It's the the formatting sometimes breaks the schema.

JASON LENGSTORF: Yeah. I think what I just did was I I have to do the "save without formatting" thing.

KELLY VAUGHN: Go ahead and refresh the Theme Customizer. Something didn't update.

JASON LENGSTORF: Invalid JSON tag schema.

KELLY VAUGHN: Delete the comma after "label." Yeah.

JASON LENGSTORF: Done. Done.

KELLY VAUGHN: There we go. Okay.

JASON LENGSTORF: And....

KELLY VAUGHN: Go into "promo bar." We created a section that has a variable and it would look just like it did before.

JASON LENGSTORF: That is super cool and if we move back, we can see that's all good. I can save that text.

KELLY VAUGHN: Yep.

JASON LENGSTORF: And then what if we want to, like, style this? Do I throw a style tag up top?

KELLY VAUGHN: Okay. So we're going to change it from a paragraph tag to a div, or delete the paragraph tag. Either way. And we're going to change the type actually, go back to the Theme Customizer and delete the text you just added in there. And save. Okay. Now, go back to the code. And, we're going to change the type from "text" to "rich text."

JASON LENGSTORF: Like that?

KELLY VAUGHN: Yep. And, go ahead and save.

JASON LENGSTORF: Okay.

KELLY VAUGHN: And, refresh. It didn't update. I think you may have refreshed too quickly.

JASON LENGSTORF: A ha!

KELLY VAUGHN: You can bold, you can italicize, you can add a link.

JASON LENGSTORF: Okay. So, if I wanted to say "everything is on sale until October 1."

KELLY VAUGHN: Let's say, "buy now."

JASON LENGSTORF: Okay. Now, highlight the "buy now" text and let's add a link. So, Shopify can automatically add, like, categories here, what kind of link you want to add. Now we can link directly to the home page, the product. Once you save that...that's cool.

KELLY VAUGHN: Thomas, yes, please, especially for the schema. I can't express how many times I start leading chunks of schema before I see if the error goes away.

JASON LENGSTORF: I got a question about oh, no, can I do this how do I do this? What's the emoji bar?

KELLY VAUGHN: Why don't I remember what it is? I use it literally every time.

JASON LENGSTORF: I'm drawing a blank.

KELLY VAUGHN: Same! It's ctrl+command+space.

JASON LENGSTORF: All right. So, this is now set up where we've got rich text, which is super cool. Now, if I wanted to, like, make the div, you know, blue or something

KELLY VAUGHN: Okay.

JASON LENGSTORF: Can I stick styles right into this snippet or do I put them somewhere else?

KELLY VAUGHN: You had the schema tag, you can add a style sheet tag.

JASON LENGSTORF: Like this?

KELLY VAUGHN: Yep. And if you want to add a SaaS support, you can add a single quote to the first one, single quote, CSS. Up to you.

JASON LENGSTORF: Like that?

KELLY VAUGHN: Yep. Okay. So now we can say added.

JASON LENGSTORF: Like, make the background blue. No! Stop helping!
(Laughter). Okay. And then I'm going to use the public one instead.

KELLY VAUGHN: Yeah.

JASON LENGSTORF: It didn't like my thingy.

KELLY VAUGHN: Looked fine to me.

JASON LENGSTORF: Oh, I didn't save. Those changes are saved. Now, if I reload....

KELLY VAUGHN: [Indiscernible] not changing.

JASON LENGSTORF: I'm not going to try to inspect the code. I feel like that's going to be confusing.

KELLY VAUGHN: It's what I would do. You can add style tags if you wanted to yeah, let's try it.

JASON LENGSTORF: Criminy sake! Try this one more time. Let's see if it was just the CSS. It was. The SaaS didn't like it. So, we can make this color, white. And then do the promo bar "A" will be color inherit and font weight bold and that should

KELLY VAUGHN: So, for adding custom fonts, you can it depends where you're getting the fonts, if you're getting them from a CDN, you get that from theme.liquid. If you're uploading custom fonts, you can upload them into "assets" and reference those global fonts.

JASON LENGSTORF: I think the refresh might just be

KELLY VAUGHN: Try there's a paragraph tag that it automatically wraps that in. It could be that.

JASON LENGSTORF: Oh, okay.

KELLY VAUGHN: I don't know why it's not updating.

JASON LENGSTORF: It partially updated. I think there's a specificity thing going on. It is

KELLY VAUGHN: Oh, yeah.

JASON LENGSTORF: It didn't like my colors. I do think it's just slow to update because now it's picked up part of the styles, but not all of them. So, like, it picked up this color inherit. So, I think it might just be that it takes a second for it to clear.
But, that is fine.

KELLY VAUGHN: Oh, oh, go back to your code. It's not

JASON LENGSTORF: Oh, jeez.

KELLY VAUGHN: Thank you!

JASON LENGSTORF: Trying to blame Shopify. Absolutely not Shopify's fault.

KELLY VAUGHN: Why is it not updating? Because the link was picked up.

JASON LENGSTORF: Yeah, the link was picked up.

KELLY VAUGHN: Yeah. Definitely slow to update. Promo bar. That is correct.

JASON LENGSTORF: Promo bar. "P." That's okay. We get the gist. It looks like it needs just a little bit of time to think and that is fine and probably this comes down to me doing CSS wrong, more than anything else.

KELLY VAUGHN: It's not even showing up there, but anyway.

JASON LENGSTORF: We'll get that. But, that is super cool. We were able to get this in there. We were able to get it to mostly cooperate. We can go in here and changes this text. Like, oh, no, we changed the date, it's available until it's available until Friday, go faster!
That and.

KELLY VAUGHN: And eventually your promo bar will update in the customizer, as well.

JASON LENGSTORF: Oh, yeah, it'll update in the Customizer.

KELLY VAUGHN: So many tabs.

JASON LENGSTORF: So many open. If I hard refresh in here, there's that. So, what

KELLY VAUGHN: Yeah.

JASON LENGSTORF: Yeah.

KELLY VAUGHN: So, cool. You just created a Shopify store. You created a product, you downloaded a theme, you made changes to the theme.

JASON LENGSTORF: This is amazing. I'm very impressed with how quickly this happened and it's really, really nice. Oh, look, I had to mess with it a little bit and now it came back.

KELLY VAUGHN: Oh, okay. You had to save again. Who knows. Yeah. (Laughter).

JASON LENGSTORF: It got there eventually. This is wonderful, right? This is super cool that we were able to put this together this quickly and we were able to get something like this kind of stood up on the order of under 90 minutes, including screwing around and Photo Shopping Corgis.
For someone who wants to take this further, where should they go next?

KELLY VAUGHN: So Shopify.dev is the grand source of information that you could possibly need. It's a really great place to start, going through the detail about how to build themes and how to make those customizations. The let's see if you became a Shopify partner, there's a Shopify partner Slack channel. You can also join our Twitch stream next week as we go through the build process and ask questions on Twitter, the Shopify Developer community is always super happy to help.

JASON LENGSTORF: Cool. If somebody wants to learn more about you, where should they go?

KELLY VAUGHN: You can find me on Twitter and on my website and The Taproom. You can find Ladybug Podcast. The Taproom's website is built on Shopify. Commerce Tea is also built on Shopify. My merch store. And, my freelancing book is startfreelancing.today. I have a lot of websites. (Laughter).

JASON LENGSTORF: I feel like I missed at least two of those. Yeah, there are a lot of places to go and find more information about Kelly.

KELLY VAUGHN: I think everything's linked on my own personal site.

JASON LENGSTORF: This one? Yes.

KELLY VAUGHN: Yeeaahhh.

JASON LENGSTORF: Go there.
This was super fun. I had a lot of fun doing this. I think that we just kind of scratched the surface but we showed that this is a very [Indiscernible] problem. If you have clients and they have lots and lots of opinions about how they're going to edit/copy, move things around, this is a really flexible way to let people do that in a visual way while not giving up your control as a developer and having a local workflow. So, I am I'm really excited about that.

KELLY VAUGHN: Me, too. Because I do it every day.

JASON LENGSTORF: Yeah. So, this was a lot of fun. Kelly, thank you so much. I need to do a quick shout out. We have live captioning going for all of our shows and that is made possible by White Coat Captioning. And, the captioning costs are covered by Netlify, Fauna, Sanity and Auth0, who all chip in to make this show more accessible to more people, which warms my little heart.
Make sure you go out and check out our schedule. We've got so much going on. We've got Emma coming on next week I'm going to try to talk her out of her opinions about Taco Bell.

KELLY VAUGHN: It's a losing battle.

JASON LENGSTORF: We have Ben teaching us about React with TypeScript. Take a look at the schedule. It's going to be so good. Come hang out with me. With that, I think we're going to call this episode done. Kelly, thank you so, so much for being here.
Chat, thanks so much for hanging out. Stay tuned, chat, we're going to raid. Until next time.

KELLY VAUGHN: Farewell!