Customizing Widgets for Your Brand

One of the most powerful features of Page Builder Widgets is the ability to fully customize every aspect of your widgets to match your brand identity.

Brand Colors

Setting Your Primary Colors

Navigate to the Widget Settings panel and locate the Color Customization section. Here you can:

• Set primary and secondary brand colors
• Define accent colors for hover states
• Customize text colors for optimal readability

Using Color Variables

For advanced users, Page Builder Widgets supports CSS custom properties, allowing you to maintain consistency across all widgets.

Typography

Font Selection

Choose from our library of web-safe fonts or integrate your own custom fonts:

1. Open the Typography settings
2. Select your preferred font family
3. Adjust font sizes for different screen sizes
4. Set line heights and letter spacing

Layout Customization

Responsive Design

All widgets are fully responsive by default. However, you can fine-tune the behavior on different devices:

• Desktop (1200px and above)
• Tablet (768px - 1199px)
• Mobile (below 768px)

Spacing and Alignment

Control padding, margins, and alignment options to ensure your widgets integrate seamlessly with your existing store design.

Best Practices

1. Stay consistent - Use the same colors and fonts throughout your store
2. Test on multiple devices - Always preview changes on different screen sizes
3. Less is more - Avoid over-customizing; subtle touches often work best
4. Match your theme - Ensure widgets complement your overall store theme

Ready to take your customization further? Check out our advanced styling guide or contact our support team for personalized assistance.