The Podcast
Video
Show Links
- Chama Valley Meat Co - https://chamavalleymeatco.com/
- ChargeTech - https://chargetech.com/
- Shopify Dynamic Sources Documentation - https://shopify.dev/docs/themes/architecture/settings/dynamic-sources
Help the Podcast
- Apply for Shopify Store Consult - https://jadepuma.com/pages/podcast-consult-application
Transcript
Hey, Scott Austin here. This episode has an accompanying video, so if you're listening to the audio version and are more of a visual type of person, go ahead and check the show notes for the link to the video. Last podcast episode I did was about easy, powerful filters on your collection pages, and we did that by augmenting our products with meta fields and structured data to make it easier for us to build out the filters.
This episode is a follow on to that, we're looking at doing is building more maintainable pages in products and collections inside of our theme, right With online store 2.0. More content is now stored in our themes. We're adding new sections and each section has its own content in it. And there's this concept called dynamic sources. And with dynamic sources, we can connect all these settings in our themes to these dynamic sources. So it's easier for us to maintain them because what's been happening as you're building out these online store 2.0 themes, you end up having lots and lots of templates. It's quite common to do a unique template for every single page and multiple templates for products that you're doing different things at the product level.
So let's say that in your pages you have a banner image section that you've added and you have to manually type in the page title on every single page that has its unique section. And that's where these dynamic sources come in. If you go into your theme customization in your Shopify admin for your theme, and it's an online store 2.0 theme over on the settings if you pick on a section in a template that you're looking at, whether it's a product page, a collection page, or a generic page, some of the settings will have a little icon next to that looks like a can, and that's an icon for database.
And that icon, if you click on it, will open up your dynamic sources that are available for that setting. Not every setting will have a dynamic source, but you'll see these little can icons in your settings. And it's fun just to click on them and see what data is available to be used in that setting. And every time you click on an icon, depending on the setting, you're going to get a different list of content that's available because the theme and Shopify are smart enough to know that this setting uses this type of information. That type of information could be a color, a file, a texturing, and it knows that these entities and entities is kind of an abstract word.
What I mean by entities, it could be metaphor fields or the page title or something like that, right? Shopify in the theme are smart enough to know that at this level I want a color string. So it brings up all the data values from these dynamic sources that use color, or this is a texturing and I'll find everything. It's available at the setting level that is text and it'll show you those options and you can pick one.
Now these dynamic sources come from multiple places, so your entities in Shopify, like a product, a collection, a blog article, they all have values or entities, right? They all have data that could be products title or collection title or page description. All those are entities that can be used in dynamic sources. In addition to that, we can add all sorts of meta fields which went into in-depth in that last episode about how to create better fields and use those meta fields for filters. We can do the same thing here for content inside of your themes.
And then the last place that this content is coming from is a newer feature in Shopify called Brand Settings. So in your Shopify store, if you go into your settings, which is in the lower left hand corner in your Shopify admin and you look at the list of settings, there's one down near the bottom called brand. And if you click on the brand settings, what you'll see is you can set certain things like logo and you can have two different logos, a horizontal one and a square one. You can also do colors. You can have up to five different colors that you're specifying, and you can do something like a motto or a slogan, which is just a texturing. These data values are also available inside of your dynamic sources, inside of your theme customization. So you get these three different places. This content can come from.
It can come from the entity that you're looking at a product, for example, or the meta fields for that entity. So the product fields or from the brand settings that are available throughout your theme. So let's talk about some ways to put that to use. And the first example I'll give is on pages, just generic pages. Like I said before, what I'm doing a lot these days and I'm making a unique template for every page because I'm going to do a image with text overlay. At the top is a banner at the top of that page.
And what I was doing before I started using this method that I'm explaining here is on every single template, I would type in the words, So let's say I'm doing the return policy for a store. I would have an image with text overlay banner for that page and that specific return policy template. And then I would type into the heading of that return policy. But now what I can do is I can have one page template for all of my pages that are just having an image of text overlay as the, you know, unique content that is in that page. And instead of having to type in that heading and change it for every single store, what I do is I go into image text overlay section, and then I click on the dynamic source for the heading. And it allows me to pick the page title.
And that way, if you end up having, let's say, four policy pages, one for shipping, one for returns, one for privacy and one for terms of use, and they're all going to have the same images. As for the banner, you could have one template for all four of them using this dynamic source to change out the title that's inside of the banner. And then you can also connect another dynamic source there, and that could be color. So remember I talked about in the brand settings, you get to specify five different colors. So you can pick a color selector. So it's like the text background on the banner, you could pick a dynamic source for that and go to your brand colors and pick list to say the primary color and use that. And that way if you change your color for your brand, you can change that in one place, the brand settings and it'll propagate out to everywhere you've connected that brand setting to content inside of your theme, and that can be a big timesaver in the future.
If you wire your themes up really well with the structured data now, not every time where you want to connect a data source well at work, and I'll give you an example of that in the brand settings in a store that I'm looking at on the screen right now, I've defined a slogan in the brand settings that I want to use on the home page in the banner image. So if I go into my theme customization and go to my home page and click on the section with the image or text overlay where I want to put that texturing, or if I scroll down to the heading area for whatever reason, I don't know why this is. There's no icon
next to this heading so that I can connect to dynamic source. There is an icon for the pre heading in the subheading, but not one for the headings. So in this situation I've got the content in the brand settings under slogan, but I can't connect it to the theme. So as you're going through your theme, you know you'll see the icons and you should use them whenever you can, but sometimes they'll be situations where you can't use them and that just is what it is right now.
And I'll give you a little bit more advanced of an example and in this one on a product page, what I have on the product page for all the products is a standard piece of content that's about the brand. It's not about the product set the brand level. What I wanted to do was change the heading for that just a little bit. So in this store we're selling meat and we have three types of meat. We have beef, yak and lamb. And what I want to do for the heading is I want to I want the heading to say why this is the best tasting beef you've ever had. If the product is beef, I want it to say why this is the best tasting yak you've ever had if it's yak and the same thing for lamb. So I already have a Merrifield for meat type that I use in the filters from the last episode. You know, I showed you how we built that out. So what I did in this situation is in the heading, I actually typed out the text why this is the best. And I left a blank space you've ever had. And then in the middle of that, I just inserted the dynamic value for meat, which is a Merrifield. So 90% of the text on that line is the same for all products. And just one word changes based on the meat meta field that we've already defined and put in place in this store.
And another example I'll give you is in a different store where we have on their product pages lots of videos for each of the products. And each product has its own videos and we're storing those videos that are stored on YouTube. We're storing them in meta fields. But unfortunately in my video section, in the theme that I'm using, I can't connect the YouTube URL to a dynamic source. So I had to do that by doing a code edit to this section. In this video is for a case study and some products have a case study, video and other products don't have a case study video. So what I did in this section is I made the title of it the heading case study video. So they all say a case study video. But underneath that, for the subheading, I connected the dynamic source for title. So it uses the product title and puts that in as the subheading. So every page, every product that has a video, it says case study video, and then it's got that specific title for the product underneath that.
And another thing I had to do in code for this one was if the Merrifield didn't exist, then don't show the section at all. So I had to do a couple of code edits to get this section working the way I wanted, but by using the dynamic sources, it made it easier, more scalable for me, so that one section I could apply across all of my products and not have it be unique content every single time. Because in one place we're pulling a Medfield in the liquid code. In another place we're pulling the title from the dynamic sources.
Now, one scenario I haven't done yet, but I think I'm going to be doing it in a store that I'm working on right now is using dynamic sources to define a CFC class. So in my settings, in my section, I get to add a CSS class. So I could have a dynamic source pulling from one of my metal fields or, you know, pulling from the product vendor, for example. So maybe we want to have a different color scheme based on the vendor for our products in our catalog. So we could easily use the vendor field, add that as a success class so that we could then go into our CSV file and then add the CSA settings that are appropriate for vendor. Let's say we have two vendors, Company A and Company B, we could have that vendor dynamic source Occupy the class inside of that section. And then in our CSC file, we could have CSA settings for DOT Company A and then company B, the classes are set there, and then you could change whatever colors you want. That could be the background colors, the text colors or any other sizes, properties that you want to.
Like I said, I haven't tried that one out yet, but I'm pretty excited. We tried on a project that I'm working on right now. Now these dynamic sources are super powerful and they make building your theme and getting that constant filled out a lot easier once you wrap your head around how they work and there's a little bit of a learning curve, I highly recommend you get in there and just start playing with it and seeing, you know, what the values are and how you can manipulate them, how you can add meta fields where you need to to do what you want to do. But it's not a perfect solution. It doesn't work in every situation. So some of the limitations that I found is that not every theme setting will have a dynamic source. And that was the example I gave you on the home page where I wanted to connect the brand slogan to the heading. And I couldn't do that just because it just wasn't there, that what the connection was there. Another thing is, if you're using meta fields, there's no way in the way that themes are structured today that if that Medfield is blank, that it just won't show that information or that section. You've got to go into liquid code and make those edits. If you want that level of flexibility in the templates that you're building out. There are also limits on how many dynamic sources you can have. The limit is 50 for a section and 100 for a template, and those limits are pretty high. I've never I've never hit those limits, and I doubt you will either.
Now I'm recommending that you look into dynamic sources for maintaining your store and your theme. And there's three big reasons that I think they're very useful. The first one is that it reduces the number of unique templates that you have in your store and remove some of the content being stored from the template level into the Medfield level. So by having less templates, our store is a little less complex for us to wrap our heads around and try to understand where different data and values are set. Second benefit is now that we're storing data in Medfield that used to be stored in the theme settings in Medfield Fields, it's easier to maintain them because you can go into, for example, in products, you could do a bulk edit view of products, add the different Medfield you're looking at into your spreadsheet view in bulk, get it in quickly. Just run down a list of all your products in row by rows if that Medfield is filled in what it's filled in with and edit and update that content.
I have in-built tools for my clients where we just show a list of any products that are missing the Medfield being set so that way they can quickly see, Oh
, these products are missing this Medfield, let's go in and edit those and get that content up to par. And the last reason that these dynamic sources are so valuable is once you start connecting these pieces together, it's easier to maintain your store and propagate changes out. For example, I was talking about colors before. If you're using the brand settings for colors and using that throughout your store, if for whatever reason you tweak the hex code of your color a little bit for your brand or even drastically change that color code, you can change that setting in one place in the brand settings and it'll propagate out to the probably hundreds of places that you're using that color inside of your theme settings. And that becomes super, super powerful. Same things with something like a logo, right? You don't change your logo that often, when you do, if you're using the brand settings and using that as your dynamic source, wherever you're showing the logo on your site, then you can just change that in one place and it'll propagate out across all of your theme settings.
Now, wrapping your head around all of this is not the easiest thing to do. I highly recommend that you just get hands on and play with it a little bit and think it through and you know you're going to try something and it'll work and you'll keep going. You'll try something else. It won't work. You have to rethink how you're going to do that. Try it again until you get it to work. But the end result will be a store that is much more scalable and easier to maintain than if you left all of that content out at the theme settings level. So hope that helps. Thanks for listening.