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

Made in Builder

Creating an editable site ribbon in Builder

You can use a section model to have a single Builder section across pages, for example a site-wide ribbon (sometimes called an "announcement bar" - a message that displays at the top of every page on a site).

To do this, let’s create a new section model. Go over to builder.io/models, select “+ create model” and choose “section”

Then give your section a name, e.g. “ribbon”

Then, let’s give this 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 section will display on. In our case, since this section will be site-wide, we can just enter our homepage URL (e.g. https://our-site.com)

Note - when first integrating the code you may want to make the editing URL a local one, like http://localhost:8080. That way you can add the section to your local site and test out the full flow

Then, add the section code to the top of your site.

Now, let's create a ribbon. Go over to builder.io/content and choose “+ new entry” and choose “ribbon”

Then, you should see your site in the preview with a big “+ add block” at the top - drag and drop content in and publish!

Note that when using section models, just like any other content, you can use targeting & scheduling and A/B tests to dictate who sees what content for your ribbon

If you run into any issues or have any questions - don’t hesitate to ask over in our forum!

Featured Tutorials

Creating a landing page in 5 mins

Create a product promotion with custom dropzones

Cross-sell sections of your cart

Was this article helpful?