Shopify Icon List Section

Description of the Section

The Icon List section is a versatile and visually appealing layout feature that allows you to present information or features with associated icons. Ideal for highlighting key services, benefits, or features, this section can be customized to match the design aesthetic of your Shopify store.

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 List"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-Commerce Store

1. Highlight Store Features: Use the Icon List to showcase important store features like free shipping, secure payments, and easy returns.
2. Product Benefits: Display the benefits of a product such as eco-friendliness, high quality, and warranty information.
3. Service Descriptions: Outline the services you offer, such as customer support, express delivery, and gift wrapping.
4. Promotional Elements: Use icons to draw attention to sales, new arrivals, or limited-time offers.
5. Brand Values: Highlight your brand's values like sustainability, craftsmanship, and community support.

Overview of the Configuration Settings

• Text Settings: Customize the font, size, and line height for the text.

  • Text Font (Default: sans-serif)
  • Text Size (Range: 10px to 50px, Default: 15px)
  • Line Height (Options: 0.75 to 2.0 or Inherit, Default: Inherit)

• Headline Settings: Customize the font, size, and line height for the headlines.

  • Headline Font (Default: sans-serif)
  • Headline Size (Range: 10px to 50px, Default: 15px)
  • Line Height (Options: 0.75 to 2.0 or Inherit, Default: Inherit)

• Icon Settings: Define the look and behavior of the icons.

  • Icon Shape (Options: Square, Rounded, Circle, Default: Circle)
  • Icon Padding (Default: 25px)
  • Icon Size (Range: 10px to 200px, Default: 40px)
  • Icon Background Color (Default: linear-gradient(164deg, #0D8BF4 0%, #0D8BF4 0%))
  • Icon Color (Default: #fff)

• Color Settings: Set the colors for the background, text, and headlines.

  • Background Color (Default: linear-gradient(164deg, #fff 0%, #fff 0%))
  • Text Color (Default: #111)
  • Headline Color (Default: #111)

• Dimension Settings: Adjust the dimensions and layout of the section.

  • Desktop Columns (Options: 1-3 columns, Default: 2 columns)
  • Mobile Columns (Options: 1-3 columns, Default: 2 columns)
  • Max Width (Default: 1000px)
  • Gap Between Columns (Default: 20px)
  • Padding (Top, Bottom, Left, Right, Default: 25px for Top and Bottom, 10px for Left and Right)

• Blocks: Each block within the section can be configured with the following settings:

  • Icon Type (Options: No Icon, Uploaded Image, Cart, Gift, Gift Card, Shipping, Payment, etc.)
  • Custom Image (if icon type is set to Uploaded Image)
  • Headline (Rich text format)
  • Text (Follow-up description text)
  • Link (Optional URL)

These settings provide flexibility to ensure the Icon List section aligns seamlessly with the overall store design and functionality.