Skip to main content

Blocks

Blocks allow you to build your own reusable components and use them when making sections or pages.

blocks-overview

Create a block​

  1. From your Dashboard, open XO Builder → Block → Click the Create Block button. You will be taken to the block creation page.

blocks-add


  1. On the block page, you’ll see a slider to adjust the frame width at the top. If you are building small blocks, such as a product card, you can drag it smaller to have proper viewport.
blocks-frame-width

tip

This slider does not control the width of the block itself, but the width of the canvas/frame containing the block for editing purpose only


  1. Inside the Navigation Tab on the left, a wrapper will be added by default. If you want to build using a premade block and customize it, first delete the Wrapper → Click the + icon → Switch to the Block tab → Choose a block to add.

blocks-prebuilt


  1. On the other hand, if you want to build from scratch, it’s a good practice to build everything inside this wrapper to keep the structure tidy and easily adjust the block's max-width using the wrapper. Click the + icon and start building using the element library.

blocks-custom


  1. When you are done editing, hit Save on the top left corner → Name the block → Click the x again to close the Block Editing page. You will see the block listed in a list view.

blocks-save


tip

Saved blocks can only be used to create XO Builder’s Pages and Sections. You cannot export blocks to use in a Shopify theme.


Save Blocks from Page/Section​

blocks-page-save

You can save any component as a block directly in the Page Editor or Section Editor by right-clicking and selecting Save Block. This is very convenient when you're building a page or section, allowing you to save a block for reuse in multiple places without leaving the interface.

Use Blocks​

  1. Inside Page/Section Editor
  2. Click + to add new Element
  3. Open Blocks Tab
  4. Click on any Block to add to page

Manage Blocks​

blocks-setting

  1. From the Blocks listing page, click Setting on a block
  2. Change Name , Categories , Tags and hit Save
  3. Click Edit Block to open Block Editor
  4. Click Duplicate to make a copy of a Block
  5. Click Delete to remove a Block