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 'Featured product', then click on 'featured product'

3) Done, your Featured product 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

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

Image Layout:
Select how you want to show product image, you can select from single image with scroll, 2 images with scroll or the go to one image slide.

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.

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).

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.

Image info label

In Xclusive theme, this is a new feature allows you to add a label to your product images:

Font size:
You can select a general font size for all the elements in the featured product section.

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 13 elements added, you can edit them, remove them or add more elements.
The following elements are added:
- Title
- Short product description
- Variant picker

- Pickup availability
- Inventory & delivery time
- Price
- Buy button
- Spacer
- Information list

- True size bar

- Benefits score bar

- Trustbadge

- Share buttons

1. Editing 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 doesn't 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 doesn't 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 doesn't 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 'collapsible' 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.

1.11 Pickup availability

After you clicked on the pickup availability block, on the right of your screen you'll notice there is nothing to set up. That's because this block doesn't have any settings. But once you've added it if you offer pickup options on your store it will display pickup is available for that product.

1.12 True Size bar

You can display a size bar that display how true is your product to the sizes available for the product:

1.12 Trustbadge

After you clicked on the pickup availability block, on the right of your screen you'll notice some text saying: You can find the settings in the general theme settings under the tab named 'Trustbadge'. this is where you can setup your trustbadge.

1.12 Share buttons

After you clicked on the share button section you will see a share icon appearing in the section and you have the options to choose from:

1.12 Benefits score bar

You can enter or define different benefits or attributes of the product and display a score of benefit from 1 to 5 to your customers.

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?