Blocks

Blocks are the building pieces of your storefront pages. You use them to put banners, product grids, feeds and text on a page and arrange them without a developer.

A storefront page is a list of rows. Each cell in a row contains one block.

Litestore has ten block types. Each block draws itself but has no layout of its own. The rows decide how wide each block is and in what order the blocks appear.

Litestore stores blocks and layouts in the database. You rearrange a page in the admin, and nobody has to deploy anything.

Because the block and the layout are separate, you can reuse the same block. A banner doesn't know how wide it is, so it can fill a whole row on one page and a third of a row on another.

Where to find it

Content → Blocks
Content → Blocks → Page layout

You create and edit blocks on the first screen. You arrange them into a page on the second.

Blocks have no status of their own

A new block doesn't appear anywhere yet.

It only shows up once you place it in a page layout. The block list marks each block as In use or Unused.

A block has no publish state of its own. If you're still working on a block, just don't add it to a layout yet.

The ten types

• Banner shows text, an image and a link. It's the only promo block, and the template decides its size.
• Slider shows a slideshow of the images you attach to it.
• Products shows a grid of products from a collection you pick.
• Product Feed shows an endless product stream from one of your feeds and keeps itself up to date. Use it to make a page dynamic. You can place it anywhere in the rows.
• Categories shows a grid of your top-level categories with their icons. Litestore reads them live.
• Collections shows a grid of your published collections with their cover images. Litestore reads them live, so new collections appear on their own.
• Badges shows a row of short claims you write, such as Free Shipping or Handmade. Each badge has a style, an icon and an optional link.
• Quick Nav shows a row of quick links. Each item has a label and an address.
• Text & Photos is the simplest block. It shows text and photos in order, and nothing else.
• Filter shows a sidebar of filters, such as Category, Color, Size and Price, that filter the feed.

Appearance settings

A block can have these settings:

• Alignment
• Whether the block's name appears as a section heading
• Grid columns: 2, 3 or 4
• Image shape: square, wide or banner

Each type only shows the settings that apply to it. A slider has none.

Only two types take images

Only the banner and the slider take images. A banner uses the first image. A slider uses all of them.

You attach images from the media library to the block. You can use the same photo elsewhere without uploading it again.

Rows

Rows appear in a set order. Each row has 1–3 cells.

You can give a row a minimum height. You can also choose whether it stays within the page width or stretches to full width.

Save keeps a draft, Publish makes it live

When you press Save, Litestore writes to the page's draft layout. The storefront never reads the draft.

When you press Publish, Litestore copies the draft into the live layout and clears the storefront's block cache. The change then appears on your store.

This keeps the editor safe. You can rearrange a live page as much as you like, and nobody sees it until you publish.

The same block on several pages

Each cell stores a block's id, not a copy of the block.

This means one block can appear on the home page, a landing page and a category page at the same time. If you edit it, all of those pages change.

Building a page

1. Add a block. In Content → Blocks, pick a type from Add section. Litestore creates the block straight away, names it after its type and opens it in the editor.
2. Fill in its fields. Add images for a banner or slider, the collection for a products grid, the feed for a product feed, the filters for a filter block or the links for a quick nav. A preview at the top shows the block the way your storefront will show it.
3. Place it on the page. Open Page layout, drop the block into a cell and press Save. The page keeps this as a draft until you press Publish.

Choosing a block

Pick Products when you want a fixed grid from one collection you chose. Pick Product Feed when you want a stream that keeps going and stays up to date. That's what turns a page into an endless product page.

Pick Collections or Categories when you want the grid to follow your catalogue by itself. Litestore reads both live, so you never update a list by hand.

Pick Banner for one promotional message, and Slider when you have several images to rotate. They're the only two types that take images.

Reuse a block on several pages when the content really is the same in each place. If the versions will drift apart, make a second block instead. Remember that editing one block changes every layout it's in.

Before you add a block, ask yourself one question:

Should this content follow my catalogue on its own, or am I writing exactly what it says?

Related