Here's how to a section to the Flex theme in a Shopify store that will allow you to easily promote a product on an article page.
Setup steps:
- Add article__featured-product section to the theme code.
- Create the 'article.metafields.jadepuma.featured_products' metafield definition.
Code for the Custom Liquid Section
This code is for a section for the Flex theme. If you are using a different theme, you may need to adjust the code accordingly.
Transcript
Hey, Scott Austin here from JadePuma.
In this video I'm gonna show you how in the flex theme you can add a section that will allow you to easily promote specific products in a blog article. And the way we'll do this, we'll be able to use our existing blog article template, just one template across all of your articles, but have product specific promotions for each given blog article. So lemme show what it looks like on the front end here I am in fine and bath looking at one of their blog articles. And if I scroll down to the bottom, I've got this related products section showing up with a collection list type view of specific products. Now this article happens to be about luxury towels and down below we're promoting specific luxury towels. And then in that same section, if we only specify one product, instead of it showing it as a collection list, it'll show it as a product form.
Now this product happens to have a lot of product options. So the form is really large, but there's a product form here that allows 'em to add it street to the cart once they pick their options, or they can click to learn more and go off to that specific product. So if you only select one product, it'll show the product form. If you select multiple products, it'll show the collection list or product grid. So let's show you how that works inside of the Shopify admin. So here I am in this blog article in the Shopify admin. If I scroll down to the bottom, I've got a meta field definition. If I, you know, click on the meta field, you'll see that there's a definition named featured products. And if I click on that, I can select a product or multiple products. And right now I've already got products selected, but I can add and subtract from that list.
So all you have to do is assign products to this meta field, one or multiple, and then the section will start displaying them. So if you don't assign any products to this meta field on a given article, then no nothing will show on the front end. There won't be extra spaces or anything like that. It just hides the whole element really, really nicely. And here in the other article with one product, if we scroll down, oh, there, there we go. Shopify. you'll see on this one here, we only have one product specified. Now I'm gonna view the definition settings cuz there's two steps for getting us to work in your store. The first one is you have to create the meta field definition, and the second is you have to add the section to your theme code.
So here you can see that we have a definition defined that we call featured products. And it's namespace key is JD puma dot featured products. You have to use that exact string there because our section code looks for it. And then we define it to be the type of product and allows a list of products and not just one of them. So you create that product or that article, meta field definition first. And then if you go to our blog article about this, if you're watching this on YouTube, there'll be a link to the blog article. If you're watching this on the blog article, what you'll see on that page, let's actually bring it up here, the front end. Here's the video you're watching, but down here is the code. So all you need to do is copy this code into a section I call the section article double underscore feature dash product section. You add that in and then you add that section to your article template. So let's go into theme customization in the store. So this store already has the section added to the theme, and if I go into theme customization and I go to the article template, you'll see that the section's already been added. But I'll show you what that looks like.
So down here we have the featured article section that has been added to this store. Oh, sorry, not the, not the featured articles. That's another section we've made. This one's the article featured products. And in the settings you can say, well, if it's a single product, here's what it's gonna say. If it's a multiple product, here's what it's gonna say. But you notice here we're not selecting the products cuz we're leaving that to the meta fields and you can see some other settings in there for you to use.
Hopefully that helps you get this section added to your flex theme and promoting specific products in your blog articles. Thanks.