Opening a button-rich page in Site Styles helps you preview changes in real-time when customizing button appearance. Here's how to style your site's buttons effectively:

Button Types and Their Uses:

Primary Buttons:

• Add to Cart buttons
• Smart layout buttons
• Payment and donation buttons
• Newsletter and Member Signup blocks

Secondary Buttons:

• Continue Shopping button
• Header buttons
• Form submission buttons

Tertiary Buttons:

• Cookie banner options
• Additional navigation elements

Customizing Button Styles:

Text Customization:

• Font selection
• Text styling options
• Keep button text under 25 characters for optimal display

Shape and Border:

• Fill or No fill options
• Border thickness
• Horizontal and vertical padding
• Button shape (square, rounded, or custom corners)

Color Settings:

• Background colors follow site's global color scheme
• Text colors can be customized separately
• Hover state appearances
• Different color themes for various sections

Important Considerations:

• Changes apply site-wide to maintain consistency
• Button size adjusts automatically to fit text content
• Some buttons (like newsletter blocks) have fixed padding
• Use Apply to all button types for uniform styling
• Reset button styles to restore defaults

Special Cases:

• Form blocks and header buttons allow type switching
• Newsletter blocks maintain fixed layouts
• Some templates offer alternate/overlay color options
• Cover pages and image blocks have separate styling options

For optimal results, maintain consistent styling across button types while ensuring important CTAs stand out appropriately within your site's design.

Related Articles

Previous Articles