Builder Best Practices
In traditional web development, you can do just about anything in a number of different ways, but usually, one way offers more benefits than the others.
With the Builder Visual Editor, you are working with the underlying front-end code to access all of the robust features of modern development. Because of this, just as with code, you can do things in many ways with Builder.
This document outlines best practices to help you build as efficiently as possible.
Layout
Important: learn about responsive design
Many best practices assume a responsive foundation. Responsive design is a best practice in and of itself, whether you're coding or using a visual tool such as Builder.
This section shares some pointers, but to get a solid foundation in how to build successfully, whether you're coding or using a visual tool like Builder, read through the Builder Responsive Design documentation.
The Responsive Design docs explain the vital concepts of how browsers calculate what they display, width, margin and padding, alignment, columns, and fixing layouts, all with responsiveness in mind. And these docs are written from a no-code perspective, so anyone can learn how to build great responsive designs.
Keep pages short
In general, keep pages brief and to the point. Too much content can slow down your page and lead to lower conversion rates. Instead, create more, shorter pages with focused content and link to other pages of similar scope.
Make blocks full width with Full Page Width
When making a block as wide as the viewport, use the Full Page Width setting in the Style Tab. Though you can use a function manually in the CSS, the Full Page Width setting is quicker, intuitive, and prevents typos.
The following image shows where to find the Full Page Width setting in the Layout section of the Style Tab.
Keep Section blocks top-level
Nesting, or putting one thing inside of another, is generally a useful practice in web development; but Section blocks are best for containing other elements, rather than being themselves contained.
While you can safely nest items inside of Section blocks, don't nest Section blocks inside of other blocks.
A Section block's default styles are specifically for making the Section expand the entire viewport, so to use Section blocks with reliable, predictable results, keep them top-level, which means they can contain other blocks but should not be nested within other blocks.
The following image shows a Section block at the top-level in the Layers tab.
Nesting is useful for organizing, but avoid nesting too deeply as controlling the hierarchy depth helps keep the structure clear, which is helpful later for others who might work on what you've built.
Styling blocks
Use the Style tab's graphical settings to style blocks. By relying on Builder's default styles and the Style tab's graphical settings, your design is more flexible and easier to maintain. Most of Builder's blocks are responsive out-of-the-box, which frees you to focus on the look and feel.
By using the graphical settings in the Style tab, and leaving the manual CSS styles to developers and designers versed in the nuances of CSS for responsiveness, your blocks and layouts become easier to iterate on and maintain.
Hiding a block
To hide a block, you can toggle the visibility on desktop, tablet, or mobile from the Visibility section of the Style tab. This toggle is preferable to changing the opacity for performance, especially in the case of sizable content.
Showing a block under certain conditions
When you want to show a block under specific conditions, use the showIf setting in the Data tab, rather than setting the opacity to zero. With the opacity set to zero, the user still has to load the element you've hidden, which can negatively impact performance.
For instructions on using showIf, refer to this blog post.
Text
Use Text blocks correctly
Set Text Blocks according to their semantic meaning. That is, if it is an h1, select Heading 1 from the Text dropdown in the Edit settings–if it's an h2, select Heading 2, and so on. Semantic Text Blocks improve accessibility, makes styling easier, and are consistent with Shopify themes.
Paste text without styles
When copying text from another app and pasting that text into Builder, you might inadvertently paste the styles along with the text. To paste without styles in Builder, use one of the keyboard shortcut:
- On a Mac,
Cmd/Ctrl+Shift+v - On a PC,
Ctrl+Shift+v
Images
Always use an Image block to add an image, rather than setting the image as a background on a block. Builder's Image block optimizes the image; however, the background image setting does not. Additionally, the Text block's alt text makes the block more accessible to screen readers than background images.
Always add alt text to images for accessibility. You can find the Alt Text field by clicking the Edit button on the Image block.
For more information, refer to Working with Images.
Next steps
For more best practices check out the following:
- For detailed layout best practices, refer to the Box Model and Fixing Responsive Layouts.
- If you haven't already gone through the Getting Started, we recommend it as you create a responsive landing page and use many best practices along the way.
- To learn how to reuse blocks and speed up your workflow, check out the Reusable Blocks documentation, which covers Templates and Symbols in-depth.
Need Expert help?
Submit a project to our partners, BuildQuick, and be matched with a Builder expert.