This section doesn’t currently include any content. Add content to this section using the sidebar.

Image caption appears here

Add your deal, information or promotional text

This section doesn’t currently include any content. Add content to this section using the sidebar.

Image caption appears here

Add your deal, information or promotional text

This section doesn’t currently include any content. Add content to this section using the sidebar.

Image caption appears here

Add your deal, information or promotional text

This section doesn’t currently include any content. Add content to this section using the sidebar.

Image caption appears here

Add your deal, information or promotional text

Promotions Grid Section for the Flex Theme

This tutorial shows how to add a section to your Flex theme that you can use to promote different types of content - collections, products, blog articles and pages.  It works similarily to the Collection List section, just with more types of content.

    Video Tutorial


    Theme Code

    index__promotion-grid.liquid Section

    Filename: index__promotion-grid.liquid

    collection_card.liquid Snippet

    Filename: collection_card

    product_card.liquid Snippet

    Filename: product_card

    color_to_rgb.liquid Snippet

    Filename: color_to_rgb

    Transcript

    Hey, this is Charles with J. Puma. Today I am going to show you this awesome section, the promotion grid where you can promote collections, products, pages, and blog articles. And you can also showcase lists of products and lists of collections. So what these settings of this section look like? You have the section and then blocks for all the content that you want to promote. The blocks that you have available are the collection list block, the product list block, the collection block, the product block, the page block, and the article block. So I'll start off with the collection block right here. So you get to choose your own collection, just one collection. You can choose a custom image, you can do a custom heading and a custom button label. Then the next block is the product block. You can pick a specific product, select a custom image for that product, give a custom heading, give a custom button label. And you can do the same for a page. So you can link a page and then a featured image, a heading and a button label. In the same for an article, you can link an article and image, a heading and then a button label. Then we have the collection list block where you can either select specific collections that you want for the section, or what you have the ability to do is link a dynamic source to connect meta fields. So you can connect custom meta fields so you can have dynamic content per block post. and then we have the product list block which is like the collection list block except for products. So, it also works with a product list meta field so it will be dynamic content for your block post. Or you can also just- select whatever products you want to select. For the promotion grid section the settings that you have are you can change the header You set a custom header. You can change the header alignment you can change the amount of promotions you have per row you can change if you go into mobile view you can change the amount of promotions you have per row on mobile then you have a setting to magnify the image on hover with the checkbox that will magnify the image on hover you can change the button style here so you have a primary secondary and a link style for whatever styles those are for your store and then there is a background overlay where you can change the opacity of the overlay and I'm going to switch back to my desktop view and then you can change the text color you can change the font size you can change the alignment of the titles within the promotion blocks you have the option to show the title below the image and then you also have spacing for the titles so you can space from the left space from the right and then if it's right aligned and then you can space from the bottom if you want and then you also have the same spacing settings for mobile and then you have your standard flex section layout so yeah Now I can show you how to install this. Hey, this is Charles with J. Puma, today I'm going to show you how you can install and then use the promotion grid section for your flex theme. So the first thing that you're going to want to do is get to your online store and to do that at this top bar up here this top black bar the search box in the middle. You can click it and we can search for the online store. So I'm just typing in online and then store and in the results online store comes up so I'm going to click on it. So then your online store loads in the theme tab which is where we want to be. And you can see your current theme this card. We're going to want to click on the 3 dots next to the customize button. It's going to open up a little navigation mode and we're going to click on edit code. So once the code editor loads on this left side bar over here you can see folders layout templates and sections. I'm going to click the sections folder and it's going to do a little drop down and show all the files within the sections folder. I'm going to click this little plus button where it says add a new section. I'm to make a liquid file. And the name of this file is going to be the same name that's on the tutorial. So index __ promotion dash grid and I will simply just copy it and then paste it into this. So I copied now I'm pasting and I'm clicking this done button on the bottom right and it will give us a blank liquid file. So then I'm going to navigate back over to the tutorial code and I'm just going to click this copy button to copy the code to my clipboard and then I'm going to go back over to our code editor. I'm going to select all of everything that's in the file the the schema preset blueprint that a Shopify gives us I'm just going to. I'm going all the click back space and now I'm going to paste. I'm going to click paste and now we have our, uh, prelogret here. Umm, then I'm going to save click the save button at the top right and now we have to add in three So the first snippet that I'm going to add is the collection card snippet. And to do that I'm just going to copy this file name. And the way I get to collectioncard.liquid is if you're in this table. The second one inside the theme code section, the collectioncard.liquid. That's how you can get there. Now I'm just going to copy this file name of collectioncard. And then I'm going to navigate back over to my code editor. I am going to create a snippet which you can do by on this left sidebar there's going to be a snippets folder which is under the sections folder. So you can open that up. You can click the blue add new snippet with the plus sign. You can click on that to add a new snippet. And then you can enter in the file name and I'm just going to paste in that file name that I copied from the tutorial. Then I'm going to click the done button and it's going to load us a blank file. And then I'm going to navigate back over to the tutorial tab and I'm going to click copy. And I'm going to copy the collection card snippet. Now that it's copied to my clipboard, I'm just going to click inside the code editor, inside the collection card code editor. And I'm going to right click and then paste. So then it pastes your collection card and we can save. So I'm going to just press the save button on the top right. And I'm going to navigate back over to the tutorial. I'm going to go back up to the top to the table of contents and we are going to add in the next snippet which is the product card liquid. So it's going to be exactly the same process as the collection card. And it is important to note that the snippet names must be the exact same file names as they are in the tutorial because the promotion grid references those file names specifically. So for the product card I'm just going to click on the oh we gotta make the file I'm going to copy this product card file name, copy it, navigate back over to the code editor. I'm going to add another snippet so I'm going to press add a new snippet with the plus sign. I'm going to click on that and then the add new. A new snippet modal comes up. I'm then going to paste the file name that I copied earlier. I'm going to click the done button and it's going to generate a blank liquid file for us. Then I'm going to go back over to the tutorial page. And I'm going to click the copy button for the product card snippet. Then I'm going to navigate back over to the product card liquid snippet. I'm going to focus on the code editor specifically. And then I'm going to paste the code. Then I'm going to save in the top right. And then we're going to do the third snippet. So I'm going to navigate back over to the tutorial. I'm going to go to the table of contents and click on the color.rgb. And then I'm going to copy the filename first. I'm going to go back over to the code editor. I'm going to add a new snippet by clicking the add a new snippet button. I'm going to paste the filename that I created. Copied from the tutorial. And then I'm going to click done. It's going to give us a blank liquid file. And then I'm going to go back to the tutorial. I'm going to click the copy button on the snippet for color to RGB snippet. And then I'm going to navigate back over to the code editor. And I'm going to paste that color to RGB. Alright, so now that those three snippets and section code is added in, we are going to create the metafields that work with this section. So I'm going to click the exit button at the top left, then I'm going to, at the bottom left there's this little gear box where it says settings, I'm going to click on that. Then this modal is going to pop up, I'm going to move my face, this modal is going to pop up and on this left side bar here, I'm going to scroll down to where it says custom data. It's the fifth one from the top, I'm going to click on it. Then the custom data page comes up and it's going to say metafields definitions and we are going to, you would select whichever metafield type you'd like, but because this example is for blog posts, I'm going to click on the blog post. and then I'm going to add a definition and the name of this will be promo promotion grid colon product list. So this will be a metafield that will be blog post specific that will have a list of products and so to have the metafield be a list of products I'm going to click this plus with a circle. I'm going to click select type and then I'm going to search for products and if you search for product the reference product comes up I'm going to click on that and then you have a selection of either one product or a list of products I'm going to click on the list of products which is on the right side and then I'm going to add in a custom namespace and key or actually just a custom namespace for me it's jadepuma you can do whatever you'd like but I'd recommend jadepuma. and then I'm going to save and we are going to add in another definition so I'm going to click on add definition again and we are going to do promotion grid grid colon and then and then collection list so this will be a meta field that is a list of collections and then I'm going to change the namespace to jpuma I'm then going to click this select type button and I'm going to select the type of collection so by doing that I'm going to search up here I'm going to search collection and then the reference collection is going to come up I'm going to click that and then you have the choice between one collection and a list of collections we are going to click list of collections and then at the top right I'm going to click save. Alright, so now our metafields are created now we are going to go to a blog post, add some collections and products to that metafield and then we will add in the section to our theme editor. get outside of the blog post metafield definitions, I'm going to, at this top right corner, I'm going to click the X button, then I'm going to go to my online store, which you can get to by at this top search bar, you're going to search and then typing in online store. or if you have it pinned on your left side bar you can get to it that way, and then when you're to the, when you're inside the online store, you're going to click on the blog post tab to get to a blog post, then we will click on a blog post and scroll to the very bottom. When you click on that blog post, and there should be a metafields card, on this metafields card, on the top right there is a show all link, you're going to click on the show all link and it will bring you to this blog post metafields. metafields page, so here are two metafields that we created, the promotion grid collection list and the promotion grid product list, so all you got to do is hover your mouse over it and click and it will bring up this button where you can select products, so I'm going to click this button and select products. and you can select as many products as you want, and then you can save, then for the collection list, you can click on it, select collections, and if you have you mean you can select your collections, I only have one right now on the store, but yeah, now we will place the section into our theme editor, so to do that, I am going to navigate over to my themes tab within the online store, and to do that, it is on this left sidebar, I am going to click on themes, and then I am going to go back into the theme editor by hitting this customize button, inside this current theme card, and I'm going to click on So once the theme editor loads, you can go to your blog post. So to do that, you at this top bar up here, you can click the homepage drop down. And then this menu will pop up and we're gonna hit blog post, which is items down from the homepage. I'm gonna click it, and then it's gonna bring up this blog post and I'm gonna select the default blog post template. And so now it's gonna load the default blog post template and on this left sidebar we are going to click add section within the template section, this little plus sign and a circle, I'm gonna click add section and this menu is gonna come up and I'm gonna search for our section. name which is promotion grid, here it is, I'm gonna click it and it's gonna be added, and then it adds it automatically adds four of the blocks but there are two more blocks that you can add so I'm just gonna click this add block button. and here is our collection list block, and to link that metafield that we created earlier, we are going to on this right sidebar here, under the collections to show setting, are going to put our metafield, that we are going to link to a metafield that we already so this is to be our metafield this is going to metafields with this setting. So the metafield that we made earlier, the promotion grid collection list, we're going to click it and then that metafield is added in. So this particular blog we didn't add any collections to which is why nothing happened. But we can now now add in another blog, we'll add in our product list blog. So I just click the add block button again, and now I'm going to select product list. So it's going to add in the product list and then under the products to show setting on the same horizontal row there is the three discs and when you hover it says connect dynamic source I'm going to click on that. And then it's going to show our compatible Metafields, so promotion grid product list. I'm going to click on that and it's going to link the product list Metafield. Now for this specific blog post which is not the blog post that we added collections and products to earlier. nothing came up for our product list. And that is how you add the section and add the two extra blocks. So thank you very much. Okay.


    JadePuma is a certified Shopify Expert. If you need any help with your Shopify store, we can help.


    Search