Purpose and scope

Each Aphix WebShop page is built by combining a number of different sections to showcase your company and product to its best advantage. Each section can contain blocks, pages or links, or a combination of these three items. See Pages in Aphix WebShop to understand how blocks, pages and links are combined together to create a your unique WebShop.

To recap, a block is a page that has different widgets available which enhance the look and feel of your WebShop. For example, the Latest News section contains two blocks - a “CMS - section” block and a “CMS - Latest Slider” block. The CMS editor opens up with options associated with creating and editing blocks. There are many block types, each of which has a different purpose.

The purpose of this article is three-fold:

  • to explain the purpose of each block type,

  • to show the configurable options available in Aphix Management Interface,

  • to show what the block type looks like in Aphix WebShop.

Learn about Pages → Block types available

General settings for each block type


Field name

Description

1

Name

Specifies the name of this block.

2

Block type

Specifies the block type you wish to use.

3

Parent

Specifies where in Pages hierarchy that you wish this block to be located.

4

Menu index

Specifies where the block is located on the screen.

The lower the number used here, the lower the block is displayed on the screen. Minus numbers can be used.

5

Visibility

Specifies whether this block can be seen by your customers.

It is always set to Hidden when you initially create the block.

Remember to change this setting to Visible when you want your customers to see this content in your WebShop.

6

Permissions

Specifies which of your WebShops (B2B, B2C or guest) can view this block.

7

Customer groups

Specifies which customer groups can view this block.


More information about each block type

Banner - Grid

Block type: Banner - Grid

Used to display a banner's images in a grid.

Key notes

  • Before using this block, you need to set up the banner sets that you wish to use. Banner sets are configured in Content → Banner Management.

  • Once configured, the banner set is available in the drop-down

You can configure the following options:

  • Column size

  • Whether or not to show tiles

  • Padding

Options available in Management Interface

In WebShop, it looks like:



Banner - Slider

Block type: Banner - Slider

Displays a banner’s images in a slider.

Key notes

  • Before using this block, you need to set up the banner sets that you wish to use. Banner sets are configured in Content → Banner Management.

  • Once configured, the banner set is available in the drop-down

You can configure the following options:

  • Which banner set you wish to display

  • Grey scale hover

  • Transition style

  • Time between transitions

  • Whether you wish to paginate it or not

  • Whether you wish to drag the slider left to right

  • Size of each grid for small, medium or default screen sizes

Options available in Management Interface

In WebShop, it looks like:

Slider hero

Block type: Slider hero

Displays an image as a large hero.

You can configure the following options:

  • Transition style - one of slide, back slide, fade, fade up or go down

  • Time between transitions

  • Whether you wish to paginate it or not

  • Whether you wish to drag it or not

Options available in Management Interface

In WebShop, it looks like:


CMS - Content

Block type: CMS - Content

Display some basic CMS content with full text editor.

You can also add an optional product for display.

Options available in Management Interface

In WebShop, it looks like:


CMS - Grid

Block type: CMS - Grid

Displays underlying blocks in a grid.

Key notes

The CMS-Grid block type must have child blocks for it to be visible.

You can configure the following options:

  • Size of each grid for different screen sizes.

  • How the grid should be aligned

  • Include padding size around the block

Options available in Management Interface


CMS - Grid (with columns) and CMS - Grid Column

Block type: CMS - Grid (with columns) and CMS - Grid Column

Indicates that underlying blocks are displayed as a grid with a row of columns.

Key notes

The CMS - Grid (with columns) must have child blocks of type: CMS- Grid Column and CMS-Content for it to to be displayed

Example

To display a grid of two columns, each of which contains text:

  • Create a CMS - Grid (With Columns) block.

  • Create a CMS - Grid Column as a child of the CMS - Grid (With Columns) block

  • Create a CMS - Content block as a child of the CMS - Grid Column block.

This results in the hierarchy shown in the screenshot to the right.

Each block has different options that can be configured, which are also shown in the screenshot.

Options available in Management Interface

In WebShop, it looks like:


CMS - Latest Grid

Block type: CMS - Latest Grid

Displays child pages of a selected page.

You can configure the following options:

  • CMS page where the latest news articles are extracted from

  • Number of articles in the grid

  • Whether or not to show a “View all“ button. When clicked, all articles contained in the listed CMS page are displayed

  • Show published date

Options available in Management Interface

In WebShop, it looks like:


CMS - Latest Slider

Block type: CMS - Latest Slider

Displays child pages of a selected page as a slider.

