Getting started

Products

Header

Collections

Sections

Pages

How to Set Up the Blog Category Template in Maison

8月 10, 2026

Set up Product icons

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

For example, product icons can be used to highlight:

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 icons can be displayed:

On product cards
Below the product media gallery
Inside the product information area
Inside a custom Group block on the product template

How to Set Up Custom Product Icons in Maison

Steps:

Create the Product icon metaobject

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

Enter the metaobject name:
```
Product spec
```
Add an optional description explaining that the metaobject stores reusable product icons.
Add the following three fields:
- Title
- Description
- Icon

Click Add or Save.

A metaobject stores reusable structured content. After creating the metaobject definition, you can create multiple entries and assign the same entries to different products.

Add the Title field

In the Product icon metaobject definition, click Add field.
Enter the field name:
```
Title
```
Make sure its namespace and key end with:
```
title
```
Select Single-line text as the data type.
Select the single-value option.
Click Add or Save.

The Title is displayed as the primary or bold value for the product icon.

For example:

Solid oak

Add the Description field

Click Add field again.
Enter the field name:
```
Description
```
Make sure its namespace and key end with:
```
description
```
Select Single-line text as the data type.
Select the single-value option.
Click Add or Save.

The Description is displayed as the secondary supporting text.

For example:

Material

When the Product icons block uses the List display style on product cards, the Description appears as the label and the Title appears as the value.

Add the Icon field

Click Add field again.
Enter the field name:
```
Icon
```
Make sure its namespace and key end with:
```
icon
```
Select a file or document data type.
Restrict the accepted file type to images if this option is available.
Select the single-value option.
Click Add or Save.

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

Maison displays the icon at a small size, so avoid images containing detailed text or very fine elements.

Create Product icon entries

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

For example:

Icon: Wood icon
Title: Solid oak
Description: Material

Create a separate entry for every product attribute you want to reuse.

Other examples may include:

Icon: Warranty icon
Title: 5 years
Description: Warranty

Icon: Delivery icon
Title: Free delivery
Description: Shipping

Icon: Assembly icon
Title: Easy assembly
Description: Setup

Create the Product icons metafield

From your SHOPLINE admin, open Settings > Customize data.
In the Metafields area, select Product.
Click Add fields.
Enter the field name:
```
Product icons
```
Set the namespace and key to:
```
custom.product_icons
```
Select Metaobject as the data type.
Select the Product icon metaobject as the referenced metaobject.
Enable the multiple-value or list-entry option.
Click Add or Save.

The product metafield must support multiple metaobject entries so that several icons can be assigned to the same product.

Assign icons to a product

From your SHOPLINE admin, open Products.
Select the product you want to configure.
Scroll to the Customize data area.
Find the Product icons metafield.
Click the metafield to open the available Product icon entries.
Select the icons you want to assign to the product.
Arrange the entries in the preferred display order where the SHOPLINE admin allows reordering.
Click Save or Update.

Repeat these steps for every product that requires custom icons.

Each product can use:

Different Product icon entries
The same shared entries
A different number of entries
No entries

Products without assigned entries will not display the Product icons block.

Display Product icons on the product template

From your SHOPLINE admin, open Online Store > Design.
Locate the Maison theme and click Design.
Use the page selector to open Products.
Select the product template you want to edit.
Open the main Product section.
Decide where the Product icons should appear:
- Product information
- Product media
- A Group block
Click the + icon in the selected area.
Select Product icons.
Open the newly added Product icons block.
Enter the following value in the Metafield setting:
```
custom.product_icons
```
Adjust the block spacing and size if required.
Click Save.

The block automatically reads the Product icons metafield of the product currently being viewed.

Display Product icons in Product information

Open the required product template.
Open the main Product section.
Expand Product information.
Click the + icon.
Select Product icons.
Enter the metafield value:
```
custom.product_icons
```
Drag the block to the preferred position.
Adjust the spacing and width settings.
Click Save.

A recommended position is:

Product title
Product price
Product icons
Variant picker
Buy buttons

When Product icons are displayed in Product information:

The entries are shown vertically.
Each icon appears beside its text.
The Title is displayed as the primary value.
The Description is displayed as supporting text.
All assigned entries are displayed.

