Styling

Last updated on April 4, 2025
•
5 minutes to read

The Simple Editor uses CSS variables to customize its appearance and integrate with your product’s design system. These variables allow you to override styles for layout, typography, buttons, and interactive elements.

This article describes how to customize the Simple Editor using CSS variables, including best practices and examples.

Customizing the Editor with CSS Variables

To override the editor’s default styles, add a <style> tag to your HTML or link an external stylesheet using <link>. Define your CSS variables in the :root selector.

<style>
  :root {
    --se-accent-color: green;
    --se-text-color: #282828;
  }
</style>

Note

If a variable is not defined, the editor will use its default value. For best results, embed CSS variables directly in the <style> tag or ensure they are loaded before the editor initializes.

Available CSS Variables

Core Layout

Variable	Description	Default Value
`--se-viewer-height`	Height of the Viewer relative to its width	`100%`
`--se-min-height`	Minimum height of the editor during preload	`696px`
`--se-border-radius`	Border radius for most elements	`4px`

Container

Variable	Description	Default Value
`--se-container-max-width`	Maximum width of the container	`1280px`
`--se-container-padding-left`	Left padding of the container	`0`
`--se-container-padding-right`	Right padding of the container	`0`
`--se-container-padding-top`	Top padding of the container	`0`
`--se-container-padding-bottom`	Bottom padding of the container	`0`

Variable	Description	Default Value
`--se-title-font-size`	Font size of the product name	`2rem`
`--se-subtitle-font-size`	Font size of the product price	`1.5rem`
`--se-text-font-size`	Font size for plain text and input fields	`1rem`
`--se-option-names-font-size`	Font size for option titles in forms	`1rem`
`--se-variant-name-font-size`	Font size for design names in the Variant Design component	`0.875rem`

Layout

Variable	Description	Default Value
`--se-viewer-column-size`	Width of the Viewer column	`1fr`
`--se-options-column-size`	Width of the options column	`400px`
`--se-columns-gap`	Gap between the Viewer and options columns	`40px`

Padding & Margins

Variable	Description	Default Value
`--se-options-left-padding`	Left padding of the options list	`30px`
`--se-title-bottom-margin`	Margin between the product name and price	`8px`
`--se-heading-bottom-margin`	Margin between the heading and options section	`30px`

Buttons

Variable	Description	Default Value
`--se-sm-h-button-padding`	Horizontal padding for small buttons	`16px`
`--se-sm-v-button-padding`	Vertical padding for small buttons	`8px`
`--se-lg-h-button-padding`	Horizontal padding for large buttons (e.g., Add to Cart)	`32px`
`--se-lg-v-button-padding`	Vertical padding for large buttons (e.g., Add to Cart)	`16px`

Download PDF Button

Variable	Description	Default Value
`--se-secondary-button-background-color`	Background color of the secondary button	`#fff`
`--se-secondary-button-color`	Text color of the secondary button	`#282828`
`--se-secondary-button-border-color`	Border color of the secondary button	`#cccccc`
`--se-secondary-button-hover-color`	Background color of the secondary button on hover	`#f5f5f5`

Symbols

Variable	Description	Default Value
`--se-symbol-v-input-padding`	Vertical padding for input fields	`5.5px`
`--se-symbol-h-input-padding`	Horizontal padding for input fields	`16px`
`--se-symbols-gap`	Width of input fields	`8px`
`--se-symbol-input-width`	Gap between input fields	`50px`

Quantity Selector

Variable	Description	Default Value
`--se-quantity-font-size`	Font size for the quantity selector	`14px`
`--se-quantity-font-weight`	Font weight for the quantity selector	`400`
`--se-quantity-line-height`	Line height for the quantity selector	`20px`
`--se-quantity-text-color`	Text color for the quantity selector	`var(--se-text-color)`
`--se-quantity-price-per-each-font-size`	Font size for the price per item	`12px`
`--se-quantity-price-per-each-font-weight`	Font weight for the price per item	`var(--se-quantity-font-weight)`
`--se-quantity-price-per-each-line-height`	Line height for the price per item	`16px`
`--se-quantity-price-per-each-line-color`	Text color for the price per item	`#989898`
`--se-quantity-title-margin-bottom`	Bottom margin for the quantity title	`var(--se-option-name-bottom-margin)`
`--se-quantity-title-font-weight`	Font weight for the quantity title	`var(--se-option-title-font-weight)`
`--se-quantity-title-font-size`	Font size for the quantity title	`var(--se-option-names-font-size)`