You can configure the following options:

  • CMS page where the latest news articles are extracted from

  • Number of articles in the slider

  • Whether or not to show a “View all“ button. When clicked, all articles contained in the listed CMS page are displayed

  • Show published date

  • Time between transitions

  • Whether you wish to paginate it or not

  • Whether you wish to drag the slider left to right

  • Size of each grid for different screen sizes

  • Number of columns for different size screens

  • Include padding around the block

Options available in Management Interface

In WebShop, it looks like:


CMS - Media Element

Block type: CMS - Media Element

Displays a text with a title and an image to the side.

Options available in Management Interface

In WebShop, it looks like:


CMS - Section

Block type: CMS - Section

Displays child content blocks in a page wide section. Multiple content blocks are displayed sequentially.

Key notes

The CMS-Section block type must have child content blocks for it to be visible.

You can configure the following options:

  • Set to visible or invisible for mobile, tablet and desktop

  • Include a background colour and/or image

  • Include padding and spacing around the block

  • Set screen to full width or not

Options available in Management Interface

In WebShop, it looks like:


CMS - Slider

Block type: CMS - Slider

Displays multiple child blocks in a slider.

Key notes

The CMS-Slider must have child content blocks to visible for it to be visible.

You can configure the following options:

  • Transition style

  • Transition time

  • Whether you wish to paginate it or not

  • Whether you wish to drag the slider left to right

  • Number of columns for different size screens

  • Include padding around the block

Options available in Management Interface


CMS - Tabs

Block type: CMS - Tabs

Displays child blocks as tabs.

Currently, you can not configure this block type.

Category - Grid

Block type: Category - Grid

Displays sub-categories of a chosen category in a grid.

You can configure the following options:

  • Size of each grid for small, medium or default screen sizes

Options available in Management Interface

In WebShop, it looks like:



Category - Grid Select

Block type: Category - Grid Select

Displays selected categories in a grid.

You can configure the following options:

  • Which categories you wish to link to

  • Size of each grid for small, medium or default screen sizes

Options available in Management Interface

In WebShop, it looks like:


External Page Feed (RSS)

Block type: External Page Feed (RSS)

Includes items from an external RSS feed as a slider.

Key notes

  • The URL you enter must be a specific RSS feed URL

  • The content that supplies the feed must be hosted externally

  • You must include a value in the Page Limit field

  • Typically, external RSS feeds are text only

You can configure the following options:

  • Number of articles to display in the slider. Mandatory

  • Number of columns to display in the slider

Options available in Management Interface

In WebShop, it looks like:


Flockler Feed

Block type: Flockler Feed

Embeds a Flockler social media feed.

Key notes

  • You need to create a Flockler social media feed, and use the embed code for that feed from Flockler.

  • You can create any number of Flockler social media feeds and include them in a CMS - Section block.

You can configure the following options:

  • Whether you want a breadcrumb or not

  • Whether you want to hide the sidebar or not

  • Spacing around the block

Options available in Management Interface

In WebShop, it looks like:



Form - Wufoo

Block type: Form - Wufoo

Integrates an existing Wufoo form.

Key notes

You can configure the following options:

  • Whether you want a breadcrumb or not

  • Whether you want to hide the sidebar or not

  • Spacing around the block

Options available in Management Interface

In WebShop, it looks like:



Media - Video

Block type: Media - Video

Embeds a video.

  • You need a working knowledge of HTML

  • You need to get the source HTML including iframe information. This allows you to change the height, width and other properties of the look and feel of the video you have embedded

  • Another way of embedding a video into a page is to use a CMS-Content block, which has a full text editor and allows you add a video using the URL for that video.

You can configure the following options:

  • Background image

Options available in Management Interface

In WebShop, it looks like:


Product - Add to Cart

Block type: Product - Add to Cart

Displays an “Add to Cart“ button.

Key notes

You can select any product from the product catalogue

You can configure the following options:

  • Whether you want a breadcrumb or not

  • Whether you want to hide the sidebar or not

  • Spacing around the block

Options available in Management Interface

In WebShop, it looks like:

Product - Grid

Block type: Product - Grid

Displays specific products in a grid.

You can configure the following options:

  • You can configure the following options:

    • Product type - this defines what products are listed for display. A featured product is one which is listed in the Featured section of your WebShop.

    • Size of each grid for small, medium or default screen sizes

Options available in Management Interface

In WebShop, it looks like:


Product - Slider

Block type: Product - Slider

Displays specific products as a slider.

You can configure the following options:

  • Product type - this defines what products are listed for display. A featured product is one which is listed in the Featured section of your WebShop.

  • Which products you wish to display

  • Time between transitions

  • Whether you wish to paginate it or not

  • Whether you wish to drag the slider left to right

  • Size of each grid for different screen sizes.

Options available in Management Interface

In WebShop, it looks like:

Related articles