# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hoppn.gitbook.io/hoppn/shopify/best-practices-for-styling-your-store.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.