BACK

dynamic block section not showing up shopify

Shopify Dev Tips: Dynamic Sections hey everybody i'm sam webb,and this is shopify dev tips,today we'

Sam

Updated on Apr 01,2023

Shopify Dev Tips: Dynamic Sections

The above is a brief introduction to dynamic block section not showing up shopify

Let's move on to the first section of dynamic block section not showing up shopify

Let TThunt's experts help you find the best TikTok product on your Shopify business!

Find TikTok products (It's Free)
No difficulty
No complicated process
Find winning products
3.5K Ratings

WHY YOU SHOULD CHOOSE TTHUNT

TThunt has the world's largest selection of TikTok products to choose from, and each product has a large number of advertising materials, so you can choose advertising materials for TikTok ads or Facebook ads without any hassle.

dynamic block section not showing up shopify catalogs

Shopify Dev Tips: Dynamic Sections

hey everybody i'm sam webb,and this is shopify dev tips,today we're starting off right where we,left off from the last video about,static sections,and now we're going to talk about,dynamic sections,so a dynamic section is just a section,but instead of it being static on the,page it functions as more of a,reusable component now sadly dynamic,sections can only be used on the home,page,but they're still really important to,understand so let's get started,so back on the home page we'll see this,section here that we created last time,and i'll link that video in the,description,but we have are these three h ones that,say hello world goodbye world hello,world,and they're statically placed above all,the other content on the home page,and so this is the code we wrote last,time and what we're gonna do,is convert this into a dynamic section,for starters let's go back to,index.liquid and we're going to remove,this section tag here so this section,tag,is for static sections so we're going to,get rid of that,and what happens is dynamic sections are,automatically injected on the page,through this content for index tag and,then another thing we're going to do is,we're going to get rid of these blocks,because for this specific section blocks,aren't really necessary,now this is actually really important,what you see here is we have an,error that says that this new schema is,incompatible with the current settings,value,so let me add this back to index just so,that we can,demonstrate but currently if we go into,heading,we have these blocks and so if you try,to make a change to a section,by removing the blocks but you still,have data that's associated with those,blocks,this is how you run into that error so,what we have to do in this case is we,have to first remove these blocks,and then we can save it and now if i go,back to the heading and save that again,if we're looking down at the bottom now,we're not getting that error anymore,and now i can again remove this from,index and back to the theme editor again,you'll see that we don't have that,heading anymore,here so now the question is how do we,convert this static section,into a dynamic section it's actually,really easy we just need to add,a new property to the section called,presets,so if i put this comma here we'll do,presets,and presets is an array so let's make an,array,it's going to take an object and for,presets there are really only two,required fields there's name,so we're going to name this heading and,category,and this is so that while you're,building a bunch of dynamic sections for,the home page,you can categorize them so that they,show up in a similar area,so we're going to call this text only,and now back in the theme editor at,first you won't see anything different,but if i click,add section here and i search for the,category text only,we'll find heading here and if i click,that,it now gets added to the page i'll,select it,it says hello world and i can change,that to goodbye world,and we'll see it positioned on this on,the storefront right it comes after this,sales section and it's the same over,here so if we wanted that to show up,back above it the way we had it before,we would just drag it up above it,and again this is now a reusable section,and so what we can do is add section,again,scroll back down to text only add,another heading,that says hello world that's fine,again move that one above,and now we can replicate what we had,before or we could have a heading,then the sale then the goodbye heading,and so now we have them split,and we can add as many of these headings,as we want by just going to add section,and selecting that heading and this is,generally how you would use a dynamic,section,it's mostly the same as a static section,where you have these two areas right you,have,your html section and then you have your,content,definitions you connect your content,definitions or these different settings,to your actual code by using,section.settings or if you want to use,blocks as well you could do that,and really the only difference is this,presets property now these are the only,two required,fields for presets but presets can take,more information,and presets actually does two things,which is that it places it as a dynamic,section,but presets also do something else to,where you're you're able to add,pre-selected content for these sections,now that will come into play more so if,you're building themes,or you know general use and not so much,if you're building,custom websites for clients but if you,want to learn more about that,i'd advise you to go to the,documentation i'll link it,but in here i'm just gonna do a quick,find for presets,i'm gonna click this so it'll take me,down to that section,and this will explain everything about,presets,and all the different things you can add,to it now one last thing,referring back to the previous video,about static sections,i also added this section to the product,page,and i added it like this like it's a,static section like i said dynamic,sections,only work on the home page but you're,able to,reuse it as a static section for the,rest of the site,by adding it in this way and so if we go,back to the product page,you'll see that we have hello world up,here and we have heading showing up here,and in here it shows up in a similar way,to how it showed up on the home page,when you clicked into the section,but this data here doesn't actually,reflect what's on the home page,this reflects it as almost like it's a,separate thing,it's a static section which is separate,from its dynamic counterpart,and so if i change this to something,else and i save that,right if i go back to the home page and,refresh this,you see that we still have hello world,and goodbye world but if i click on this,product we have something else,so you're able to reuse dynamic sections,as a static section on other pages,but just remember the limitations of,static sections and that's how it will,work for the rest of those pages and so,that's really all there is with dynamic,sections,they're not really much more complex,than static sections you just have to,add an extra property called presets,and it's two required properties and,then you have a dynamic section,if you found this video helpful make,sure you like comment subscribe,hit that notification bell and i'll see,you next time,you

Congratulation! You bave finally finished reading dynamic block section not showing up shopify and believe you bave enougb understending dynamic block section not showing up shopify

Come on and read the rest of the article!

Browse More Content