Checkout Toolbox

Flex Theme Sections

Linear Shopping Experiences

A Better Image-with-Text Section in the Flex Theme

Multiple Image-with-Text Blocks in One Section

The standard Flex theme image-with-text section allows just one image-text pairing  per section. Since the maximum sections per page template is just 20, this can lead to us hitting the setion limit when building out content rich pages.

To help solve this,  you can use the section provided below which allows for multiple rows of  image-with-text to be included as block level items within a single section.

Theme edits needed:

  1. Add the new section to your theme files

Watch video for full instructions



Code for the image-with-text-blocks.liquid

Transcript

Hey, it's Michael here with Jade Puma in this video, I'm going to show you how to add a a new image with text section to the flex theme, which solves a problem that you might have encountered. And that problem is Shopify has a limit of 20 sections per page. So if you want to build out a rich content, rich product page, like we have here with lots of content, you might use the image with text section quite a bit. So like we have here, we have several rows of image with text. The problem is the flex themes standard image with text section just gives you one row per section. So instead we're going to add a new section where blocks within that section are a new row of image with text. So let me show you what that would look like. Here's our example site here. And as you can see, we have three sections of image with text here, but this means that three of our 20 sections for this page have already been used up with this, these image and text rows. So instead we wanna have one section that has three blocks. So to add that let's come into our section code, sorry, our theme code. We want to go to sections and we wanna go add new section and let's call this new section image with text blocks liquid.

 

And let's create that section. And then if you're watching this video on YouTube you should find a link in the description to the code for this section. And if you're watching this on the Jade PIMO website, just look below this video and you'll find this code. So then you're gonna wanna just scroll down to the bottom and find view raw and just select all this code and then come back into our editor, sorry, our theme files here and just paste that in and hit save. So now we should have access to this new section in our customizer. So let's do a refresh here.

 

Now, here's our original 1, 2, 3 sections. And now we're gonna add a new section that search for image, and we should see image text blocks. Okay. So there we go. That's our new section. Let's add that and let's just hit save.

 

Now, let's see what happens when we add some blocks here. We're getting image with text rows, and as you can see, they are automatically alternating in their order. So if I was to change the order here, I pull the second one up to the top. They keep the same alternating order, but maybe we don't want them to alternate where we have a setting for that. If we just come over here to the right and we have a check box for alternate order. So we can go ahead and check that uncheck that, sorry. And they won't alternate, or we can change the image first or text first option here. And we can go ahead and save that we come back and change it to alternate order again, and it automatically will alternate. So now we have 1, 2, 3, 4 rows of image with text, and we've only used up one section of our 20 sections on this page. So I hope that's useful for you. Thanks for watching.

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


Search