Icon box

Icon box is a modular content element that displays an icon alongside a title and optional description. It is commonly used to communicate key features, services, or benefits in a compact and visually structured layout. This component supports icon selection, text alignment, and responsive display settings to ensure consistent presentation across devices.

Section settings

General settings

Setting	Description
Section width	3 options for container • Stretch width: span the section width regardless of screen size. • Fixed width: depends on your page content width in Theme settings -> Layout. • Full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.
Color scheme	Select colors from Theme settings -> Colors

Section header settings

Setting	Description
Subheading	The subheading of the section
Heading	The title of the section
Enable heading underline animation	Turn on an animated underline effect for headings. Switch off to keep a static look.
Underline style	Choose the underline’s look. Include: • Include: Simple underline – Clean straight line beneath the text. • Curve stroke: Soft, hand-drawn curved stroke for a casual feel. • Squiggle underline: Wavy line for a lively, attention-grabbing look. * Note: Only appears when Enable heading underline animation is enabled
Underline color	Pick the color used for the underline. * Note: Only appears when Enable heading underline animation is enabled
Description	The description of the section
Heading size	The size of the title: • Small • Medium • Large
Alignment	The position of the heading and description. • Left • Center • Right
Column gap	4 options for column gap • No gap • Small • Medium • Large

Icon settings

Setting	Description
Size	Setting icon's width
Position	Determine logo's position on desktop
Rounded image	Change the shape of the icon into circle

Content settings

Setting	Description
Alignment	Setting the text alignment
Size	Setting text size

Mobile settings

Setting	Description
Enable carousel on mobile	The setting that enable the carousel layout on mobile
Items per row	Determine the number of items per row

Section padding

Setting	Description
Top	Customize the top margin of the section
Bottom	Customize the bottom margin of the section

Section divider

Setting	Description
Show divider	Toggles the visibility of a horizontal divider line within the section.

Block settings

Setting	Description
Image	Select your desired image to display
Svg icon	You can use one of our svg icons instead
Heading, Description	Customize block content

Shopify Variant Images As Swatches Add To Cart Not Working Add Custom Javascript Shopify Multi Currency Preview Shopify Theme Shopify Theme Demo Import Shopify Product Media Videos And 3d Shopify Video Autoplay Not Working

Comments

No comments yet

Looking for Help?
Get support from our team

If you can't find the answer you're looking for, our support team is here to help.

Contact Support Submit a Ticket

Purity