Display Product icons below the product media

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 the metafield value:
```
custom.product_icons
```
Adjust the spacing and size settings if required.
Click Save.

When the Product icons block is placed in the product media area:

The icons appear below the product media gallery.
The entries use a grid layout on larger screens.
The layout may change to fewer columns on medium desktop screens.
The entries become horizontally scrollable on mobile devices.
All assigned entries are displayed.

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

Display Product icons inside a Group block

Open the required product template.
Add or open a Group block in the Product section.
Click the + icon inside the Group block.
Select Product icons.
Enter the metafield value:
```
custom.product_icons
```
Use the Group settings to configure the layout, background, spacing, and colors.
Click Save.

Adding Product icons inside a Group block gives you more control over the surrounding layout.

For example, the Group can contain:

A heading
Introductory text
Product icons
A divider
A button
An image

Display Product icons on product cards

Open a page or section containing product cards.

This may include:
- Collection product lists
- Featured collection sections
- Recommended products
- Search results
- Other product-grid sections
Open the section containing the product cards.
Expand the Product card structure.
Locate or add the Product extras block.
Inside Product extras, click the + icon.
Select Product icons.
Enter the metafield value:
```
custom.product_icons
```
Select the required Display style.
Set the number of entries using Items to show.
Enable Enable carousel on desktop if required.
Adjust the spacing.
Click Save.

The Product icons block must be placed inside Product extras when it is used on product cards.

Add the Product extras block

Open the section containing the product cards.
Expand the Product card structure.
Click the + icon under the Product card.
Select Product extras.
Open the newly added Product extras block.
Click the + icon inside Product extras.
Select Product icons.
Enter:
```
custom.product_icons
```
Configure the display settings.
Click Save.

Product extras is a container for additional product-card content. The Product icons block cannot be added directly to Product info or Product image unless the selected product-card structure specifically provides that option.

Configure the Grid display style

Open the Product icons block inside Product extras.
Set Display style to Grid.
Use Items to show to select how many entries can appear.
Enable Enable carousel on desktop if you want the entries to use horizontal scrolling.
Adjust the spacing.
Click Save.

In the Grid display style:

The image from the Icon field is displayed.
The Title and Description are displayed beside the icon.
The entries use a bordered grid layout.
Maison supports displaying between one and six entries on each product card.
On mobile devices, the entries become horizontally scrollable.

When Enable carousel on desktop is enabled, the icon list can scroll horizontally. On devices with a mouse, Maison moves the list toward the end when the customer hovers over it and returns it to the beginning when the pointer leaves.

Configure the List display style

Open the Product icons block inside Product extras.
Set Display style to List.
Use Items to show to select the maximum number of entries.
Adjust the spacing.
Click Save.

In the List display style:

The uploaded icon image is hidden.
The Description appears as the label.
The Title appears as the value.
A dotted divider appears between the label and value.
The entries are displayed vertically.

For example:

Material ........ Solid oak
Warranty ........ 5 years
Shipping ........ Free delivery

Use the List style when you want the product icons to behave more like a compact product specification list.

Set the maximum number of icons on product cards

Open the Product icons block inside Product extras.
Find Items to show.
Select a value between one and six.
Click Save.

This setting only limits the number of entries displayed on product cards.

It does not remove entries from the product metafield, and it does not limit the number of icons displayed by the Product icons block on the product template.

For example, a product can have six assigned icons while the product card displays only the first three.

Enable the product-card icon carousel

Open the Product icons block inside Product extras.
Set Display style to Grid.
Enable Enable carousel on desktop.
Click Save.

The carousel setting is only available when the Grid display style is selected.

This option does not add traditional previous and next arrow buttons. It creates a horizontally scrollable icon area.

On desktop devices that support hover, Maison automatically scrolls the entries when the customer moves the pointer over the Product icons area.

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

Configure Product icons in multiple sections

Open each section that displays product cards.
Expand its Product card structure.
Open Product extras > Product icons.
Enter:
```
custom.product_icons
```
Configure the display style, maximum entries, carousel, and spacing.
Click Save.

Product-card settings are saved separately for each section or template.

For example, configuring Product icons in a collection product list may not automatically configure them in:

A Featured collection section
Recommended products
Search results
Another product-grid section

Repeat the setup in every section where Product icons should appear.

