Icon List Element

About the Icon List Element?

The Icon List element in GemPages displays a row of icons arranged horizontally. It’s perfect for drawing attention to specific details or features while enhancing the overall aesthetics of your store.

Here are some ways to use the Icon List element effectively:

• Hero Banners: Display icons representing benefits like fast delivery, secure payments, or eco-friendly products.
• Product Details: Use icons to visually represent product features such as durability, dimensions, or materials.
• Testimonials: Add icons to enhance customer reviews, such as stars for ratings or badges for quality assurance.

How to Add an Icon List Element to Your Page?

Follow these steps below to drag and drop an Icon List Element into your page using GemPages Editor v7:

• Log in to your Shopify admin > GemPages Builder app > Pages.
• Click on the page where you want to add the Icon List Element to enter the editor.
• From the left sidebar, search for this element, and drag and drop it to the desired position on your page.

• Locate the element to open its settings for further customization.

Configure the Settings tab

Under the Settings tab, you can configure the icon’s visibility as you prefer:

Item management

Add more icons or remove unnecessary ones to fit your design. Also, you can rearrange the positioning of each icon if you use different icons in this Icon List element.

Item spacing

Adjust the distance between icons for a clean, organized layout by:

• Entering an exact number in the box
• Dragging the slider

Background

Set a solid/gradient color or image as the background.

• Color: Enter the color code, choose from the “recent colors”/“suggested for you” list, or use the color picker to set the background color.

• Image: Upload a new image or choose from the library to set as the background.

Shape

Customize the shape using:

• Border: Add border styles
• Corner: Adjust the roundness of corners
• Shadow: Apply shadow effects for depth

Align

Adjust the horizontal and vertical alignment of the icon list:

The result

You can hit the eye icon in the top right bar to preview your update. Here’s how the Icon List element displays in your storefront.

Configure the Advanced tab

For more advanced customization, please navigate to the Advanced tab and follow the instructions in this article.