Add shelves and embedded HTML
In this article we will show you how to add and configure a product shelf and an embedded HTML block on the home page or on a custom page of your store.
💡 If your store still uses the previous editor, see Set up the shelves, which applies to that (legacy) editor.
WHERE TO FIND SHELVES AND EMBEDDED HTML
Shelves and embedded HTML are blocks that you add to a page from Appearance.
1. Go to your Control Panel and open Settings > Interface > Appearance.
2. Open the page you want to edit (for example, the home page or a custom page) with the Edit button.
3. Click Add block and choose the option you need: Product shelf or Embedded HTML.
4. When you finish, click Publish so the changes show up in your store.
💡 Changes do not reach the live store until you publish the page. For the full process, see Edit and publish a page in Appearance.
PRODUCT SHELF
A shelf is a row of products with a title, filters and an order. For example, you can use it to highlight your latest releases, your free titles or the books by one author.
Add a shelf
1. On the page you are editing, click Add block and choose Product shelf.
2. Type the Shelf title. This is the heading your visitors see above the row. It is required and accepts up to 255 characters.
3. Under Filters, add at least one filter (see the next section).
4. Choose the Publications order.
5. Click Add block to save the shelf to the page draft.
⚠️ A new shelf is not saved to the draft until you click Add block, and it cannot be saved without at least one filter. A shelf that already exists is saved automatically as you edit it.
Edit an existing shelf
1. In the page block list, find the shelf row. You will see its title and its source, which is taken from the first filter.
2. Click Edit to open the shelf editor.
3. Make the changes you need. They are saved automatically, but they do not show in the store until you click Publish.
From the same row you can also:
| Action | Result |
|---|---|
| Eye icon | Hides or shows the shelf without deleting it. |
| Edit | Opens the shelf editor. |
| Duplicate block | Inserts a copy right after the original, titled "Title (copy)", with the same visibility. |
| Remove block | Removes the shelf from the draft, after a confirmation. |
| Drag handle | Changes the position of the shelf on the page. It also works from the keyboard. |
💡 If you discard the draft before publishing, a removed shelf comes back.
Available filters
Each filter has a type and, in most cases, a value. To add another filter, click Add filter. To remove one, use the remove button on its row.
| Filter type | What it shows | How you choose the value |
|---|---|---|
| Free | Free products. | No value needed |
| Latest | The most recent products. This filter applies its own order. | No value needed |
| On sale | Products with a discount. This filter applies its own order. | No value needed |
| My content | The products each signed-in reader already owns. | No value needed |
| Genre | Products in one subject category. | Dropdown list |
| File type | Products in one format: EPUB, PDF or Audiobook. Printed appears only in stores that sell physical goods. | Dropdown list |
| Audience | Products for one audience. | Dropdown list |
| Language | Products in one language. | Dropdown list |
| Years | Products from one year. | Dropdown list |
| Months | Products from one month, shown as year and month (for example, "2026 October"). | Dropdown list |
| Author | Products by one author. | Search as you type |
| Category, Collection, etc. | One filter for each classification enabled in your store. The exact list depends on your store. | Search as you type |
💡 In filters with search, results appear from the third character you type.
Rules for combining filters:
- Filters are combined: a product must meet every filter to appear in the shelf.
- Each filter type can be used only once per shelf. To show two authors, create two shelves or use a classification that groups them.
- Every filter that needs a value must have one before you save.
- If the first filter is My content, that shelf is shown only to signed-in readers.
Publications order
The Publications order selector offers three options. The default is Newest first.
| Option | Result |
|---|---|
| Newest first | Most recently published products first. |
| Most popular | Most popular products first. |
| Alphabetical A-Z | Alphabetical by title. |
⚠️ If the shelf includes the Latest or On sale filter, the selector does not appear, because those filters apply their own order and it cannot be customized.
What your visitors see
| Behavior | Detail |
|---|---|
| Number of products | Up to 8 per shelf, in a carousel with arrows that appear when the cursor hovers over it. |
| See more link | Shown only when the shelf is full (8 products). A shorter shelf has no link. |
| Shelf title | Links to the filtered catalog for that shelf. |
| Shelf with no products | If there are no products for the visitor, the shelf is not shown. In the preview you will see a notice that it is not shown while empty. |
| "My content" shelves | Not shown to visitors who are not signed in. |
| Loading | The first 3 shelves load with the page. As visitors scroll down, 5 more load each time. |
Hide adult content
On the home page, the Blocks tab includes an Adult content exclusion switch. It hides content with the "Adults only" audience from every shelf. This switch saves immediately, without publishing.
EMBEDDED HTML
The embedded HTML block shows the code you paste, exactly where it sits in the block list. It is useful for content the other blocks do not cover, such as a form, a banner or a widget from another service.
Add an embedded HTML block
1. On the page you are editing, click Add block and choose Embedded HTML.
2. Paste or type your code in the HTML content field.
3. Check the character counter shown below the field.
4. Click Publish so the block shows up in your store.
How the editor works
| Item | Behavior |
|---|---|
| Code field | Highlights tags, attributes, comments, scripts and styles. Highlighting turns off above 20,000 characters. |
| Keyboard | The Tab key indents the code. The Esc key leaves the field. |
| Limit | 65,000 characters. A counter shows "N / 65,000 characters" and the editor stops accepting text when it reaches the limit. |
<template> tag | Not allowed. The editor shows a notice if you include it. |
| Row in the block list | Shows the number of characters in the block. |
💡 The block is created when you start typing. If you open the editor and leave without typing anything, the draft does not change. An empty block shows nothing to visitors.
⚠️ The code is shown as you write it: scripts, iframes and styles run exactly as written, both in the preview and in the published store. The editor does not clean or limit the code. Paste only code you trust.
How the code is isolated
By default, the store keeps embedded HTML apart from the rest of the page:
- The styles of your store do not reach the embedded code. A heading or a button inside the block does not take the fonts, colors or shapes of your store.
- The styles of the embedded code do not leak into the rest of the page. A rule such as "all links in red" affects only the block.
- Scripts in the block can only find elements that are inside the block.
⚠️ If your HTML loads an external script (a script tag with a source address), that block is not isolated and runs directly on the page. Third-party tools that need access to the whole page, such as chat or booking widgets, work this way.
If you had widgets in the previous editor
When the block-based store is activated, widgets placed at the top of the store become embedded HTML blocks. Widgets placed above the navigation bar are not converted, because blocks have no place in that area.
The block-based store loads only its own styles and code, so a widget that relied on the previous store can look unstyled or stop working. The fix is always the same: make the HTML self-contained, with everything it needs.
| What the widget relied on | What happens | Fix |
|---|---|---|
| Store styles or fonts | It shows with the browser's basic styles. | Add the styles inside the HTML, in a style tag. |
| Bootstrap classes | The classes do nothing. | Rebuild the layout with plain styles inside the HTML. |
| A carousel or other library loaded by the previous store | The library is missing and the script fails. | Load the library from the HTML with a script tag. The block will then run directly on the page. |
| Page elements outside the widget | The script cannot find them. | Keep inside the widget every element the script needs. |
| Custom CSS or custom header code from the previous store | Not applied. | Move the styles into the widget or redesign with the store theme. |
LIMITS
| Item | Limit |
|---|---|
| Shelf title | 255 characters |
| Filters per shelf | At least 1, one per type |
| Characters before search starts | 3 |
| Products per shelf | 8 |
| Shelves loaded with the page | 3, then 5 per scroll |
| Embedded HTML | 65,000 characters |
| Syntax highlighting | Up to 20,000 characters |
FREQUENTLY ASKED QUESTIONS
Why does a shelf not show in my store?
Check these causes in order:
- The page is not published, or the store is not live yet. Visitors see only the published version.
- The shelf is hidden (eye icon).
- No product meets the filters for that visitor. Empty shelves are not shown.
- The shelf starts with the My content filter. Visitors who are not signed in do not see it.
Why does my shelf have no order selector?
Because it includes the Latest or On sale filter, which set their own order.
Why does my shelf have no See more link?
The link appears only when the shelf shows 8 products. If there are fewer matches, there is nothing more to show.
Can I embed a third-party script?
Yes. Add the script tag to the embedded HTML. In that case the block runs directly on the page, without isolation.
RELATED ARTICLES
- Block-based store
- Edit and publish a page in Appearance
- Set up the navigation bar and footer
- Customize the store theme
- Create custom pages and set up their SEO
- Add a pop-up and a product page notice
We hope this tutorial has been easy for you. If you have questions, write to us at [email protected].