BACK

how to make your drag and drop shopify theme

How to Activate Shopify modular drag & drop sections on ANY page you want hello everybody i'm going

Steven Chu Studio

Updated on Feb 26,2023

How to Activate Shopify modular drag & drop sections on ANY page you want

The above is a brief introduction to how to make your drag and drop shopify theme

Let's move on to the first section of how to make your drag and drop shopify theme

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.

how to make your drag and drop shopify theme catalogs

How to Activate Shopify modular drag & drop sections on ANY page you want

hello everybody i'm going to show you,today how to bring,shopify's modular blocks to build out,other pages on your website,as you can see this is a page,on my website chibi.com,which is not my home page but i have the,block functionality i have the section,block functionality,and i'm going to walk through how you,can do that,so first you're going to need to know,how to do,how to edit html and liquid,if you are not familiar with how to do,this you should probably contact a,shopify expert,so let's jump in first,uh i i'm like i have highly recommend,using a theme that already uses modular,sections,i'm building and customizing off of,shopify's venture theme which is one of,the free,themes and when you're thinking about,what you want to bring to your custom,page so i'm doing uh,essentially a business marketing page,for business services and i kind of just,wanted to have,an image on one side and then text on,the other and i kind of just wanted,to alternate so,when i was thinking about what i wanted,to bring to that page,i looked through the existing options,so you know you can you can click,through,and see which thing that you want,and i chose image with text that's what,i,that's what i really want to work with,so what i did was that i went to,i went to image content,because that's actually what the file is,called and,i clicked it i opened it i grabbed all,this code in here,and i went and created a new section and,this is my custom section,so i would add new section and i titled,mine business home because i'm creating,a business home page you can call yours,whatever you want,so let's hop over i customize my,i customize my settings to do exactly,what i want which is,um i was looking to,be able to quickly add in like either,image blocks or text blocks so that's,how i customize mine,i have the ability to do left side or,right side and you see it's dynamically,switching this is something,this is one of the features that i,really love about shopify is that,everything is,live previews,i would so the the only things that you,need to,note is that you can call this name,whatever you want,you can you can when you define your,blocks for this,um you can,you have to kind of hard code the the,type of,the type of features that you want into,this one page so basically,everything has to be soft all the,options that you want have to be,self-contained in this section liquid,this is different from the typical,from these from the dynamic ad section,area on shopify's like customized theme,home page so on your home page you can,pick like from a big list,that's not the case we're actually,creating see business home we're,creating a section that's a lot closer,to the footer,so i noticed that with the footer,we still get these drag and droppable,dynamic sections and i want to be able,to bring that to another page,so once you once you customize,once you customize your features that,you want save out,save the file and then let's hop over,into,our theme.liquid what you need to know,about this page,is that you have to call,the section directly in theme.liquid you,can't add a conditional,you can't add something like,if page is,business then call that,it doesn't work that way it needs to be,called directly,on this on your theme,so that doesn't mean that you can't add,a conditions that's not showing directly,in your home page because,again we are here to create a special,uh home page that has modular blocks or,a special page that has modular blocks,that is not on our home page,so what you do is that you don't put,your conditional on the theme,you put that directly inside this liquid,so i put if page handle equals business,because i have i created a page called,business,i put the if here here's my html in,liquid,i end it so it closes out before the,schema area,once you've done that and you've saved,that now,we don't need to see that anymore now,it's going to show up,in your customized theme panel so,the next thing that you need to know is,that,to be able to customize this you see,that if you just click on it directly i,can't see what i'm editing and that's,because i'm not actually on that page,so it's actually a requirement that you,add the,you add it to your navigation menu so,you can navigate to there,i'm going to click i added to my footer,and now i'm on the business page of my,website,and it doesn't work to type in the url,you actually have to add it to the,navigation,so now you see that i'm on this page if,i click into my options,i can customize it however i want,so that is adding that's adding,modular sections to your shopify theme,in a nutshell,so finally you can see um this is a,great way to extend shopify's newest,features to simplify your workflow by,basically creating a drag-and-drop,website builder,and that's a functionality that i know,that we in the community forums have,been,talking about and wanting for a really,long time so,here it is if you have any questions my,name is steven chu,and i am from stevenshoot studio if you,like this tutorial,you can follow me on the interwebs at,stevenshu studio,i'm a shopify partner and expert and i,will also do,a write-up for you to follow along so,check the link,below in the description of this video,ask your comments and questions there,and either i,or the shopify community will help you,get sorted,so have a great day and i hope you found,this useful,thank you

Congratulation! You bave finally finished reading how to make your drag and drop shopify theme and believe you bave enougb understending how to make your drag and drop shopify theme

Come on and read the rest of the article!

Browse More Content