Control any part of your storefront with custom dropzones
Builder editable regions can be dropped onto existing pages to allow drag and drop editing anywhere on your site, app, or store. This includes the ability to a/b test, target, and schedule your content as well
What is a custom dropzone?
A custom dropzone is a Builder-editable region of an existing page of yours that you integrate into that pages code. Once created, you can edit that content and publish directly from Builder
How to create a custom dropzone
1. Create a component model
To create a custom dropzone, start by creating a model.
To do this, let’s create a new component model. Go over to builder.io/models, select +create model and choose component.
Then give your component a name. In our example, let's make a site-wide ribbon component we'll call ribbon.
2. Set the preview URL
Then, let’s give our component an editing URL. This is what Builder will open in the Visual Editor to edit your ribbon, so this just needs to be any URL this Builder component will display on. In our case, since this component will be site-wide, we can just enter our homepage URL (e.g. https://our-site.com)
Note that if you are adding this code on a collection page, choose one of your collection pages (https://our-site.com/collections/something) as the editing URL. Same goes for product page, etc.
3. Install the code
Shopify
React
HTML API
Angular
Webcomponents
Dynamic Symbol
At the bottom of the page for your model will be a code snippet for Shopify. You'll want to copy and paste this into your store theme code where you want the Builder editable region to be.
E.g. for a ribbon we may put this code after the <body> tag of our theme.liquid file
Don't know where or how to install this code? Chat us and we'll integrate the code to your Shopify store for you, for free!
4. Create content
Once everything is installed, head over to /content and hit +new entry and create a content entry. This will open the editor the page you specified, and where you installed the code should show add block.
Now drag and drop to create your content, and hit publish when ready! Note that you can also use targeting and a/b testing to show different content to different visitors or pages.
Conclusion
You can use custom dropzones for tons of use cases in Builder. For instance, try out any of these tutorials for step by step instructions for how to accomplish some common use cases with custom dropzones:
Troubleshooting
Have any issues with the above steps? Chat us and we'll happily help yo out!
