Shopify Icon Grid Section

Description of the Section

The Icon Grid section allows you to organize and display a grid of icons, images, or videos with accompanying text and links. This section is highly customizable, with options for fonts, colors, icon shapes, text sizes, media fitting styles, and more. It is responsive and automatically adapts to different screen sizes, featuring a slideshow mode on mobile devices for enhanced user interaction.

Demo of the Section

Installation Instructions

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Free Sections
3. Search for "Icon Grid"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Feature Highlights: Use the Icon Grid to showcase the main features or benefits of your products, such as free shipping, secure payments, or eco-friendly materials.

2. Product Categories: Display icons representing different product categories, helping customers navigate your store more easily.

3. Customer Services: Illustrate the various customer services you offer, like easy returns, 24/7 support, or live chat.

4. Promotional Offers: Present current promotions or discounts using eye-catching icons and brief descriptions to draw in customers.

5. Brand Values: Highlight your brand values, such as sustainability, quality, or innovation, to build trust with your audience.

Overview of the Configuration Settings

Font Settings

• Override Theme Fonts: Enables customizing font choices specific to this section.
• Text Font: Choose the font style for the text.
• Headline Font: Choose the font style for the headlines.

Text Settings

• Text Size: Adjust the font size for the text.
• Line Height: Customize the line height for better readability.
• Headline Size: Choose the size for your headlines.
• Headline Line Height: Adjust the line height for headlines.

Icon Settings

• Icon Shape: Select the shape of the icons (square, rounded, or circle).
• Icon Padding: Set the padding around the icons.
• Icon Size: Choose the size of the icons.
• Background: Customize the background color of the icons.
• Icon Color: Select the color for the icons.

Image and Video Icons

• Media Fit: Options to control how images and videos are displayed within icons (contain, cover, size).
• Media Height: Define the height for images and videos if 'Size' is selected.

Colors

• Background: Choose a background color for the entire section.
• Text Color: Set the color of the text.
• Headline Color: Set the color for the headlines.

Dimensions

• Max Width of Section: Specify the maximum width of the section.
• Gap Between Columns: Adjust the spacing between columns.
• Spacing Between Elements: Set the space between various elements within the grid.
• Padding Top/Bottom/Left/Right: Control the padding around the section.

Mobile Display

• Mobile Display: Choose how the grid displays on mobile devices (slideshow or stacked).
• Columns (when stacked): Configure the number of columns when the grid is in stacked mode.
• Slideshow Progress Background Color: Customize the background color of the slideshow progress indicator.
• Slideshow Progress Foreground Color: Customize the foreground color of the slideshow progress indicator.
• Slideshow Indicator Color: Set the color for slideshow indicators.
• Enable Autoplay: Toggle autoplay for the slideshow.
• Autoplay Time: Choose the time interval for autoplay.