Onboarding: Building Sections & Section Templates

Translate your designs into Nyla

The following article applies to partner-led Nyla onboardings, and is published for Onboarding Build Partners.

Once you have loaded in your design tokens, you can start to build out your pages using sections and templates.

Whilst building templates requires diving into the tool and using Nyla's building system. 

This article walks you through the process of breaking down your designs (or current site) into sections and planning how to create those in Nyla in order to build as easily as possible whilst setting users up for success when using your sections and templates in the future. 

Getting started

Doing the right preparation can help you to build your templates more quickly. Here are some helpful tips to complete before you dive in in order to make your Nyla build go more smoothly: 

Create your pages

It is helpful to create the pages on your site before starting building your templates so that you can link to them as needed. Some users do this incrementally as they go, whereas others decide to create everything up front. 

We recommend to:

• Create all pages that were included in the launch sitemap
• When doing so, make sure to add all page settings, such as the SEO title and description

You can use the bulk edit tool in order to make this process faster, especially when creating product and collection pages. 

Add your metafields

We suggest adding the metafields that you'll use on the site before you start building your templates so that you have them ready to go. 

Activate your apps

It's helpful to complete all app activations for apps that you'll use in your sections before  beginning to build. See more information here. 

Configure your design tokens

We also recommend to configure your list of design tokens before you start to build your sections and templates. Some users continue to add to design tokens as they go implementing sections. This is your choice, however we tend to find that when multiple users are building at once, it's helpful to have the full list configured in advance in order to prevent unnecessary proliferation and optimise for future users' experience when editing their site. 

Break your site into sections & templates

Identify the list of templates you will build

We recommend identifying the list of templates that you should build in order to complete your site before diving into the build itself.

This involves looking at the site you'll build and breaking the pages down into sections, then comparing them to see which are repeated vs new across different pages in order to end up with a list of the unique sections needed to build your site. 

Name your templates intuitively

Section templates are reusable, so we recommend that you name templates intuitively so that future users know what they're for.

Don't proliferate templates where possible:

We suggest to build the minimum templates needed in order to accomplish the design, functionality and editability needs of the site you are building. This gives site managers a condensed list of templates to manage as they go building experiences for the site.   

As a rule of thumb: 

• If the design between sections is different: you should use a new template
• If the data is different: you should use a new template. E.g: 
  • If a blog post contains a hero that has the same design as another hero on your site, but it references the blog post title dynamically, then it should be a standalone template

• If only the content is different (or very similar): you should combine into one template and manage using overrides
  • Whilst we recommend this approach, this can differ from user to user based on their preferences. There's no right answer for how to handle slight content variations on section templates.  

Plan the functionality needs for your sections

When planning your section templates, make sure you know how the template should behave before starting to build.

Whilst the types of questions and requirements can differ from section to section and site to site, here are a few illustrative examples of the types of things to consider: 

• What types of media should your section support?
• Should there be any behaviour based on states (like hover states on desktop)?
• Does/should your section reference dynamic data, and if so, how would that be managed by the person editing the site?  
• Are any apps referenced/used? 
• Does the section have any functionality/capabilities that need to be included? 
• Content item specific configurations such as:
  
  • For grids - what type of pagination should be used, etc
  • For sliders, how many should be included and how should the slider behave, etc
  • For videos, should the video autoplay and so on, etc

Identify the overrides that your templates should have:

For each section, you should also plan what should be editable for users, and where it should be edited.

For items that should be editable, you should decide where the information should be edited.

For example: 

• Should product/collection content be managed via metafields or via overrides
  
  • This decision can depend based on user preference, and whether it makes sense to manage product/collection data in bulk in Shopify and then reference it in Nyla

• Does the content come dynamically from another source via properties
  • For example a blog post, a product or collection, or a different third party data source. 

When planning overrides we suggest that they should be: 

• Kept to a minimum (but be comprehensive for the user needs)
  • It's easier for users to only have items to edit that are useful to the use cases they want for that section
• Clearly named and intuitive, and organized into folders when appropriate

Get Building! 

Once you have worked out what you'll be building and the requirements for each section, it's time to dive in and build your templates.

Building templates in Nyla requires a knowledge of the tool, so if you're not familiar with Nyla yet, here are some helpful resources and tips to help you get started.  

Some useful tips for first time builders include: 

• Try to build sections in the most simple way possible. 

• Use properties for dynamic content

• Where appropriate, name content items to help future users navigate the section when in Template Edit Mode.

• Name and organize overrides into folders that makes it easy and intuitive for the user to edit the overrides on your sections

Testing your templates and functionality

Once you've built your sections and templates, you should test on different breakpoints and devices in order to ensure a great end user experience.

We recommend to also check the Quick View mode for all templates that you build to make sure that the section editing experience is intuitive for the people who will be using the section templates you've built.