Styling

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

Font Size

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	minmax(0, 1fr)
--se-options-column-size	Width of the options column	minmax(0, 1fr)
--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

Secondary 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	Gap between symbol input fields	8px
--se-symbol-input-width	Width of symbol 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.8)

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.
• Use slots to add custom HTML code. This allows you to customize both the appearance and the functionality of the editor.