Customize your site's buttons to create a cohesive brand experience and effective calls-to-action. Here's how to modify button styles across your website.

Button Basics

• Access button settings through the Site Style panel
• Preview changes live by opening a page containing buttons
• Modifications apply to most buttons site-wide for consistency

Shape and Font Settings

• Select button type (Primary, Secondary, or Tertiary)
• Customize text font and style
• Choose button shape (Filled or No Fill)
• Adjust outline thickness
• Set padding for all sides
• Keep button text under 25 characters for optimal display

Color Configuration

• Colors follow your site's global color scheme
• Customize background and text colors per button type
• Filled buttons use background color
• No Fill buttons use outline color with hover fill effect
• Underlined buttons have separate text and background settings

Button Types and Their Usage Primary Buttons:

• Add to Cart
• Auto Layout
• Header Primary
• Checkout
• Cookie Banner Accept
• Donation Block
• Membership Registration
• Newsletter Block

Secondary Buttons:

• Header Secondary
• Continue Shopping
• Cookie Banner Reject

Tertiary Buttons:

• Header Tertiary
• Cookie Banner Manage

Version 7.0 Specific Settings

• Button Style: Solid, Outline, or Top-Aligned
• Button Shape: Square, Round, or Capsule
• Color customization for background and text
• Font selection
• Alternate/Overlay options for specific templates

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

Keep in mind that certain buttons (like newsletter blocks) may have restricted customization options to preserve their functionality and layout.

Related Articles

Previous Articles