Brickspace Lab
Contact usContact ShopifyTry a theme
Space
Space
  • Space documentation
  • Getting started
    • Selecting theme colors
  • Theme typography
  • Guides
    • Using color and option swatches
    • Using device specific visibility
  • Dynamic discount popups
  • Adding product subtitles
  • Adding product badges
  • Replacing "Add to cart" for a product
  • Disable "quick add" for a product
  • Templates
    • Collection template
  • Product template
  • Blog template
  • Article template
  • Sections
    • Sections
      • Announcement
      • Header
      • Cart drawer
      • Menu drawer
      • Search drawer
      • Footer
      • Tooltip
      • Fixed menu
      • Featured product
      • Footer
      • Fixed menu
      • Slideshow
      • Email sign-up
      • Video
      • Alt collection grid
      • Banner
      • Block reveal
      • Blog posts grid
      • Collage
      • Collapsible content
      • Collection list grid
      • Collection list slider
      • Collection slider
      • Comparison table
      • Contact form
      • Countdown
      • Custom liquid
      • Discount
      • Featured collection grid
      • Icon grid
      • Image hotspot
      • Logo list
      • Marquee
      • Navigation slider
      • Product list
      • Recently viewed
      • Rich text
      • Search banner
      • Slider
      • Split banner
      • Static chat
      • Store locater
      • Tabs
      • Testimonial grid
      • Testimonial slider
      • Text highlight
  • General
    • Changelog
      • v2.0.0
      • v1.2.1
      • v1.2.0
      • v1.1.0
      • v1.0.1
      • v1.0.0
    • Known issues and troubleshooting
      • v2.0.0
    • Cloning a demo theme
      • Shimmer
Powered by GitBook
On this page
  • Section overview
  • Section Settings
  • Block Settings

Was this helpful?

  1. Sections
  2. Sections

Icon grid

Section overview

The Icon Grid section displays a customizable grid of icon cards with text content. It allows merchants to showcase features, benefits, or services with visual elements.

Common Use Cases

  • Highlighting product features or benefits

  • Showcasing services or offerings

  • Creating feature comparison grids

  • Displaying brand values or commitments

Usage Tips

  • Use consistent icon sizes for a clean, professional appearance

  • Keep text content concise for better readability

  • Consider using the split layout option for sections with longer headings or content

  • For mobile, reduce the number of columns to ensure content remains readable

Section Settings

Setting
Description

Heading

The main heading for the section

Content

The descriptive text for the section

Button label

Text displayed on the button

Button URL

The URL where the button links to

Top spacing

Amount of space above the section (0-300px)

Bottom spacing

Amount of space below the section (0-300px)

Color scheme

The background color scheme for the section

Custom color

Custom background color when "Custom" color scheme is selected

Text color

Override for the text color

Border color

Color of the section border

Button color

Style and color for the section button

Enable color fade

Enable background color transition when scrolling

Border position

Position of the section border (none, top, bottom, or both)

Desktop columns

Number of columns to display on desktop devices (1-8)

Mobile columns

Number of columns to display on mobile devices (1-4)

Content alignment

Horizontal alignment of the section content

Enable margin

Enable horizontal margin on the section

Enable split

Split the section into a header area and content area

Enable split heading

Allow heading to span full width in split layout

Visibility

Control section visibility on different device types

Block Settings

Icon

The Icon block allows you to add individual icon cards to the grid. Each block can have its own icon, heading, and content.

Block limit: 20

Setting
Description

Icon

The image to display as the icon (recommended 256px square)

Size

Size of the icon (small, normal, or large)

Heading

The heading text for this icon card

Content

The descriptive text for this icon card

Enable padding

Add padding inside the icon card

Color scheme

Background and text color scheme for this icon card

Border color

Color of the border around this icon card

Alignment

Vertical or horizontal alignment of icon and text

Content alignment

Horizontal alignment of the content within the card

Row span

Number of rows this card should span (1-6)

Column span

Number of columns this card should span (1-6)

Last updated 22 days ago

Was this helpful?