Section: Featured product

Everything you need to know to set up the featured product section

Jalal avatar
Written by Jalal
Updated over a week ago

The featured product section makes it possible for you to add a nice section with a featured product.

To activate this section you first have to add the section to your page. This can be done in a few small steps.

1) Click on 'add section' which can be found in your left sidebar

2) Scroll down, or search for 'Video banner', then click on 'Video banner'

3) Done, your Video banner section is added.

Note: Don't worry if you've added the section and don't see it. The section requires to have a product selected to be shown. We can select a product in the settings.

General settings

The general settings contains the settings for the styling and layout of the 'featured product' section.
Simply click on the 'section' to open the settings.

On the right sidebar, the following settings will show

On the right sidebar, the following settings will show:

Product

Show on desktop
Do you want to show the product gallery thumbnails on desktop? These thumbnails/images are on the left or bottom next to your product image (setting related).

Show on mobile
Do you want to show the product gallery thumbnails on mobile? These thumbnails/images are on the left or bottom next to your product image (setting related).

Product:
Select a product you want to feature.
Note: Select a product to activate the section, otherwise the section will be hidden.

Show thumbnails:
Select if you want to show product thumbnails (mulitple images).
Choose from: On desktop and mobile, on mobile, on desktop, don't show.

Layout thumbnails:
Select where you want to show product thumbnails, is this horizontal (below the product) or vertical (next to the product).
Choose from: Vertical, Horizontal.

Show product description:
Check this option to show the product description of the featured product.


How to configure the featured product elements?

By default, there are 8 elements added, you can edit them, remove them or add more elements.
The following elements are added:
- Title
- Short product description
- Variant selection
- Inventory & delivery time
- Price
- Buy button
- Spacer
- Information list

1. Editting the featured product elements
To edit the elements you simply click on the element you want to edit in your sidebar on the left of your screen.


1.1 Title

After you clicked on the title block, on the right of your screen the following sidebar will open.

Layout:
Select where you want the title to align.

Show vendor:
Select if you want to show the brand and vendor, only the brand, only the vendor or to not show both.

Show product ratings:
Check the box if you want to show the product ratings.


1.2 Short description

After you clicked on the short description block, on the right of your screen you'll notice there is nothing to set up. That's because this block doesnt have any settings.

1.3 Variant selection

After you clicked on the variant selection block, on the right of your screen you'll notice there is nothing to set up. That's because this block doesnt have any settings.

1.4 Inventory & delivery time

After you clicked on the inventory & delivery time block, on the right of your screen you'll notice there is nothing to set up. That's because this block doesnt have any settings.

1.5 Price

After you clicked on the price block, on the right of your screen the following sidebar will open.

Show 'incl. - or excl. tax' text:
Check the box to show a notice after the price with 'incl. tax or excl. tax'.

1.6 Buy button

After you clicked on the buy button block, on the right of your screen the following sidebar will open.

Show 'incl. - or excl. tax' text:
Check the box to show a notice after the price with 'incl. tax or excl. tax'.

1.7 Spacer

After you clicked on the spacer block, on the right of your screen the following sidebar will open.

Height:
The spacer creates whitespace between the elements above and below the spacer. Select how much whitespace you want to use.

1.8 Information list

After you clicked on the information list block, on the right of your screen the following sidebar will open.

Information list item 1 - 6:
The information list is basicly an USP list.
Fill in a USP, you can fill in 6 different USPs!

1.9 Content block

The content block settings contains the settings for how the extra content that you can make on the productpage. For example, how to wash this product or how to use this product.

Simply click on the 'block' to open the settings.

On the right sidebar, the following settings will show:

Show in accordion:
Enable this if you want your content to show in an accordion. This will have the same look as the 'collapsable' content.

Heading:
Set the name of the heading here.

Icon:
If you want you can also use an icon that will show before the heading, do you want to use an icon here, please select one.

Custom image:
Set an custom image for your content here. This will show as an icon before the title and will overrule the icon setting.

Use .svg format:
Want to use a custom image for the icon in .svg format? paste the link here, this will overrule the custom image and icon setting.

Max image width:
Set the max image with for the custom image here.

Text:
Set the text (explanation) here.

Page content:
Want to use page content (maybe you have a seperate washing instructions page), you can select it here, so you dont have to type it again!

Image:

Do you want to use an image? You can upload it here.


Image width:

If you've uploaded an image, you can set the width here.

1.10 Custom HTML

The custom HTML makes it possible for you to inset custom HTML within your productpage.


Simply click on the 'block' to open the settings.

On the right sidebar, the following settings will show:

Custom HTML
Add app snippets, embed code or other HTML code to create advanced customizations.

2. How to remove a part of the section?

Don't want to use a certain element in the featured product section? Just remove them!
To remove a block you simply click on the block you want to remove in your sidebar on the left of your screen.

After you clicked the block, on the right of your screen the sidebar will open.
On the bottom left of this sidebar, the following button 'Remove block' shows.

Simply click on this button and your block will be deleted.

Did this answer your question?