Colors and Styles

Settings basic colors and styles in the Cart Designer

Customizing Colors and Styles in EliteCart

The Colors and Styles section of EliteCart allows you to fully personalize your cart's appearance to match your brand identity. This comprehensive customization panel gives you control over every visual aspect of your shopping cart experience.

Choosing Colors

success icon
We already imported your theme colours for you

Click on the color icon to open the color picker wheel, where you will also find Theme Colours we imported for you.

Main Colors

Background Color

Set the primary background color for your entire cart. The default is a clean white (#f1f1f1), but you can choose any color that complements your brand.

Primary Text Color

Define the color for most text elements throughout your cart. The default is set to black (#0a0a0a) for optimal readability.

Header Customization

Header Background Color

Customize the background color of your cart header. This inherits from your main background color by default but can be changed independently. As with all color fields, clicking the color icon opens the color picker with access to your theme colors for consistent branding.

Header Text Color

Set the color for text displayed in the header section. By default, it inherits from your primary text color.

Horizontal Divider Line

Toggle the option to hide the horizontal divider line below the header for a more seamless look.

Footer Customization

Footer Background Color

Similar to the header, you can set a specific background color for your footer section or keep it consistent with your main background.

Footer Text Color

Customize the color of text elements in your footer section.

Footer Horizontal Divider Line

Choose whether to display or hide the horizontal line above your footer section.

Button and Pricing Elements

Checkout Button Color

Set the background color for your checkout button. The default is black (#0a0a0a) for a bold, clear call to action.

Checkout Button Text Color

Customize the text color on your checkout button. The default is white (#ffffff) for maximum contrast and visibility.

Savings Text Color

Define the color used to highlight customer savings. This typically inherits from your primary text color but can be customized.

Price Display Options

Strikethrough Price Text Color

Set the color for crossed-out original prices. The default is a medium gray (#3d3d3d) to indicate the previous price.

Sale Price Text Color

Define the color for sale prices, typically highlighted in red (#b91c1c) to draw attention to discounts.

Additional Style Options

Rounded Corners

Toggle this option to apply rounded corners to images, buttons, and other elements for a softer look.

Force Square Product Pictures

Enable this option to maintain consistent square product images throughout your cart.

Bold Prices

Toggle this setting to make all prices appear in bold text for greater emphasis.

Automatic Theme Integration

For best performance and branding consistency, EliteCart automatically uses your theme's font and text sizes. This ensures your cart matches the rest of your store experience, though there may be slight variations between the preview and live version.

Live Preview

As you make changes to your cart's colors and styles, the cart designer preview will update automatically to show your selections in real-time. This allows you to experiment with different combinations until you achieve the perfect look for your brand.

Need More Customization?

Use Custom CSS

For advanced styling needs beyond the standard options, you can implement custom CSS. This gives you unlimited control over every visual aspect of your cart.

Reach Out for Support

If you need help with custom styling or have specific design requirements, don't hesitate to reach out to our support team. We're here to help you achieve the exact look you want for your EliteCart experience.

By taking advantage of these customization options, you can create a shopping cart experience that feels like a seamless extension of your store's unique visual identity.

Did this answer your question?
😞
😐
😁