Custom Text Toggle Input

Variable	Description	Default Value
`--se-text-toggle-font-size`	Font size for the custom text toggle input	`14px`
`--se-text-toggle-font-weight`	Font weight for the custom text toggle input	`400`
`--se-text-toggle-v-input-padding`	Vertical padding for the custom text toggle input	`7px`
`--se-text-toggle-h-input-padding`	Horizontal padding for the custom text toggle input	`11px`
`--se-text-toggle-v-focus-input-padding`	Vertical padding for the custom text toggle input when focused	`6px`
`--se-text-toggle-h-focus-input-padding`	Horizontal padding for the custom text toggle input when focused	`10px`
`--se-text-toggle-gap`	Gap between custom text toggle inputs	`16px`

Colors

Text and Background

Variable	Description	Default Value
`--se-text-color`	Default text color	`#282828`
`--se-bg-color`	Background color for the editor	`#fff`
`--se-modal-bg-color`	Background color for modal dialogs	`#fff`
`--se-dropdown-bg-color`	Background color for dropdown lists	`var(--se-bg-color)`
`--se-field-background-color`	Background color for input fields	`transparent`

Accent Colors

Variable	Description	Default Value
`--se-accent-color`	Accent color for interactive elements (e.g., buttons)	`#0090ff`
`--se-accent-hover-color`	Accent color on hover	`#0072e0`
`--se-accent-active-color`	Accent color when active	`#0058c2`
`--se-accent-contrast-color`	Contrast color for accent elements (e.g., text on accent background)	`#fff`

State Colors

Variable	Description	Default Value
`--se-disabled-color`	Color for disabled elements	`#a8a8a8`
`--se-empty-state-color`	Color for empty states	`#cccccc`
`--se-blur-color`	Blur color when changing PIM options	`rgba(255, 255, 255, 0.94)`

Notification Colors

Variable	Description	Default Value
`--se-error-color`	Color for error messages	`#db1919`
`--se-error-background-color`	Background color for error messages	`#ffebeb`
`--se-warning-color`	Color for warning messages	`#bc6e00`
`--se-warning-background-color`	Background color for warning messages	`#fff9f0`

Variant Design Component

Variable	Description	Default Value
`--se-grid-wrapper-color`	Background color for design variants	`#eeeeee`
`--se-grid-wrapper-border-color`	Border color for design variants	`#000000`

Other Colors

Variable	Description	Default Value
`--se-border-color`	Default border color for elements	`#c4c4c4`
`--se-border-hover-color`	Border color on hover	`#8a8a8a`
`--se-focus-color`	Border color when an element is focused	`#000`
`--se-active-color`	Color for active elements	`#e0e0e0`
`--se-wrapper-color`	Wrapper color for certain elements	`#f5f5f5`
`--se-modal-box-shadow-color`	Box shadow color for modals	`rgba(0, 0, 0, 0.25)`
`--se-swatch-border-color`	Border color for swatch elements	`#c4c4c4`
`--se-viewer-border-color`	Border color for the Viewer	`var(--se-active-color)`

How to Use CSS Variables

1. Embed in HTML

Add CSS variables directly in a <style> tag:

<style>
  :root {
    --se-accent-color: #3b82f6;
    --se-text-color: #1f2937;
  }
</style>

2. External CSS File

Link an external stylesheet:

<link rel="stylesheet" href="path/to/editor-theme.css">

3. Adaptive Design

Use media queries to adjust variables for different screen sizes:

@media (max-width: 768px) {
  :root {
    --se-options-column-size: 320px;
  }
}

4. Dynamic Updates with JavaScript

Modify variables at runtime:

document.documentElement.style.setProperty(
  '--se-accent-color',
  '#10b981'
);

Best Practices

Define variables before editor initialization to avoid default fallbacks.
Use semantic names for variables (e.g., --se-accent-color instead of --color-blue).
Test responsive behavior with media queries.
Avoid overriding internal class names unless necessary, as they may change in future updates.

You can also add custom HTML code with using Slots. This will not only fit the appearance, but also change the functionality of the editor.