BUILDER

Resources

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Home

Forum

Blog

Github

Login

Signup

This page was made in Builder!

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!

Chat us for install help

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:

Creating a site-wide ribbon

Troubleshooting

Have any issues with the above steps? Chat us and we'll happily help yo out!

Chat us for install help
Was this article helpful?