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
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.