Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

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

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:

  • 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.
Was this article helpful?