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 index__featured-product section to the theme code.
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 to use the section that I created for the flex theme in your Shopify store to allow a text H1 title for your page, some of the pages and some of the sections and templates in the flex theme. Lighter different things with the H one or the title for the page, like putting it over a banner and things like that. But for this store high sweetheart, we wanted to keep things simple and just have a color background and then fix the height and have it be a little bit thicker. So it was a bit of a branding element instead of just a smaller title. So I created this section and what it allows you to do is you can add it to a product, a page, or a collection, and it'll automatically pull the title depending on whether it's a page, you know, product or a collection.
Pull the appropriate title and put it in H one. You know, that's good for SEO best practices or you can override the text that shows up. So in this store we took all of our evergreen pages, like the shipping policy, we did the same thing, the faq, we did the same thing. Now if I go in, cuz this is a section, I'm gonna go in and customize this page and it opens up theme customization in the Shopify admin. You'll see I have this section here, title and I turned off the banner element and the page content. And I'm just using the accordion functionality for the q and a. So on this title element, the controls I have, let's say, instead of calling it frequently asked questions, which is the product or the page title, I could just say, well I want to call it FAQ so I can override that if I want to.
You can also set the color, you can hide the divider or show the divider and you can fix its height on desktop and on mobile. So you could say, well let's go, you know, a really big one or have a minimum height of zero pixels and it'll pick the appropriate height based on the rest of the CSS of the font size and the margins and that kind of thing. So you get some control there on how it all lays out. And of course you can, you know, center the text or left the line in those things. So that's how it works. And the way you add it to your store is it's just a section. So you have to add the section code. You can copy it from the J Puma website. So if you're looking at this on YouTube, there'll be a link to the J Puma website. If you're already on the blog article in j Puma down below the video, you'll see that code. You just have to create a section with the same name that it shows you there. Copy the code into that and you will be good to go. You can add it to any page product or collection that you want to.
So hopefully that helps. Thanks for watching.