> ## Documentation Index
> Fetch the complete documentation index at: https://sidedish.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS Customization

> Take full control over the styling of your marketplace

SideDish stores are completely customizable. You can change the styling and appearance of any component. Every component can accept a `CSS class name` prop that you can use to then style within your own CSS file.

### Referencing pages

`Store Pages` have class name of `store-page` and an `id` of `page-$pageslug` where \$pageslug is the slug of the page, so for example `page-pro` for the page with slug `pro`.
So in order to style a page, you'd use something like:

```css
.store-page {
    /* styles for all pages */
    font-size: 16px;
}
.store-page#page-pro {
    /* styles for the page with slug pro */
    background-color: red;
    color: white;
}
```

`Product Pages` have class name of `product-page` and an `id` of `product-page-$templateId` where \$templateId is the id of the template, so for example `product-page` to style all product pages or `product-page-visitors` to style a template for visitors.

### Some default classes

**Search box** component uses class name `search-box`.

**Tabs** component uses class name `tabs-container` and `tabs-item` for each tab.

**Accordion** component uses class name `accordion` for the container, `accordion-trigger` for the header and `accordion-content` for the content.

**Gallery** component uses class name `gallery` and `gallery-item` for each item. It also uses `type-image` for images and `type-video` for videos.

**Video** component uses class name `video-player`.

**HTML editor field** output to a div with class name `html-editor`.

**Button** component uses class name `component-button`.

**Reviews box** component uses class name `reviews-box` for the container, `reviews-box-item` for each item.

**Product card** uses the class name `product-card` as well as `product-card-$tempateId` where `$templateId` is the id of the template (as products can have multiple templates).

## Responsiveness design

Acheive a responsive design easily by using the CSS `@media` queries.