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

Setting	Description
Label	Option name (shown in admin only, cannot be displayed on storefront)

Advanced Settings

Setting	Description
Internal Label	Admin-only identifier (replaces label in options list)
Help Text	Additional context (appears based on display mode setting)

Heading Settings

Setting	Description
Heading Text	The text content displayed as the heading (e.g., "Personalization Options", "Shipping Details")
Text Color	Hex color code for the heading text (e.g., #000000 for black, #333333 for dark gray)
Heading Style	Heading 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

Related

• Descriptive Text - Body text content
• Divider - Visual line separator
• Spacing - Empty space between options
• Internal Label - Admin-only identification
• Help Text - Additional context display
• Borders & Shapes - Option spacing and border styling