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:

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

LayoutLayout Components