This tutorial shows how to add a new section to your store which is a variation on the standard image-with-text section in the flex theme.
This new section allows adjustment of the width allocated to the image section allowing for greater flexibility in your page design. Watch the video below for a complete installation guide.
Steps to add this section
- Add the section below to your theme files. Watch video for instructions.
index__image-with-text-variable-width.liquid
Transcript
Hey, it's Michael here with Jade Puma in this video, I have another variation on the image with text section in the flex theme. And this one's called the adjustable with image with text section. So let's see it in action here on one of our client stores. You can see on the homepage, we have these image with text sections, but the image doesn't take up the 50%. It usually would because we have the ability to adjust that from anywhere up to 50% or less. So that gives us a lot more control over the design of the pages. And we can use different images that we might not want to have taking up 50%. So let's go and see how we can add this section to a fresh theme. So let's go first to our homepage and click on edit code.
And in here, we're just going to want to go to the sections folder. So let's close these folders and here's the sections folder. And let's click on, add a new section. Now at this point, let's go to our tutorial article. So you'll find the link to that in the description. If you're watching this on YouTube or you'll find the code just below this, if you're already on the blog. So here is the code you'll find below this video. So let's call, let's take the name here. Index image with text variable with, so index is the prefix, because this is a section we can use on the homepage or anywhere else. And that is the name and convention in the flex theme. So let's come back here, paste this name and create section, and then let's take all this code. So to do that, we scroll down to where it says VRA here. All right. And then just copy that, come back into our code and paste it in there and it's save. So now we should have access to this section. Let's go to one of our pages here for one of our test pages, and we can see that we have access to this section. So let's come down, add section. Let's go variable.
Let, just refresh it again. It might take a second variable width. There it is variable with image with text. So let's add it and see what we have. So here's, it loads up standard image with text 50% image, 50% text.
And let's see what happens when we play around. We can go so we can change the order of the image and text just by dragging the blocks. Let me move my image here so you can see. Yeah, so down here and we can drag the image to the bottom, then the image will be last. And then for adjusting the image width, we have this spacing here top spacing, bottom space, bottom spacing, and then image width. So this is where we can change the width of the image all the way down to 20% and up to a maximum of 48%.