Getting started

Products

Header

Collections

Sections

Pages

How to Set Up the Blog Category Template in Maison

16 septembre, 2026

How to Set Up Product Icons in Maison

The Product icons feature in Maison lets you display reusable product attributes with an icon, title, and description.

You can use Product icons to highlight information such as:

Product materials
Dimensions
Warranty information
Delivery features
Care instructions
Product certifications
Special product benefits

Maison uses a metaobject to store the icon information and a product metafield to assign the required icons to each product.

The default Maison templates use the product metafield:

custom.product_icons

Section overview

Each Product icon entry contains:

Title
Description
Icon

The Product icons can be displayed:

Inside Product information
Below the Product media gallery
Inside a custom Group block
On Product cards

On product templates, all assigned Product icon entries are displayed.

On product cards, you can:

Choose between Grid and List display styles
Display between 1 and 6 entries
Enable horizontal carousel behavior on desktop when using Grid

STEPS:

Create the Product icon metaobject

First, create a reusable metaobject that stores the icon information.

From your SHOPLINE admin, go to Settings > Customize data.
Click Add metaobject.

Enter a name such as Product icon or Product spec.
Add the following fields:
- Title
- Description
- Icon
Click Add or Save.

Maison expects the following field keys:

Field	Recommended data type	Required key
Title	Single-line text	`title`
Description	Single-line text	`description`
Icon	File or image	`icon`

Configure the Title field

Add the Title field to the Product icon metaobject.

Click Add field.
Enter Title.
Make sure the field key ends with title.
Select Single-line text.
Use a single-value field.
Save the field.

The Title is displayed as the primary value.

For example:

Solid oak

5 years

Free delivery

Configure the Description field

Add the Description field.

Click Add field.
Enter Description.
Make sure the field key ends with description.
Select Single-line text.
Use a single-value field.
Save the field.

The Description is displayed as supporting text.

For example:

Material

Warranty

Shipping

On product cards using the List display style, the Description is shown as the label and the Title is shown as the value.

Configure the Icon field

Add the Icon field.

Click Add field.
Enter Icon.
Make sure the field key ends with icon.
Select a file or image data type.
Restrict the accepted file type to images if this option is available.
Use a single-value field.
Save the field.

Use a simple square icon with a transparent background for the best result.

Create Product icon entries

After creating the metaobject definition, create reusable Product icon entries.

From your SHOPLINE admin, go to Content > Metaobjects.
Select the Product icon metaobject.
Click Add entry.
Upload an image in Icon.
Enter the main product attribute in Title.
Enter the supporting label in Description.
Click Save.

For example:

Icon	Title	Description
Wood icon	Solid oak	Material
Warranty icon	5 years	Warranty
Delivery icon	Free delivery	Shipping
Assembly icon	Easy assembly	Setup

Create a separate entry for each reusable product attribute.

The same entry can be assigned to multiple products.

Create the Product icons metafield

Create a Product metafield that stores a list of Product icon metaobject entries.

From your SHOPLINE admin, go to Settings > Customize data.
In the Metafields area, select Product.
Click Add fields.

Enter Product icons as the field name.
Set the namespace and key to:

custom.product_icons

Select Metaobject as the data type.
Select the Product icon metaobject you created.
Enable the multiple-value or list-entry option.
Click Add or Save.

The default configuration is:

Setting	Value
Field name	Product icons
Namespace and key	`custom.product_icons`
Data type	Metaobject
Referenced metaobject	Product icon
Value type	List / multiple entries

If you use a different namespace and key, enter that exact value in the Product icons block's Metafield setting.

Assign Product icons to a product

After the Product icons metafield is created, assign entries to your products.

From your SHOPLINE admin, go to Products.
Open the product you want to configure.
Scroll to Product metafields.
Find Product icons.
Open the metafield.
Select the Product icon entries you want to assign.
Arrange the entries in the preferred order if SHOPLINE allows reordering.
Click Save or Update.

Each product can use:

Different Product icon entries
Shared Product icon entries
A different number of entries
No entries

Products without assigned entries do not display Product icons.

Display Product icons in Product information

You can display Product icons inside the main Product information area.

Open the Maison theme editor.
Open the required Products template.
Open the main Product section.
Expand Product information.
Click the + icon.
Select Product icons.
Open the Product icons block.
Enter the metafield:

custom.product_icons

Drag the block to the desired position.
Adjust Spacing and Size if needed.
Click Save.

A common placement is:

Product title
Product price
Product icons
Variant picker
Buy buttons

When Product icons are displayed in Product information:

Entries are displayed vertically
The icon appears beside the text
Title is the primary value
Description is supporting text
All assigned entries are displayed

Display Product icons below Product media

Product icons can also be placed below the product media gallery.

Open the required product template.
Open the main Product section.
Expand the Product media block.
Click the + icon inside the Product media area.
Select Product icons.
Enter:

custom.product_icons

