Introduction to Using CSS to Customize Your Store’s Look & Feel
Customizing your store’s appearance is essential to creating a unique brand identity and enhancing the shopping experience for your customers. HeadQ offers two ways to change store components look and feel.
-
Pre-made options for controlling certain appearance characteristics are available, allowing for quick adjustments
-
For more detailed customization, you can use Custom CSS (Cascading Style Sheets)
Quick adjustments
You can find basic tools to change your store’s appearance in the settings, such as adjusting button colors, accent colors, and element rounding.
Pre-made options are available under the store settings and appearance view.
You can customize CPQ visual elements individually in the settings of each CPQ.
Custom CSS
For more detailed customization, you can use CSS to style specific elements. Custom CSS can be applied directly from the appearance dialog.
There are a few predefined CSS variables added to the root element that allow you to easily adjust the look and feel of your store. The following variables are currently in use:
| Variable | Default | Description |
|---|---|---|
| --hq-bg-color | #FFFFFF | Background color that is used in different layers |
| --hq-primary-color | #FFFFFF | Not in use |
| --hq-secondary-color | #FFFFFF | Not in use |
| --hq-accent-color | #FFFFFF | Accent color for inputs and hightlight color for selections |
| --hq-mood-color | #FFFFFF | Primary button background |
| --hq-border-color | rgb(209, 213, 219) | Border color used for inputs and layers |
| --hq-border-radius | 8px | Rounding radius for different elements |
| --hq-text-color | #000000 | Primary text color |
| --hq-text-color-secondary | #000000 | Secondary text color |
You can, for example, change the background color of layers to dark gray by overriding the default value with custom CSS.
:root {
--hq-bg-color: #5A5A5A;
}
Element classes
Each HeadQ component has its own classes that you can use for adjusting the styles of the components.
| Class | Description |
|---|---|
| headq-item-layer |
Layer container that is used when configuring certain product |
| headq-item-layer-image | Item container used in product layer. |
| headq-configurator-layer | Container for CPQ |
| headq-cart-layer | Cart container |
| headq-cart-item | Single line item row inside cart |
| headq-cart-item-image | Single line item row image container |
| headq-cart-item-description | Single line item row description container |
| headq-primary-button | Primary button used in different view |
| headq-checkout-form | Checkout form input container |
| headq-checkout-itenary | Checkout form itenary container |
For example, if you want to add transparency to your product configuration layer, you could add the following styles in the custom CSS field:
.headq-item-layer {
opacity: 0.8;
}
In conclusion, customizing your store’s appearance is crucial for creating a unique and engaging shopping experience that aligns with your brand identity. Whether you’re using the basic tools provided in the store settings or diving into more advanced customization with CSS, you have the flexibility to tailor every aspect of your store’s design. By taking advantage of predefined CSS variables and component-specific classes, you can easily make your store visually distinct and user-friendly. Embracing these customization options not only enhances the aesthetic appeal of your store but also contributes to a more cohesive and professional online presence.