Styling

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

The Simple Editor uses CSS variables to change its appearance and fit the styles of the product page where it is embedded. These styles can be statically added to a page through a link to a stylesheet or a <style> element.

<style>
  body {
    background: black;
  }
  :root {
    --se-accent-color: green;
  }
</style>

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. For example, learn how you can embed external content into HTML Placeholders.

Available CSS Variables

Below is a list of CSS variables you can use to customize the Simple Editor, along with their default values:

Core

  • --se-viewer-height: 100%: Height of the Viewer relative to its width.
  • --se-min-height: 696px: Minimum height of the editor during preload.
  • --se-border-radius: 4px: Border radius for most elements in Simple Editor.

Container

  • --se-container-max-width: 1280px: Maximum width of the container with the editor.
  • --se-container-padding-left: 0: Left padding of the container.
  • --se-container-padding-right: 0: Right padding of the container.
  • --se-container-padding-top: 0: Top padding of the container.
  • --se-container-padding-bottom: 0: Bottom padding of the container.

Font Size

  • --se-title-font-size: 2rem: Font size of the product name.
  • --se-subtitle-font-size: 1.5rem: Font size of the product price.
  • --se-text-font-size: 1rem: Font size for plain text, including input fields.
  • --se-option-names-font-size: 1rem: Font size for option titles in forms.
  • --se-variant-name-font-size: 0.875rem: Font size for design names in the Variant Design component.

Layout

  • --se-viewer-column-size: 1fr: Width of the Viewer column.
  • --se-options-column-size: 400px: Width of the options column.
  • --se-columns-gap: 40px: Gap between the Viewer and options columns.

Padding & Margins

  • --se-options-left-padding: 30px: Left padding of the options list.
  • --se-title-bottom-margin: 8px: Margin between the product name and price.
  • --se-heading-bottom-margin: 30px: Margin between the heading and options section.
  • --se-option-bottom-margin: 20px: Margin between options.
  • --se-option-value-padding: 8px: Padding between the option name and value.

Buttons

  • --se-sm-h-button-padding: 16px: Horizontal padding for small buttons.
  • --se-sm-v-button-padding: 8px: Vertical padding for small buttons.
  • --se-m-h-button-padding: 24px: Horizontal padding for medium buttons (currently unused).
  • --se-m-v-button-padding: 12px: Vertical padding for medium buttons (currently unused).
  • --se-lg-h-button-padding: 32px: Horizontal padding for large buttons (e.g., Add to Cart).
  • --se-lg-v-button-padding: 16px: Vertical padding for large buttons (e.g., Add to Cart).

Download PDF Button

  • --se-secondary-button-background-color: #fff: Background color of the secondary button.
  • --se-secondary-button-color: #282828: Text color of the secondary button.
  • --se-secondary-button-border-color: #cccccc: Border color of the secondary button.
  • --se-secondary-button-hover-color: #f5f5f5: Background color of the secondary button on hover.

Symbols

  • --se-symbol-v-input-padding: 5.5px: Vertical padding for input fields.
  • --se-symbol-h-input-padding: 16px: Horizontal padding for input fields.
  • --se-symbols-gap: 8px: Gap between input fields.
  • --se-symbol-input-width: 50px: Width of input fields.

Quantity Selector

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

Custom Text Toggle Input

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

Colors

Text Color

  • --se-text-color: #282828: Default text color for most elements.

Accent Colors

  • --se-accent-color: #0090ff: Accent color for interactive elements (e.g., buttons).
  • --se-accent-hover-color: #0072e0: Accent color on hover.
  • --se-accent-active-color: #0058c2: Accent color when active.
  • --se-accent-contrast-color: #fff: Contrast color for accent elements.

Background Colors

  • --se-bg-color: #fff: Background color for the editor.
  • --se-modal-bg-color: #fff: Background color for modal dialogs.
  • --se-dropdown-bg-color: var(--se-bg-color): Background color for dropdowns.
  • --se-field-background-color: transparent: Background color for input fields.

State Colors

  • --se-disabled-color: #a8a8a8: Color for disabled elements.
  • --se-empty-state-color: #cccccc: Color for empty states.
  • --se-blur-color: rgba(255, 255, 255, 0.94): Blur color when changing PIM options.

Notification Colors

  • --se-error-color: #db1919: Color for error messages.
  • --se-error-background-color: #ffebeb: Background color for error messages.
  • --se-warning-color: #bc6e00: Color for warning messages.
  • --se-warning-background-color: #fff9f0: Background color for warning messages.

Variant Design Component

  • --se-grid-wrapper-color: #eeeeee: Background color for design variants.
  • --se-grid-wrapper-border-color: #000000: Border color for design variants.

Other Colors

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

How to Use CSS Variables

You can use CSS variables in the following ways:

  1. Embed in HTML: Add the CSS variables directly within a <style> tag in your HTML file.

    <style>
  :root {
    --se-sm-h-button-padding: 30px;
  }
</style>

  2. External CSS File: Create a separate CSS file and link it to your HTML file using the <link> tag.

    <link rel="stylesheet" href="path/to/your/css-variables.css">

  3. Adaptive Design: Change the values of CSS variables based on the screen width using media queries.

    @media screen and (max-width: 1000px) {
  :root {
    --se-accent-color: green;
  }
}

  4. Setting Variables with JavaScript: Use JavaScript to set or modify CSS variables dynamically.

    window.addEventListener("DOMContentLoaded", () => {
  const root = document.querySelector(':root');
  root.style.setProperty('--se-accent-color', 'lawngreen');
  root.style.setProperty('--se-text-color', 'royalblue');
});

  5. Adding Tag with JavaScript: Use JavaScript to add a <style> element with new CSS variables.

    window.addEventListener("DOMContentLoaded", () => {
  const stylesTag = document.createElement('style');
  stylesTag.textContent = `
    :root {
      --se-accent-color: green;
    }
  `;
  document.head.appendChild(stylesTag);
});
Was this page helpful?
Back to top Copyright © 2001–2025 Aurigma, Inc. All rights reserved.