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
  • Heading
  • Text
  • Accent
  • Button
  • Image
  • Text list with icons
  • Add items
  • Change icon style
  • Video player
  • Spacer
  • Divider

Was this helpful?

  1. Pages
  2. Sections

Content blocks

Last updated 12 hours ago

Was this helpful?

Some sections support the same 'rich content' blocks for text, images, buttons, and style elements.

  • Under the section, click (+) Add block.

  • Click the block to find settings.

  • Click and hold the drag handles ⋮⋮ to re-order blocks.

For other sections, click the section to find settings for adding text, media, and buttons.

Heading


Sections

Add heading text and change its size.

Click Heading block to find settings

Setting
Description

Heading

The title of the block.

Heading size

Change the size of the heading text from small (1) to large (8).

Heading tag

Font

Text


Sections

Click (+) Add block and select Text. Add multiple lines of text and change its size.

Click Text block to find settings

Setting
Description

Text

Add rich text. Use the buttons to make the text bold or italicized, or to add a link.

Text size

Change the size of the text.

Font

Accent


Sections

Click (+) Add block and select Accent. Add small heading text with an optional divider.

Click Accent block to find settings

Setting
Description

Text

Add small heading text to use as a label.

Text size

Change the size of the text.

Show accent divider

Display border line below the accent text.

Divider color

Use the Theme colors from your theme settings or the Current colors from the section settings.

Font

Button


Sections

Click (+) Add block and select Image. Add a link to another page and select a button style.

When multiple button blocks are ordered together in the section panel, they will display in a single row.

Click Button block to find settings

Setting
Description
Options

Button link

The URL that you want the button to link to.

Button label

The text that displays on the button. The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now).

Default: "Button"

Button style

Change the style of the button. Choose to use Theme colors or Current colors set in section.

Solid Outline Text

Font

Image


Sections

Click (+) Add block and select Image. Upload an image and adjust its width.

.

Click Image block to find settings

Setting
Description
Options

Image

Select or upload an image. There are no required dimensions. We recommend an image with a minimum width of 50px. Use PNG files for images with a transparent background.

Image width

Set Full width or Custom width

Full width Custom width

Image size

Set the maximum width (in pixels) of the image on desktop.

50 - 750 px

Mobile image size

Set the maximum width (in pixels) of the image on mobile.

50 - 350 px

Text list with icons


Sections

Click (+) Add block and select Text list with icons.

Add items


Click the Text list with icons block to open the settings. 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 to display next to the text.

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.

Vertical alignment

Position the text at the Center or Top, relative to the icon.

Change icon style


Click the Text list with icons block to open the settings. Customize the style of the icons, including the framing, background, color, and width.

Click Text list with icons block to find settings

Setting
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.

Video player


Sections

Click (+) Add block and select Video player. Add a video that visitors can can click to view within a popup video player.

You can either use an uploaded .mp4 video in your Shopify files or embed a video from YouTube or Vimeo.

STEPS: Add Shopify-hosted video

In your Shopify admin:

  1. In the side panel, click Content > Files.

  2. Click Upload files to add a .mp4 file from your computer.

    Once your file has been processed, you can go to the next step.

In the theme editor (Customize):

  1. Click the Video player block within the section.

  2. Under Shopify video, click Select video to select your video and click Done.

  3. Click Save.

STEPS: Embed YouTube or Vimeo video

In the theme editor (Customize):

  1. Click the Video player block to open the settings.

  2. Under Youtube or Vimeo URL, paste the link of your hosted video.

  3. Click Save.

Click Video player to find settings

Setting
Description

Shopify video

Select an mp4or mov video that you've uploaded to your Shopify files in the admin.

YouTube or Vimeo URL

Paste the full URL of your YouTube or Vimeo video.

Play button design

Display the play button as a Play icon only or Button with label ("Watch now").

Button size

Change the size to Small or Large.

Play button

Display the Play icon as Light or Dark.

Button label

Change the default button label text ("Watch now")

Button style

Change the style of the button: Solid, Outline, or Text. Choose to use Theme colors or Current colors set in section.

Spacer


Sections

Click (+) Add block and select Spacer. Add space between other content blocks.

Click Spacer block to find settings

Setting
Description
Options

Space

Add a gap of empty space between blocks. Use sliders to adjust the amount of space on desktop and mobile.

4 - 64 px

Divider


Sections

Click (+) Add block and select Divider. Add a border line between blocks with custom thickness and spacing.

Click Divider block to find settings

Setting
Description
Options

Thickness

Use the slider to increase the thickness of the divider line.

1 - 5

Spacing

Use the sliders to add space above and below the divider. Set to 0 to remove spacing.

1 - 40

- - - - -

Change the heading tag to modify the page structure. Use H2 to indicate important topics, and use H3-H6 for related topics. Learn how to . This option doesn't change the heading's appearance.

Go to to change the font for all headings.

- - - - -

Go to to change the font for all body text.

- - - - -

Go to to change the font for all accent text.

- - - - -

Go to to change the button fonts.

- - - - - -

- - - -

- - - -

- - - - - -

- - - - -

Image hero
Image with content
Image with content split
Newsletter
Rich Text
Video hero
replace default H1 headings
Theme settings > Fonts
Image hero
Image with content
Image with content split
Newsletter
Rich Text
Video hero
Theme settings > Fonts
Image hero
Image with content
Image with content split
Newsletter
Rich Text
Video hero
Theme settings > Fonts
Image hero
Image with content
Image with content split
Newsletter
Rich Text
Video hero
Theme settings > Fonts
Image hero
Image with content
Image with content split
Newsletter
Newsletter compact
Rich Text
Video hero
Image hero
Image with content
Image with content split
Rich Text
Video hero
Image hero
Image with content
Image with content split
Rich Text
Video hero
Contact form
Image hero
Image with content
Image with content split
Newsletter
Rich Text
Video hero
Image hero
Image with content
Image with content split
Newsletter
Rich Text
Video hero