Skip to main content

Get Started - Tutorial

Configure a Section

Prerequisites

Before you continue, make sure you have already created and synced your theme.json with our CLI. This step is explained in section 4 of this tutorial

Configuring a Section's visual editor is done in two parts:

  1. Set data-pf attributes on Sections
  2. Dynamically add class names for Section Designer

1. Set data-pf attributes​

You configure a section by adding a JSON object containing a sectionId and a title in a data-pf attribute to the HTML element you want to assign as a Section.

<div class="sc-outer">
  <div
    class="sc-inner"
    data-pf='{"sectionId":"1", "title": "Grid Section"}'
  >
    <!-- Insert Component(s) -->
  </div>
</div>

2. Get new styles by using our Helpers​

The last step is to retrieve new styles server-side from our Runtime API. You can do so by using our Runtime API or by using our Helpers Package that will do the hard work for you.

We wrote a complete guide to help you implement our helpers in your setup. Please read this article

Developers Ressources​

Integration Examples​