Here's how to add a section to your product pages for an accordion.
Theme changes needed:
- Add product__accordion section
- Add product-accordion snippet
Product Accordion Section
Product Accordion Snippet
Transcript
Hey, Scott Austin here. And in this video, I'm gonna give you some code that you can use to add accordion functionality onto your product page in the flex theme. So if I scroll down to the bottom of this product page here, this is what I mean by accordion functionality. I like to put the shipping and return policies right onto the product page in a accordion function. So it doesn't, you know, take a vertical space, but people can click on it and, you know, read more information about it if they want to. And what I'll also do is I'll add code to this for things like a description about the vendor. You know, so if it's, you know, from Nike, I'll say about Nike and have a little, you know, paragraph or, or a couple lines that, you know, text about Nike and whatever other information.
So you can build on this code that I'm gonna give you and add more logic to your accord and to have more information stacked inside of the accordion. So quickly show you how this works inside of theme customization. Cause what we're gonna do is we're gonna make a section in, on online store 2.0, all right, we're gonna make a section. So that's this here, this product accordion section. And I can take that section and move it anywhere that I want to, which is, you know, the beautiful sections, anywhere, functionality, move things up and down. So what we're gonna do is we're gonna create two files. One is a in our, so now I'm in edit the theme. One is a section and that one is called product accordion, a product underscore accordion. I do a double underscore found the naming convention that shop or the outta the sandbox team uses within the flex theme.
So if I go down to my sections here, right, they've got double underscore bread crumb. So I created a product double underscore accordion. And then the other file we're gonna create is a snippet file. And that I call product dash accordion liquid. And we, you know, we'll store that in our snippets folder and you'll see here, it's gonna be right there. So what's, you'll want to do, to start, is add a new section by clicking this little, add a new section right here. And then you'll also want to add a new snippet using that link right there and use the code. That's gonna be on the below the video. If you're looking at this on YouTube, there'll be a link in the YouTube comment is to go to my J Puma blog. You'll see the code snippets there. So you copy and paste the code for those. And the section file is actually pretty simple. I'm using this, the standard section functionality, which puts spacing above and below the element. You can vary it. So if you're in theme customization under pro accordion, the only settings over here are the spacing settings and the width that it takes. So there's no content specific settings. So those are the generic settings that almost all sections in the flex theme have.
And then you'll see here. We also, one other thing is we have this specified only for product templates because this product accordion is gonna call the product object in the Shopify data model. You don't want to add this own it to an article page, cuz it won't work or to the homepage cuz it also won't work there because it's, it's coded look for product information. So that's why we have the templates product only. So, and you could delete this if you wanted to. Cause you could use this according in other areas, but I, I like to have this one just for the product and now here's the product according snippet. And you'll see, you know, we're loading up a JavaScript file that the flex theme uses. And you'll want to make sure, you know, if it's a couple years after I create this video, this file name might have changed. Although this has been working for the past year or two for me. And if you want to add, add more accordions. So the DD, the DT, right, that function is the Element that goes here. The shipping is in the DT and this other text down here is in the DD HTML element. So if you wanted to add more like one for a product vendor, you would go in here and do a de well actually I normally do this, just copy and paste, copy paste. Now this one here, we might say put an if van statement around it.
So if product dot vendor Equals Nike And then at the end of the DED here, we'll put an end. If,
And then he year I might change the heading from shipping to Nike and the content. Instead of it being the shop shipping policy, I might change that to instead be pages, Nike dot content or something to that effect. Normally I store that information in a page, but wherever you're storing that it could be in a meta field or something else, but you can put an if statement around the DT and the DD to only show it on certain product pages right now, the way it's working is the refund policy and the shipping policy are showing on all product pages, but you might want to have product specific information about the vendor or it could be based on the product type or other information does a meta field exist. So there's lots of functionality that you can add into this product, accordion snippet, if you want to. So check out the code snippets, add 'em to your store. This is like I said, only gonna work for the flex theme online store 2.0 version and beyond. But if you're on the flex theme this will help you get started with accordance on your product page. You thanks for watching.