Build and arrange the home page blocks in your Diversity theme

Build a home page where visitors can find products and information, and customize the order and content for both mobile and desktop.

This guide applies to Diversity themes in Abicart Go, Plus, and Pro. Which blocks and settings are displayed depends on the active theme, theme version, and the store's features. TPL has a different editor. The store's own newsletter block requires Plus or Pro; external services require their own accounts and terms.

1. Open and edit the correct home page

1. Open Appearance → Themes and edit the active Diversity theme.
2. Select Content → Home page.
3. Click an existing block to change its settings, or select Add block for new content.
4. Drag the blocks in the list to change the order. For example, move a custom content block with a map further down if that's where the map should be displayed.
5. Check the language fields, finish editing the block, and save the theme.

Changing the image size in an image file does not turn a three-column block into a single wide block. Choose a block layout that suits the content. A single showcase, two, three, and four showcases are different choices. A full-width product block displays one product; it is not a general full-width mode for all types of blocks.

2. Choose blocks based on the task

Products and featured product groups

Products: enter a title and select a source, for example, all products, a product group, new arrivals, latest, sale prices, or a manual selection. For automatic lists, you choose the sorting, for example, price, name, product number, created, popularity, or stock. Select grid, list, or carousel, limit the number of products, and set columns for desktop, tablet, and mobile where a grid is used.

Featured product groups: enter a title, search for a product group, and click Add product group. Repeat for the groups you want to display.

Full-width product: select the product and whether to display the price, description, buy button, and any attachment link. Check that the product is visible and purchasable for the intended customer type.

Custom content, images, and showcases

Custom HTML: use the text editor for headings, body text, text size, alignment, bold/italic text, colors, images, video, and links. The code button opens the HTML mode. Only paste trusted code and check how external embeds interact with the store's consent settings.

Slideshow: select images from Appearance → File archive. Set automatic switching if it is to be used, select slide or fade, as well as proportions and cropping. Make sure that important text or motifs are not cut off on mobile devices.

Showcase: A showcase can contain an image, three lines of text, and a link to a product, product group, custom page, or external address. Choose one, two, three, or four showcases depending on the desired layout; multiple showcases will be displayed side-by-side where screen width allows.

Square slider: a smaller square slideshow with an image and a link.

Newsletter signup

Subscribe to newsletter: Enter the text above the email field and the confirmation text after signup. The visitor can submit their email address without first creating a regular customer account. The address is transferred to the store's customer registry for newsletter management. The block and the store's own newsletter feature are included in Plus and Pro.

Mailchimp form: If you use Mailchimp, retrieve an embedded signup form from your Mailchimp account and paste the form code into the block. This is a signup to Mailchimp and should not be confused with Abicart's own newsletter block or a complete e-commerce integration.

Instagram, reviews, and external feeds

Instagram: Add the block, use its connect button, and log in to the correct Instagram account to grant the requested access. Finalize the return to the editor and save. If the connection needs to be renewed, use the connection feature again. Do not share the access key in the page's visible HTML.

If the heading is displayed but no images are visible, first check if other visitors are experiencing the problem. Try a clean browser session and check for consent or content blocking. If the error affects everyone, check the account connection and any error messages. Adding the same block multiple times will not fix a faulty connection.

Trustpilot: retrieve the intended embed code from the correct account and paste it into the block's field. Flowbox: enter the correct Flowbox key and save. What data is displayed and which services are included are controlled by the respective external service and agreement.

Countdown and selling points

Event countdown: select when the block should start displaying and the end time it should count down to. Enter the content that precedes the timer and choose background cropping, text colour and whether to show the timer. Check the time settings before a campaign. Follow the event countdown setup guide for details.

Unique Selling Points: Add short selling points in the block provided for the home page. If you want selling points in the header, use the header's own settings, if the theme has them. A block on the home page does not automatically create a slideshow in the header.

3. Review and troubleshoot before you finish

• Wrong order: arrange the blocks in the start page's block list, not by changing the content of an image.
• Wrong width: check the selected block and its column/image settings on mobile and desktop. A map embed can also have its own fixed width in HTML.
• Products missing: check the block's selection, sorting, and quantity, as well as the products' visibility.
• Change not visible: check that the correct theme, language, and start page are saved and displayed in the preview.
• Want to measure clicks: a block or a link does not automatically mean that a specific click report is available. Decide which links to measure and check separately that the chosen analytics solution registers them without duplicate tags and with the correct consent.

Quick start

1. Edit active Diversity theme → Content → Start page.
2. Select, edit, and arrange blocks according to the visitor's task.
3. Check content and links per language and save.
4. Preview on mobile and desktop and check external connections.

Subscription and theme

Diversity themes are available in Go, Plus, and Pro. Newsletter subscription requires Plus or Pro. The range of blocks varies between themes and versions; external services may require separate agreements. This guide does not apply to the TPL editor.