Product features settings

The Product features

In the demo store, we use two heading blocks. Select the Hero heading style for the best visual result, placing one heading on the left and the other on the right.

At the center of the section, there is a Hotspot Image block — a large transparent image that represents the featured product, with a hotspot item positioned on top of the image. You can choose one of three actions for the hotspot item: open a quick-view popup, link to the product detail page, another page or redirect to an external source.

The position of the hotspot item can be adjusted using a slider. The image width can also be customized separately for desktop and mobile devices.

In the demo store, below the hotspot image, there is a text block with a button on the left and a horizontal product card on the right. The product card displays the related product, including its image and title.

Demo example

How to access the Product features section

Access this section through the theme customizer:

Navigate to Online Store > Themes
Select “Customize” on your active theme
On any theme template, click “Add section”
Search and select “Product features”

Note: Section cannot be added to the Password page.

To insert a new section between existing ones, follow the steps in the article "Sections and blocks" and locate the section titled “How to add a section”.

How to configure the Product features section

Basic Components

The “Product features” section consists of two primary components:

General settings – These control the overall settings of the section.
Block – Each block has its own individual settings.

Available block types include:

Heading
Hotspot image
Text
Product card

General settings

Setting

Description

Color scheme

Apply color scheme for the section from the available color schemes list.

Read 'Color scheme' article to learn more about color schemes.

Subheading, heading, and description settings are global settings that apply to the entire theme. They can be found in the Global settings category.

For more details, read this article: Subheading, heading, and description

Padding

Padding is the space inside a section that separates the content from the section’s edges.

See this article to set paddings: Section padding