Sections & blocks
ShopWired's sections and blocks feature allows you to design the layout of each of your website's pages.
There are various types of sections available depending on the content you wish to add to a page. For example, to display a large image on your homepage with some text, you might choose either the Hero image slider or Image with text overlay section.
You can use the theme editor to add sections to pages, customising the layout of each page of your website. Using the theme editor, you can create new sections, add content to those sections, and arrange them in your desired order.
- Most section types offer specific types of blocks that you can add
- Some section types only allow one type of block, whilst other section types allow you to select from multiple block styles or layouts
- Some section types allow you to add multiple blocks within the same section (for example, if you are configuring an image carousel)
- Some section types only allow you to configure a single block
While most sections can be added to any type of page, some are specific to certain pages. For example, the Product information section is only available on product pages as it defines the details displayed about a product.
The sections and blocks system is also used to build landing pages on your website
Customising your website pages with sections and blocks
Customising your website pages with sections and blocks
When you open the theme editor, your website's home page will be loaded in the live preview. You should use the live preview to navigate to different pages to customise that page's themes settings or its sections. You can also use the page navigator (shown at the top of the theme editor) to navigate to each type of page.
Sections are created and configured using the sidebar menu on the left-hand side of the theme editor. You can use the sidebar to add new sections, new blocks within a section, and to reorder the layout of sections and blocks.
If you don't want to display a specific section or block, you can use the hide
option to hide it from your website temporarily and display it again later.
Section settings
Section settings
Each section may have one or more settings that are used to configure how the section displays the content that it is responsible for. Some sections have more settings than others.
For themes that use the colour schemes feature, you can also select the colour scheme for the section separately using the section colour scheme
option.
Customising blocks
Customising blocks
Blocks are customisable modules that are used to add content within sections. You can use blocks to add different types of content to a section, such as adding images, text, links, and buttons.
Once you select a section, you'll be able to add new blocks, edit existing blocks, and reorder the blocks within the section.
The types of blocks that can be added and configured within a section depend on the type of section and the theme you are using.
Available sections
Available sections
The table below lists the available sections that can be configured on Version 5 themes.
The exact sections that are available, their design, display, and layout are determined by the theme. Not all sections are available on all themes (except where indicated in the availability column).
Category | Section | Description | Notes | Theme availability |
---|---|---|---|---|
Image & text | Hero image slider | A large image / video with text | All themes | |
Image & text | Image with text overlay | A large image / video with text | All themes | |
Image & text | Image with text | An image and text side-by-side | All themes | |
Image & text | Image & text | An image and text side-by-side | An alternative design to the image with text section | Vivify |
Text & icon | Text & icon | Up to 3 separate text snippets with optional icons | Maximum of 3 text and icon snippets | Vivify |
Products | Embedded products | Embed a set of products | Select from or products from a category | All themes |
Products | Featured product | Feature a specific product you select | Vivify | |
Products | Recently viewed products | Display the visitor's recently viewed products | All themes | |
Products | Embedded categories | Embed a set of categories | Select categories to display from a parent category | All themes |
Products | Featured categories | Embed your | All themes | |
Products | Embedded brands | Embed your brands | All themes | |
Products | Customers also bought | Display automatic product suggestions on product pages based on what other customers have also bought in combination with the product | All themes | |
Products | Related products | Display a product's | All themes | |
Products | Product bundles | Display product bundles the product is a of | All themes | |
Text | Text section | Configure text to be displayed | All themes | |
Text | Text columns (with optional images) | Display text in columns with images | All themes | |
Text | Multi-columns (with optional images) | Display text in columns with images | Vivify | |
Text | Text boxes with images | Display text alongside images | Vivify, Themia | |
Text | Blog posts | Embed blog posts | All themes | |
Text | Testimonials | Display testimonials you configure | All themes | |
Text | FAQs | Display a set of frequently asked questions | Vivify | |
Text | Website page content | Embed content from a | All themes | |
Media | Gallery of images | Display a gallery of images | Select from either an or upload images directly | All themes |
Media | Embedded video | Embed a video hosted on a video hosting website like YouTube or Vimeo | All themes | |
Forms | Custom form | Configure a custom form that visitors complete | When completed, the contents of the form are sent to you by email | Vivify |
Forms | Newsletter form | Display a newsletter sign-up form | Visitors are asked for their email address | All themes |
Other | Custom HTML | Configure a custom HTML section | All themes | |
Other | Separator | Display a separator | Used to separate sections | All themes |
Other | Extra margin | Add some extra empty space between sections | All themes | |
Other | Developer section | Add a custom section | Used by theme developers to configure bespoke sections | All themes |