The complete guide to customizing button styles on your website for a cohesive brand appearance.

Button Types and Their Uses

Primary buttons are used for main calls-to-action including:

• Add to cart buttons
• Smart design elements
• Header buttons
• Form submission buttons

Secondary buttons include:

• Checkout area buttons
• Cookie banner accept buttons
• Donation block buttons
• Newsletter buttons

Tertiary buttons are used for:

• Continue shopping links
• Cookie banner management
• Less prominent actions

Customizing Button Styles

To modify button appearance:

1. Open Site Styles panel and navigate to Buttons
2. Select button type (Primary, Secondary, or Tertiary)
3. Adjust these key elements:
   • Text font and styling
   • Shape (Filled or No fill)
   • Outline thickness
   • Horizontal padding
   • Vertical padding

Button Design Best Practices:

• Keep button text under 25 characters for optimal appearance
• Use consistent styling across similar button types
• Ensure sufficient contrast between button and background
• Apply appropriate padding for touch-friendly sizing

Color Customization

Buttons follow your site's global color scheme:

• Background colors affect filled buttons
• Outline colors show on no-fill buttons
• Text colors apply to button labels
• Hover states can be customized
• Section-specific color themes available

Special Considerations:

• Newsletter block buttons maintain specific design requirements
• Form buttons follow consistent styling
• Shopping cart buttons may have template-specific options
• Banner and navigation buttons often have separate style controls

Pro tip: Preview changes on a live page to ensure buttons maintain proper appearance and functionality across all contexts.

Remember: Button styling changes apply site-wide, so choose designs that work well across all your content areas.

Related Articles

Previous Articles