Buttons allow you to customize your site's calls to action to match your brand identity. You can modify their appearance through the Site styles panel, affecting most buttons across your site.

Button Customization Options:

1. Shape and Fonts

• Access Site styles panel and select Buttons
• Choose between Primary, Secondary, or Tertiary button types
• Customize text fonts, shapes, outlines, and padding
• Changes save automatically
• Use "Apply To All Button Types" for consistent styling
• Keep button text under 25 characters for optimal appearance

2. Colors

• Buttons follow your site's global color scheme
• Background and text colors are customizable
• Fill buttons show background color
• No Fill buttons display outline and text in background color
• Underline shapes use different color application rules

Button Types and Their Applications:

Primary Buttons:

• Add to cart buttons
• Auto layout buttons
• Checkout buttons
• Donation block buttons
• Newsletter block buttons

Secondary Buttons:

• Continue shopping button
• Header buttons
• Form block submit buttons

Tertiary Buttons:

• Cookie banner options
• Additional navigation elements

Important Considerations:

• Button size adjusts automatically to accommodate text
• Some buttons maintain specific layouts for design consistency
• Padding tweaks may not affect certain elements like newsletter blocks
• Color themes can be varied by section
• Button styles help highlight important calls-to-action

For Version 7.0 Sites:

• Access button styling through Website panel > Design > Site styles
• Available options include style, shape, color, and font settings
• Some buttons (shopping cart, cover page, image blocks) have separate styling options
• Template-specific elements may have unique styling locations

This styling system ensures consistent button appearance while allowing flexibility for different functional needs across your site.

Related Articles

Previous Articles