Checkout Toolbox

Flex Theme Sections

Linear Shopping Experiences

Featured Promotions Grid Layout for Flex Theme

This tutorial demonstrates how to add a modified Featured Promotions Section to your theme which uses a grid layout instead of a slider.

Steps to add this section

  1.  Add the section below to your theme files. Watch video for instructions.



index__featured-promotions-grid.liquid


Transcript

Hey, Michael here with Jade Puma. The flex theme comes as standard with this featured promotions section which is right here. And it allows you to slide left and right infinitely through the blocks of the section. But sometimes we'd prefer not to have a slider like this. Sometimes it's nice to have a grid layout. So that's what this section we created featured promos grid does.

It gives you the same blocks, but lays them out in a grid format. So to add this section to your theme first of all, you can find the code in this blog article just underneath this video. So right here, and if you're watching this video on YouTube, you'll find a link to the blog article just under the video.

So to add this code, we want to come into our theme actions, edit code, and then we want to find the sections folder. So right here, click on sections, click, add new sections, and then we're just going to call it "featured-promotions-grid.liquid. And hit done.

Now we want to take the code from here. Let's just scroll to the bottom and click on view raw and just copy all that. And I paste that in here to our new section and hit save. And that's it. Now you'll have access to this new section in your theme.


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


Search