Primary buttons serve as the main call-to-action elements on your website. These include "Add to Cart," auto-layout buttons, and primary header buttons. You can customize their appearance through Website Style settings.

To customize button design:

1. Open Website Styles menu and navigate to "Buttons"
2. Select button type (Primary, Secondary, or Tertiary)
3. Customize the following elements:

• Text font and style
• Shape (fill or outline)
• Outline thickness
• Horizontal padding
• Vertical padding

Button colors follow your website's global color scheme. You can set:

• Background color (for filled buttons)
• Text color
• Outline color (for non-filled buttons)

Secondary buttons are used for less prominent actions like "Continue Shopping" and "Submit" forms. Tertiary buttons are typically used for auxiliary actions like "Manage Cookies."

Important considerations:

• Keep button text under 25 characters for optimal appearance
• Changes apply site-wide for consistency
• Use "Apply to All Button Types" to match styles across button types
• Reset options available for default settings

Button types and their applications:

Primary:

• Add to Cart buttons
• Checkout buttons
• Donation block buttons
• Member registration buttons

Secondary:

• Continue Shopping buttons
• Form submit buttons
• Newsletter sign-up buttons

Tertiary:

• Cookie management
• Secondary navigation options

For version 7.0 websites, additional style options include:

• Button Style (Filled, Outline, Raised)
• Button Shape (Square, Rounded, Pill)
• Custom color schemes
• Font selections

Note: Some specialized buttons (cart buttons, cover page buttons, image blocks) have separate style options in specific templates.

Related Articles

Previous Articles