Buttons can be customized to match your brand's visual identity through the Site Styles panel. Here's a comprehensive guide on button customization:

Primary Button Settings

• Text: Customize font and styling
• Shape: Choose between Fill or No Fill options
• Border: Adjust thickness (No Fill) or inner margin (Fill)
• Horizontal padding: Control left/right text spacing
• Vertical padding: Adjust top/bottom text spacing

Note: Keep button text under 25 characters for optimal appearance.

Button Color Customization

• Colors are managed through the Colors panel
• Each button type has unique color settings
• Fill buttons: Background color fills entire button
• No Fill buttons: Color applies to border and text
• Underlined buttons: Background color affects text

Button Types and Their Applications

Primary Buttons:

• Add to cart buttons
• Automatic layout buttons
• Payment buttons
• "Accept All" cookie banner button
• Donation block buttons
• Newsletter block buttons

Secondary Buttons:

• "Continue Shopping" button
• Header buttons (when set to Secondary)
• Form submit buttons (when set to Secondary)

Tertiary Buttons:

• "Manage cookies" button
• Custom buttons set to Tertiary style

Advanced Customization Tips:

1. Preview changes live by keeping a page with buttons open
2. Use "Apply to all button types" for consistent styling
3. Adjust section color themes for varied button appearances
4. Consider button hierarchy when designing calls-to-action

For version 7.0 sites, additional options include:

• Button style (Bold, Outline, Raised)
• Button shape (Square, Rounded, Circular)
• Custom color settings
• Font customization

Remember that some buttons may have template-specific options, such as cart buttons, cover page buttons, and navigation buttons.

Related Articles

Previous Articles