Design System

The design system controls the overall look and feel of your Edpro theme, including visual style and button appearance.

Accessing Design System Settings

1. Open the theme editor
2. Go to Theme settings (gear icon)
3. Click Design system

Theme Style

Choose the overall visual style for your store.

Style Options

Where: Theme settings → Design system → Theme style

Best Uses

• Rounded - Friendly, approachable brands; lifestyle products
• Rigid - Professional, modern brands; tech products

Button Style

Control how buttons appear throughout your store.

Button Style Options

Where: Theme settings → Design system → Button style

Button Appearance Settings

Button Variant 1 (Primary)

Button Variant 2 (Secondary)

Same settings available for secondary buttons.

How Styles Apply

Theme and button styles affect:

• Product cards
• Cart buttons
• Form elements
• Navigation elements
• Modal dialogs
• Section containers

Combining Styles

Modern Professional

• Theme style: Rigid
• Button style: Small rounded
• Clean, corporate appearance

Friendly Approachable

• Theme style: Rounded
• Button style: Rounded
• Soft, welcoming feel

Bold Minimalist

• Theme style: Rigid
• Button style: Rigid
• Strong, decisive appearance

Common Tasks

Change theme style

1. Theme settings → Design system
2. Under “Theme style”, select Rounded or Rigid

Change button appearance

1. Theme settings → Design system
2. Under “Button style”, select your preferred style

Make buttons bolder

1. Theme settings → Design system → Button Variant 1
2. Set font weight to Bold
3. Consider adding border thickness

Use uppercase buttons

1. Theme settings → Design system → Button Variant 1
2. Set case setting to “Capital”

Tips

• Preview changes across multiple page types
• Consider your brand personality when choosing styles
• Test button legibility with different weights
• Ensure sufficient contrast for accessibility

Next: Configure your brand colors