Adjust Spacing and Size as needed.
Click Save.

In the Product media area:

All assigned entries are displayed
Entries use a grid layout on larger screens
The layout can reduce the number of columns on smaller desktop screens
Entries become horizontally scrollable on mobile

This placement is useful when you want product attributes to appear visually connected to the product images.

Display Product icons inside a Group block

You can place Product icons inside a Group block for more control over the surrounding layout.

Open the required product template.
Add or open a Group block.
Click the + icon inside the Group.
Select Product icons.
Enter:

custom.product_icons

Configure the Group layout, background, spacing, and colors as needed.
Click Save.

A Group can combine Product icons with other content such as:

Heading
Text
Divider
Button
Image

Display Product icons on Product cards

Maison also supports Product icons on Product cards.

The Product icons block must be added inside Product extras.

Open a section that displays Product cards.
Expand the Product card structure.
Locate or add Product extras.
Open Product extras.
Click the + icon.
Select Product icons.
Enter:

custom.product_icons

Configure the display settings.
Click Save.

Product cards can appear in areas such as:

Collection product lists
Featured collection sections
Recommended products
Search results
Other product-grid sections

Configure Product card display style

Product-card Product icons include a Display style setting.

Available options are:

Display style	Description
Grid	Displays the icon image together with the Title and Description in a bordered grid layout.
List	Hides the icon image and displays Description and Title as label-and-value rows.

Grid

With Grid:

The Icon image is displayed
Title and Description appear beside the icon
Entries use a bordered grid layout
Entries become horizontally scrollable on mobile

List

With List:

The Icon image is hidden
Description appears as the label
Title appears as the value
A dotted divider appears between the label and value
Entries are displayed vertically

For example:

Material ........ Solid oak

Warranty ........ 5 years

Shipping ........ Free delivery

Use List when you want Product icons to behave more like a compact specification list.

Set Items to show on Product cards

The Product icons block on Product cards includes Items to show.

You can display between 1 and 6 entries.

For example, if a product has six Product icon entries but Items to show is set to 3, only the first three are displayed on the Product card.

This setting:

Only affects Product cards
Does not remove entries from the Product metafield
Does not limit the Product icons shown on the Product template

Enable carousel on desktop

When Display style is set to Grid, you can enable Enable carousel on desktop.

This creates a horizontally scrollable Product icons area.

On desktop devices that support hover, Maison can move the icon list toward the end when the customer hovers over the Product icons area and return it to the beginning when the pointer leaves.

On mobile devices, customers can swipe horizontally through Grid entries.

Configure Product icons on multiple templates and sections

The custom.product_icons metafield definition only needs to be created once.

However, the Product icons block must be configured separately in each product template or Product-card section where you want it to appear.

For product templates:

Open each product template.
Add the Product icons block.
Enter the metafield namespace and key.
Configure its position, spacing, and size.
Save the template.

For Product cards:

Open each relevant product-grid section.
Expand Product card > Product extras > Product icons.
Enter the metafield.
Configure Display style, Items to show, carousel, and spacing.
Save the section.

Product icon metafield structure

Maison expects this structure:

Product metafield
└── custom.product_icons
    └── List of Product icon metaobject entries
        ├── Title
        ├── Description
        └── Icon

Each metaobject entry should contain:

Field	Data type
Title	Single-line text
Description	Single-line text
Icon	Image file

Recommended image guidelines

For the best display:

Use square icons
Use transparent backgrounds where possible
Keep the design simple
Avoid small text inside the image
Use consistent image dimensions
Use icons with similar line thickness and visual weight
Add alternative text where possible
Check the icons against both light and dark storefront backgrounds

Troubleshooting

If Product icons do not display correctly, check the following:

Make sure the Product icons block Metafield setting contains custom.product_icons.
If you use another namespace and key, enter that exact value instead.
Confirm that the metafield was created for Product.
Make sure the metafield supports a list or multiple metaobject entries.
Create Product icon entries under Content > Metaobjects before assigning them to products.
Make sure the metaobject contains the exact field keys title, description, and icon.
Confirm that the product has Product icon entries assigned.
If Product icons appear on the product page but not on Product cards, add the block under Product extras in the relevant Product-card section.
If Product icons appear in one collection but not another section, configure the Product-card structure separately in each section.
If Product icons appear on one product template but not another, add the block to the missing template.
If the List style does not show the uploaded Icon image, this is expected. The List style intentionally hides the icon.
If Enable carousel on desktop is unavailable, set Display style to Grid.
If fewer icons appear on Product cards than on the product page, increase Items to show.
If Product-card text is shortened, reduce the Title and Description length.

Need Further Assistance

If you encounter any issues or need additional help with your Maison theme, please reach out to our support team via our Ticket System for assistance within 8 hours.

- 16 septembre, 2026
Comparison of Maison Product Comparison Features
- 16 septembre, 2026
How to Set Up Facets and Filters in Maison