This article covers key concepts and best practices that will help you to master building with Nyla and getting the most of out of the tooling.
- The basics
- Optimising for end users
- Optimising your workflows
- Power user features to create more advanced experiences
The basics
Before diving into building with Nyla, make sure you know the basics of how to use the tool, such as:
- Creating & managing pages
- Saving, previewing and publishing your changes
- Responsive UI
- Section Templates
- Page Templates
- The relationship between Nyla & Shopify
The Nyla 101 training modules take you through these concepts to prepare you for using the tool in more depth.
Optimising for the site management experience:
When building in Nyla, it's important to think about the editing experience of the person or team who will be using the Nyla sections, templates and features that you build.
Being familiar with the entities and best practices lets you most of the Nyla tooling and can set up your future users for success.
-
Keeping custom design tokens to a minimum and clearly naming them makes it easier for users to choose the right styles for their use case and maintains brand consistency.
- Section and Page templates are key to making sure that the things you build are easy to manage and usable for the users managing their sites.
- For section templates:
- Make sure to add overrides for the fields that users want to be editable
- Organize and name your overrides so they are easy to use
- When possible, use properties in order to make your templates dynamic
Sources and Properties
- Ensure that content is dynamically referenced where possible using Sources and Properties.
- Access properties docs here, which also contains link actions and form actions you can use on Nyla.
- Use filters to transform the data in properties. See filters docs here.
Page source
- When a source should be referenced throughout an entire page (e.g a PDP or PLP), make sure to use Page Sources and reference
- You can also reference the relevant page source properties in order to create more dynamic experiences, or manage section visibility dynamically.
Optimise your workflows:
Nyla templates:
- Nyla templates can serve as easy jumping off points for you to build your own custom sections and features.
Blocks:
- Blocks can significantly accelerate your workflow, and enable you to save useful components for users to use when building their own layouts.
- Nyla blocks also serve as jumping off points or drop-in app/features for you to use out of the box
In-context editing:
- Take advantage of in-context selection to speed up your building workflows and visualise the padding, margin and the content block you are working in.
Concurrency:
- Take care to avoid concurrency issues so as not to lose any work.
Power user features
Conditional Visibility
- You can use properties to create conditional logic using conditional visibility
Iterating over a source and creating dynamic layouts
- You can iterate over a array properties and create dynamic layouts using property values in order to build custom grids and sliders
Shopify and Nyla:
- Take advantage of Nyla's close integration with Shopify entities in order to ecommerce features and custom messaging:
Custom properties:
- Set custom properties to use in conditional visibility
Link actions & Form actions
- Link actions enable you to create advanced interactions
- Form actions enable to you to submit forms to drive app/feature functionality
Nyla custom app
- Create your own custom integrations, form actions and link actions with Nyla using the Nyla custom app