Checkout Toolbox

Flex Theme Sections

Linear Shopping Experiences

Mixed Content Accordion Section in the Flex Theme

Here's how to add a Mixed Content Accordion Section in the Flex Theme.

Theme edits needed:

  1. Add section file to the theme

Code for the Custom Liquid Section

Transcript

Michael here with Jade Puma. In this video, I'll show you how to add this mixed content accordion section, which can be a really useful section to have in your flex theme. So here's a quick example. We have three tabs here and in the first one, we just have some text in the second one. We we've put a YouTube video and third one, we've added some HTML for a table. So we can combine these elements. We can have one tab that has all sorts of content in there, and it can just be a really useful section to have if you want to display all sorts of content in a tab structure on your page. So let's take a look at it through the customizer. So here it is, it's going to be called content accordion once we add the section. Here are the options in the settings. We have some text input here. It just takes YouTube video IDs, and then down the bottom is where we can input liquid or HTML code for custom elements. Okay. So I'm going to clear this section from my theme now, and then we can add it back in together. Okay. So here we are in our store admin. So we're going to click on actions and edit code, And then we're gonna come to our sections folder. We're gonna click on add and new section. So let's go ahead and call index double underscore mixed content, dot liquid. Okay. Now let's create this section and now let's go to our tutorial page on the Jade puma website. If you're watching this on YouTube, you'll find a link in the description and there you'll find the code for this section. And we wanna scroll down to the bottom until we find view raw, And then just copy all Of this code And then come back and clear that and paste it all in here and hit save. So that should be all we need to do to add this section to our theme. So then let's come back to the page we were editing. And hit Refresh, And then let's go add Section. Search for content accordion. And here it is, let's add a few tabs and here we can see, we have our new section right here. All right. So that's all you need to do to add that section. Thanks for watching.


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


Search