> For the complete documentation index, see [llms.txt](https://hoppn.gitbook.io/hoppn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hoppn.gitbook.io/hoppn/shopify/best-practices-for-styling-your-store.md).

# Best practices for styling your store

When integrating third-party widgets (like ours), it’s important to avoid style conflicts that can affect their functionality or appearance. Here are some best practices to structure your store's styles safely:

## Avoid overly aggressive global resets

Global resets can unintentionally affect widgets, iframes, or external integrations.

### **❌ NOT recommended:**

```
 * {
   all: unset;
  }

  body, html {
    margin: 0;
    padding: 0;
    font-family: Arial !important;
  }  
```

### ✅ Recommended

```
.store * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  } 
```

## Don’t force global fonts

Changing the global font affects the entire DOM, including embedded widgets or libraries.

### **❌ NOT recommended:**

```
body {
    font-family: Arial !important;
  }  
```

### ✅ Recommended

```
.store {
    font-family: Arial;
  }
```

## Control style specificity

Avoid overriding generic classes like .modal, .popup, or .overlay without proper context.

### **❌ NOT recommended:**

```
.modal {
    position: fixed;
    z-index: 9999;
    background: #fff;
  }
```

### ✅ Recommended

```
.store .modal {
    position: fixed;
    z-index: 1000;
    background: #fff;
  }
```

## Handle z-index properly

Improper use of z-index can cause unexpected overlaps with widgets or other components.

### **❌ NOT recommended:**

```
 * {
    position: relative;
    z-index: 99999;
  }
```

### ✅ Recommended

```
 .header {
    z-index: 1000; /* Avoid extreme values unless strictly necessary. */
  }
```

## Avoid global styles on base elements

Overriding basic HTML tags can affect widgets or third-party components.

### **❌ NOT recommended:**

```
button {
    border: none !important;
    background: transparent !important;
  }
```

### ✅ Recommended

```
.store-button {
    border: none;
    background: transparent;
  }
```

## Use CSS variables for themes and colors

### **❌ NOT recommended:**

```
.store h1 {
    color: #ff6600;
    font-family: Arial, sans-serif;
  }
```

### ✅ Recommended

```
.store {
    --primary-color: #ff6600;
    --font-main: 'Arial', sans-serif;
  }

  .store .custom-title {
    color: var(--primary-color);
    font-family: var(--font-main);
  }
```

## Use prefixed class names to avoid conflicts

Using common class names like .button, .icon, or .container without a namespace increases the risk of CSS collisions.

### **❌ NOT recommended:**

```
.button {
    padding: 10px;
  }
```

### ✅ Recommended

```
 .store-button {
    padding: 10px;
  }
```

Maintaining clean and well-scoped CSS is essential when working with third-party widgets or embedded components. Following these best practices helps ensure:

* Your store’s styles remain consistent and predictable.
* Third-party integrations work as expected, without visual or functional conflicts.
* Maintenance becomes easier, reducing technical debt and avoiding hard-to-debug issues in the future.