Here's how to add a section to the Flex theme in a Shopify store that you can easily review all of your article photos.
Theme edits needed:
- Add page__article-photos section.
- Create page.article-photos template
Code for Article Photo Review Section
Code for Article Photo Review Template
Transcript
Hey, Scott Austin here.
In this video, I'm gonna show you how you can build a section, add it to the flex theme in your Shopify store, and then add it to a page so that you can quickly look at all your article images. And one reason you might want to do this is just to check that every article has an image assigned to it and what the dimensions are. You know, for instance, you know, if you don't want anything smaller than a certain dimension, you can see that and you can see their aspect ratios to see if they're gonna lay out uniformly on the blog page. Another nice thing here is because I got this background color showing I can see this P and G doesn't have transparency, and I may want that effect. It's a nice way to visually check all of your article pages or all your article images to ensure they're meeting whatever your standards are.
And if there's one that you don't like for whatever reason, or just wanna check out, you can click on the article title and it'll open up that article in the Shopify admin. So you can quickly edit it and do whatever you need to do there. Now, the code for this is pretty simple. What you're gonna want to do is first create a page template and I'll include the code for this on the blog article for this video. So if you're looking at this on YouTube in the description, there'll be a link to the Jade Puma blog, where you can get the code for this. So one of the things you're gonna want to do is have a page template that you create. That's unique for this page, cuz in JSON templates with sections, you're gonna want to create a unique template for each page that has unique content.
And then you're gonna create a section and here's all the codes you need for that section. Just copy and paste it, create that section and then you should be good to go. It's pretty simple to to put together if you're copy and pasting code. And then when you're in theme customization on that page, you have a couple choices of text color, the background color, and the standard flex spacing elements between sections type of things. And if it's standard width or, or full full screen there's no need to go full screen. Cause we're just showing one image per article. Cause there's only one image on articles, but those are the controls you have.
Hopefully this tool helps you out. Thanks for watching.