Fluorescent
Cornerstone
Cornerstone
  • Cornerstone Help Center
    • Start using Cornerstone
      • Migrate your theme
      • Theme licenses
    • FAQs
    • Video tutorials
    • Changelog
  • General
    • Editing themes
      • Adding sections
      • Using templates
      • Accessibility
      • Customizing your site
      • H1 heading tags
      • SEO for Shopify themes
      • Online store speed
    • Image guide
      • Web ready photography
      • Image sizes
      • File formats
      • Theme image settings
    • Adapting theme content
      • Edit default theme content
      • Multiple languages
      • Dynamic content with metafields
      • Unique content for markets
    • Update your theme
  • Theme styles
    • Theme settings
    • Style presets
      • Demo layouts
    • Colors
    • Fonts
    • Animation
  • Pages
    • Templates
      • Home page
      • Blog page
      • Blog posts
      • Collections list page
      • Contact page
      • Customer accounts
      • Password page
      • Search page
      • 404 page
    • Sections
      • Section styles
      • Content blocks
      • Blog posts
      • Collapsible row list
      • Collection list
      • Collection list buttons
      • Contact form
      • Countdown banner
      • Countdown bar
      • Featured collection
      • Featured collection with media
      • Featured product
      • Grid
      • Icon with text columns
      • Image hero
      • Media with content split
      • Multi-column
      • Newsletter
      • Newsletter compact
      • Overlapping media with content
      • Promotion grid
      • Quick links
      • Rich text
      • Sales banner
      • Scrolling content
      • Slideshow
      • Tabbed collections
      • Testimonials
      • Video hero
    • Popups
      • Sign up popup
      • Age verification
      • Countdown signup popup
      • Promotional popup
  • Header
    • Announcement bar
      • Language selector
      • Country selector
      • Social media icons
      • Announcements
    • Header
      • Logo
      • Layout and style
      • Mega navigation
      • Transparent header
    • Mobile menu
    • Search bar
  • Footer
    • Footer
      • Contact and social block
      • Links block
      • Logo block
      • Newsletter and social block
      • Text and image block
      • Language and currency
      • Payment icons
      • Custom liquid
  • Products
    • Product listings
      • Layout and style
      • Product card details
    • Product badges
    • Quick shop
  • Product pages
    • Product template
    • Layout and style
      • Media gallery
      • Sticky product details
      • Recommended products sidebar
      • Breadcrumbs
      • Navigation buttons
      • Gift card recipient form
    • Overview blocks
      • Product header
      • Description
      • Variant selector
      • Buy buttons
      • Share icons
      • Collapsible rows block
      • Complementary products
      • Custom option
      • Customer support block
      • Image block
      • Image with text block
      • Information popup
      • Product labels
      • Payments and trust
      • Stock level indicator
      • Text block
      • Text columns with icons
      • Text list with icons
      • App blocks
    • Variant options
      • Chips
      • Swatches
        • Enable swatches
        • Use default colors
        • Use custom colors
        • Use custom images
        • Change swatch styles
        • Show on product cards
        • Dynamic option availability
      • Sibling product swatches
      • Media grouping
    • Product recommendations
  • Collection pages
    • Collection template
    • Banner
    • Product grid
    • Filters and sorting
  • Cart
    • Cart page
    • Quick cart
      • Added to cart popup
    • Free shipping bar
    • Low inventory warning
    • Cross sells
  • Support
    • Support policy
    • Shopify vs Theme issues
    • Store access requests
  • For developers
    • Custom CSS
    • Custom fonts
    • Custom Liquid
    • Custom JavaScript events
    • Edit Theme JavaScript
Powered by GitBook
On this page
  • Set up text list with icons
  • Add items
  • Change layout and style

Was this helpful?

  1. Product pages
  2. Overview blocks

Text list with icons

Last updated 3 months ago

Was this helpful?

Add a Text list with icons for additional product details with one of 30+ icons. You can highlight your company values, process, or key elements of your product.

Set up text list with icons


Under Product overview, click (+) Add block and select Text list with icons. Use the drag-and-drop handles ⋮⋮ to re-order blocks. Click the block to start adding content.

Customize the appearance with boxes around the text or dividers between them.

STEPS

In your theme editor (Customize):

  1. Under Product overview, click (+) Add block and select Text list with icons.

  2. Click the new Text list with icons block to open the settings.

  3. Choose whether to Add box to display an outline around the text list.

  4. Choose whether to Add dividers to separate each text list item.

  5. For each List item, select an Icon and enter Text.

    We recommend a short sentence or two.

  6. Click Save.

Add items


Add up to 6 list items with an icon and text. Choose an icon or upload your own.

Click Text list with icons block to find settings

Setting
Description

Icon

Choose from 30+ free icons.

Custom icon image

Upload your own icon image to display next the heading. We recommend a PNG image with a transparent background and minimum dimensions of 50px by 50px.

Text

Add short text to tell customers about your product.

Change layout and style


Click the Text list with icons block to find settings

Setting
Description

Title

Add text to show a heading at the top of the block, above the text list.

Column

Display the block in either the Right column (in the product form) or the Left column (beneath the product media).

Add box

Display the block within a block with a background color.

Add dividers

Show horizontal borders between each text list item.

Truncate text

Hide text after a selected number of lines and show a ‘more’ button that reveals the full description.

Icon framing

Choose to show a Circle or Slightly rounded border around the icons. Select None to show no border.

Icon framing style

Choose to display icons with a solid color background (Filled), or with a border and no background (Outlined).

Icon frame color

Choose to use the Accent color (from your theme settings) or the Current text color (from the section settings).

Icon width

Set the pixel width of icons for desktop screens: between 10 and 50 pixels.

Mobile icon width

Set the pixel width of icons for mobile screens: between 10 and 50 pixels.

Collapsible row

Setting
Description

Display as collapsible row

Show an expandable title that reveals the text when clicked.

Expand by default

Display the collapsible row as open with the text already revealed.

Collapsible row title

Enter text for the row title.


Related links

Product template
Product page blocks
Image with text block
Text block
Text columns with icons