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.
Steps to add this section
- Add the section index__promotion-grid.liquid to your theme files in the Section foldler.
- Add the section to a page in Theme Customization.
Video Tutorial
Theme Code
index__promotion-grid.liquid Section
Transcript
Hey, Scott, Austin here, and I wanna show you a section that we've made for the flex theme that I really like. To hit, help me make simple grid layouts on pages. It works a lot like the collection list does if use that section. But what this one does, it allows you to have a promotion that goes to a collection or a product or a blog article or a page, and you can mix and match, right? So if we look down at the bottom of this page, and you can see I'm using this, the, the grid layout here, this promotion grid, it looks a lot like the collection list. It's based on the collection list code. But here you can see I did an example of we can go to a collection. You can see that's a collection page, or you can also promote a product side by side and a page and a blog article.
So it allows you to mix and match what your destinations are. But on the page you're promoting them, they all look equal and consistent to help you know, elevate the brand that you're building for your store. And then on the back end, the Shopify admin under theme customization, the section is right here, it's called promotion grid, and it's just blocks. And you just, when you add a block, you pick right then collection product page or article. And each of 'em behaves pretty similarly. Right now, a collection has a default photo by, by the Shopify algorithms. Same thing with product, right? And an article can also have a photo. Now a page doesn't. So if I, you can see here the collection one doesn't have a photo defined. I could override this one. It's the collection photo with, with one that I select here, just like the collection list section does same thing with the product.
I'm using the product photo, but I can override that. Now, when it comes to the page, I'm gonna have to define a photo because a page doesn't have a photo assigned to it. So if I was to remove this image, you just get the, the no image error. And then with an article, if I remove that image, I'll get the the default article image. So you can override each of them. But you're gonna have to define one for a page. All right? That's it for this section. Just add the code to your flex theme, and it should work for you. I hope this helps you build out your store.