Set the style of your website's buttons by following these straightforward steps:

Button Style Settings

1. Access the Site Styles panel and select "Buttons"
2. Choose button type to modify:

• Primary (main calls-to-action)
• Secondary (less prominent actions)
• Tertiary (minor actions)

Customizable Elements

Text Settings:

• Font selection
• Font styles
• Text color

Shape Options:

• Fill (solid color)
• No fill (outline only)
• Outline thickness
• Horizontal padding
• Vertical padding

Pro tip: Keep button text under 25 characters for optimal appearance.

Color Configuration

Colors automatically align with your site's global color scheme:

• Fill mode: Background color fills the entire button
• No fill mode: Color applies to outline and text
• Hover effects change based on selected mode

Button Type Applications

Primary Buttons:

• Add to Cart
• Smart design buttons
• Primary header buttons
• Checkout buttons
• Cookie banner "Accept All"
• Donation buttons
• Member registration
• Newsletter signup

Secondary Buttons:

• Continue Shopping
• Cookie banner "Reject All"
• Secondary header buttons

Tertiary Buttons:

• Cookie banner "Manage Cookies"
• Tertiary header buttons

Legacy Support (Version 7.0)

For sites using version 7.0:

1. Navigate to Website > Design > Site Styles
2. Locate Buttons section
3. Configure:
   • Button style (Solid/Outline/Raised)
   • Shape (Square/Rounded/Pill)
   • Colors (background and text)
   • Font settings

Note: Some buttons may have template-specific styling options that override global settings.

Related Articles

Previous Articles