> For the complete documentation index, see [llms.txt](https://docs.shopone.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shopone.io/english/basic-setup-tools-for-the-landing-page/quick-setup-bar/advanced-editor/custom-advance.md).

# Custom advance

The **"Advanced Customization"** feature allows users to tailor the appearance and behavior of components using custom CSS classes and styles. This is a powerful tool designed for developers or web designers who require detailed customization to meet specific design needs.

<figure><img src="/files/qUM45qQKXBGNjseV6jAn" alt=""><figcaption></figcaption></figure>

**1. Custom Classes**

**Purpose:** Users can add CSS classes to apply predefined styles from the project's CSS file.

**How to Use:**

* Enter class names separated by commas if adding multiple classes (e.g., `class1, class2`).
* These classes will be added to the component, triggering the corresponding styles.

**2. Custom CSS**

**Purpose:** Allows users to write CSS code directly to modify specific properties of a component without editing the original CSS file.

**How to Use:**

* Write CSS rules in the input box, such as:

  ```css
  overflow: hidden;
  display: block;
  background-color: #f3f3f3;
  ```
* These CSS rules will apply only to the selected component.

**3. Benefits of Advanced Customization**

* Enables developers to create unique designs without altering the default structure.
* Adjusts components to match specific design themes or branding.
* Simplifies testing changes without affecting the entire CSS codebase.

{% hint style="warning" %}
**Notes:**

* This feature requires basic knowledge of CSS.
* Avoid conflicts with existing CSS classes or rules.
* Test changes across multiple devices to ensure consistent performance and appearance.
  {% endhint %}