Configure Product icons on multiple product templates

Open the product template selector in the Maison Theme Editor.
Select the first product template.
Add and configure the Product icons block.
Click Save.
Open the next product template.
Repeat the Product icons block configuration.

The custom.product_icons metafield definition does not need to be recreated.

However, each product template controls its own blocks and layout. The Product icons block must therefore be added separately to every template where the feature is required.

Remove Product icons from a product

From your SHOPLINE admin, open Products.
Select the product.
Scroll to Customize data.
Open the Product icons metafield.
Remove the selected Product icon entries.
Click Save or Update.

The Product icons will disappear anywhere that product is displayed.

To hide Product icons from a specific section without removing the metafield values, remove or disable the Product icons block in the Theme Editor.

Product icon metafield structure

Maison expects the following structure:

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

The default metafield configuration should be:

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

Each Product icon metaobject entry should contain:

Title: Single-line text
Description: Single-line text
Icon: Image file

Product icon behavior

Maison reads the Product icon entries from the metafield entered in the Product icons block.
The default Maison templates use custom.product_icons.
The block does not display anything when the Metafield setting is empty.
The block does not display anything when the product has no assigned entries.
Each assigned entry can contain an Icon, Title, and Description.
The same metaobject entry can be assigned to multiple products.
Product cards can display between one and six entries.
The full Product icons block on a product template displays all assigned entries.
Product-card and product-template settings are configured separately.
Different product templates can use different Product icons layouts.
Different product-card sections can use different display styles and item limits.

Product card behavior

When Product icons are displayed on product cards:

The block must be added inside Product extras.
Grid and List display styles are available.
Grid displays the icon image, Title, and Description.
List hides the icon image and displays the content as label-and-value rows.
Items to show limits the number of visible entries.
The desktop carousel is available only with the Grid display style.
Grid entries are horizontally scrollable on mobile.
Long Title or Description values may be shortened with an ellipsis.

Keep the text short so it remains readable inside smaller product cards.

Product template behavior

When Product icons are displayed on product templates:

The block can be added to Product information.
The block can be added below Product media.
The block can be placed inside a Group block.
All assigned entries are displayed.
Product information uses a vertical list layout.
Product media uses a grid on desktop and horizontal scrolling on mobile.
Spacing and block size can be configured from the Product icons settings.

Recommended image guidelines

For the best display:

Use square icons.
Use transparent PNG or SVG-style image assets where supported.
Keep the design simple.
Avoid small text inside the image.
Use consistent dimensions for all entries.
Use icons with similar line thickness and visual weight.
Add alternative text to uploaded images where possible.
Check the icons against both light and dark storefront backgrounds.

Maison displays Product icons at a small size, especially on product cards. Detailed photographs may not remain clear at these dimensions.

Troubleshooting

If the Product icons block does not display anything, make sure the Metafield setting contains:

custom.product_icons

If you created a different namespace and key, enter that exact namespace and key in the Product icons block.

If the Product icons metafield is not available on product pages, make sure it was created under the Product metafield module.

If the Product icons metafield only allows one entry, edit the metafield definition and enable the list or multiple-value option.

If no entries are available when editing a product, create Product icon entries under Content > Metaobjects first.

If the icon image does not appear, make sure the metaobject contains an image field with the key icon.

If the Title does not appear, make sure the metaobject contains a text field with the key title.

If the Description does not appear, make sure the metaobject contains a text field with the key description.

If Product icons appear on the product template but not on product cards, add the Product icons block inside Product extras in the relevant product-card section.

If Product icons appear in one collection but not another section, configure Product extras separately in each section or template.

If Product icons appear on one product template but not another, add the block to the missing product template.

If the List display does not show the uploaded icon, this is expected. Maison intentionally hides the icon image when the List display style is selected.

If Enable carousel on desktop is unavailable, change the Display style to Grid.

If fewer icons appear on product cards than on the product page, increase Items to show. Product cards can display a maximum of six entries.

If the icon text is shortened, reduce the Title and Description length. Maison uses an ellipsis when the available product-card space is too small.

If the mobile icons appear in a horizontal row, this is the expected mobile behavior for the Grid layout.

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.

- 8月 10, 2026
About the Transparent header
- 8月 10, 2026
Set up subcollections