The Featured Products element gives you a flexible way to spotlight specific products on store pages. With customisable placement, layout options, and straightforward product selection, your most important items are easy to find and engage with.

How It Works

Navigate to the Sites > Stores section in your account, then create a new store or click an existing one to edit it.

Add the Element

Open the page builder or create a new page.

Select the option to Add an Element then locate the Featured Products element.

Drag and drop the element into position to maximise visibility.

General Settings

Name

Configure the element's name for easy identification.

Text Options

Customise the Featured Products headline by updating the text in the provided field. Any changes will appear in the builder as a preview.

Products

In this section, you can add products, rearrange the order they appear in, link products you have created, and delete products as needed.

To link products, click any placeholder product in the builder under the Products group. Use the search bar to find and select the products you want to display. The selected products will replace the placeholders.

📌 Note: By default, the dropdown displays only 10 products. Use the search function to find additional items.

Double-click items on the canvas to select or configure them directly.

Ensure that each product is properly linked so it can be displayed on your store page!

Typography

Choose the font family for your heading, product name, product price, and price discount, as well as their font weight and size for desktop and mobile.

Layout

Adjust the number of products per row in the Layout tab. By default, 3 products are displayed per row, but this can be updated to a maximum of 5 on desktop and 2 on mobile.

Reviews and Ratings

Choose whether to display reviews and ratings for the selected products to help showcase your offerings.

Wishlist Products

Enable the wishlist for products so logged-in clients can save the products they love to check out at a later time.

Colour

Need to make any other colour adjustments? Scroll to the bottom of the General settings to make your changes.

Styles

Margin & Padding

Switch to the Styles tab to customise the Margin & Padding of the element for both desktop and mobile views.

Border Options

Adjust the element's border by modifying its colour, thickness, radius, and style to match your design preferences.

Shadow

Enhance your design with box shadows. Click the plus button to apply a default outer shadow, which can be further tailored using custom shadow settings.

Visibility

Control whether the element is visible on desktop or mobile by adjusting the visibility settings.

Custom Class and CSS Selector

Add a custom class in the designated field and copy the CSS selector if needed for advanced styling or integration.

Preview and Publish

Click Save to save your changes, then review your live page to ensure the Featured Products element displays as intended. Clicking on a product redirects users to its detail page.

Once you are satisfied with the page configuration, click publish to view the element on your live page!

By adding this element to your store pages, you can draw attention to specific items and improve the shopping experience for your visitors.

✍️Important Notes

  • Changes to product details, such as pricing or images, will automatically update in the Featured Products element.
  • Product selection must be completed for live pages; placeholder products will not be displayed to users.
  • Some text elements, like error messages, may not appear in the builder preview but can still be customised.