Keystone Shopify Apps

Appearance

Heading ​

Display a styled heading to announce messages or provide titles for groups of options.

Overview ​

Heading is a static option type that displays a formatted heading text on your product page. It's a non-interactive element that helps organize options into clear sections and communicate important information to customers.

Use Heading for:

  • Clearly announcing messages to customers
  • Providing titles for certain groups of options
  • Creating section headers for option groups
  • Emphasizing important information
  • Organizing complex option sets with clear hierarchy

Key characteristics:

  • No customer input required
  • Cannot be marked as required
  • Label cannot be shown on storefront (admin only)
  • Customizable text, color, and size
  • Supports Help Text from Advanced Settings
  • Purely visual element with no functionality

Configuration ​

Basic Settings ​

SettingDescription
LabelOption name (shown in admin only, cannot be displayed on storefront)

Advanced Settings ​

SettingDescription
Internal LabelAdmin-only identifier (replaces label in options list)
Help TextAdditional context (appears based on display mode setting)

Heading Settings ​

SettingDescription
Heading TextThe text content displayed as the heading (e.g., "Personalization Options", "Shipping Details")
Text ColorHex color code for the heading text (e.g., #000000 for black, #333333 for dark gray)
Heading StyleHeading size level: H1 (largest), H2, H3, H4, H5, or H6 (smallest)

Heading Style Options ​

H1 (Largest)

  • Largest heading size
  • Most prominent and attention-grabbing
  • Best for main section titles or important announcements
  • Use sparingly - typically one per option set

H2

  • Second largest heading size
  • Strong emphasis without being overwhelming
  • Ideal for major section headers
  • Good for primary option group titles

H3

  • Medium-large heading size
  • Balanced emphasis and readability
  • Perfect for subsection headers
  • Most versatile for general use

H4

  • Medium heading size
  • Moderate emphasis
  • Good for secondary section headers
  • Works well for grouped options

H5

  • Small-medium heading size
  • Subtle emphasis
  • Suitable for minor section breaks
  • Good for nested option groups

H6 (Smallest)

  • Smallest heading size
  • Minimal emphasis while still being distinct from body text
  • Best for subtle section markers
  • Use when you want a heading that doesn't dominate

How to Add Heading ​

  1. Navigate to Option Sets and open your option set
  2. Click Add Option
  3. Select Heading from the Option Type dropdown
  4. Enter a Label (admin only - cannot be shown on storefront)
  5. Configure Heading Settings:
    • Enter Heading Text (the text that will be displayed)
    • Set Text Color (hex color code)
    • Select Heading Style (H1 through H6)
  6. (Optional) Click Advanced Settings to add Help Text or Internal Label
  7. Click Save in the contextual save bar

Use Cases ​

Main Section Title ​

Label: (Admin only) Heading Text: Personalization Options Text Color: #000000 Heading Style: H1

Result: A large, prominent heading announces the personalization section, making it immediately clear to customers

Option Group Header ​

Label: (Admin only) Heading Text: Shipping Details Text Color: #333333 Heading Style: H2

Result: A strong heading introduces the shipping options section, creating clear visual hierarchy

Subsection Title ​

Label: (Admin only) Heading Text: Gift Wrapping Options Text Color: #666666 Heading Style: H3

Result: A medium-sized heading clearly labels a subsection of options without overwhelming the page

Important Announcement ​

Label: (Admin only) Heading Text: Limited Time Offer Text Color: #FF0000 Heading Style: H2 Help Text: This offer expires at midnight

Result: A prominent red heading draws attention to a time-sensitive message, with help text providing additional context

Secondary Section Header ​

Label: (Admin only) Heading Text: Additional Services Text Color: #555555 Heading Style: H4

Result: A moderate-sized heading introduces a secondary section without competing with primary headings

Subtle Section Marker ​

Label: (Admin only) Heading Text: Optional Add-ons Text Color: #888888 Heading Style: H6

Result: A small heading provides subtle organization without dominating the visual space

Styling ​

Heading appearance is controlled through its configuration settings:

  • Text: Set via Heading Text field
  • Color: Set via Text Color hex code
  • Size: Set via Heading Style (H1-H6)
  • Spacing: Follows option spacing from Borders & Shapes

The heading uses standard HTML heading tags (H1-H6) which provide semantic structure and default sizing. Your theme may apply additional styling to these heading levels.

Best Practices ​

Choose appropriate heading style:

  • Use H1 for main section titles (use sparingly - typically one per option set)
  • Use H2 for major section headers
  • Use H3 for general section titles (most versatile)
  • Use H4-H6 for subsections and nested groups
  • Create a clear hierarchy: H1 > H2 > H3 > H4 > H5 > H6

Select matching colors:

  • Match heading color to your theme's heading colors
  • Use darker colors (#000000, #333333) for strong emphasis
  • Use medium colors (#555555, #666666) for balanced headings
  • Use lighter colors (#888888) for subtle headings
  • Consider brand colors for consistency

Write clear heading text:

  • Keep headings concise and scannable
  • Use action-oriented language when appropriate
  • Make headings descriptive of the content below
  • Avoid overly long headings that wrap awkwardly
  • Use title case or sentence case consistently

Create visual hierarchy:

  • Use larger headings (H1, H2) for main sections
  • Use smaller headings (H4, H5, H6) for subsections
  • Don't skip heading levels (e.g., don't go from H2 to H4)
  • Maintain consistent hierarchy throughout option set

Strategic placement:

  • Place headings before related option groups
  • Use headings to introduce new sections
  • Add headings after spacing or dividers for emphasis
  • Don't place headings too close together

Use Help Text effectively:

  • Add Help Text for additional context or instructions
  • Use Help Text to clarify what options follow the heading
  • Keep Help Text concise and relevant
  • Help Text appears based on display mode settings

Consider mobile experience:

  • Ensure heading text is readable on small screens
  • Test that heading sizes work well on mobile
  • Verify color contrast for accessibility
  • Check that headings don't wrap awkwardly

Coordinate with other static options:

  • Use Heading + Spacing for clear section breaks
  • Combine Heading + Divider for emphasized sections
  • Use Heading + Descriptive Text for comprehensive section headers
  • Create visual flow: Heading → Descriptive Text → Options

Maintain consistency:

  • Use consistent heading styles for similar sections
  • Match heading colors throughout your option set
  • Follow a clear hierarchy pattern
  • Test heading appearance with your theme