# Styles

## Installation

1. From our app, click **Library.**
2. In the **Styles** tab, search the category of styles you want.
3. Click **Install** the style you like

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

## For Store Using Normal Theme

1. In the theme editor sidebar, delete the default style in the **Global** section.

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

2. Click **Add Section** to add the new style you want.

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

3. To customize the style, click the variants you want to edit.

<figure><img src="/files/0jtrAAXRDbQIkOrDPN6k" alt=""><figcaption></figcaption></figure>

## For Store Using Smind Theme

{% embed url="<https://files.gitbook.com/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F3I6XJ7RuVeB1EKriF3Bt%2FHow%20to%20change%20style%2011.mp4?alt=media&token=83845e40-a090-4b41-b667-393e0edc5a3a>" %}

1. In the theme editor sidebar, click **Theme Setting** gear icon.
2. Click **Theme Style**

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

3. To change font and color style for your store, click the name of style you want to use.
4. Click **Change Style.**

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

#### **How To Customize Style?**

1. In the theme editor sidebar, click **Theme Setting** gear icon to change whatever you want

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

<table><thead><tr><th width="197">Variants</th><th width="615">Function</th></tr></thead><tbody><tr><td>Colors</td><td>Allows you to customize the color scheme of your website</td></tr><tr><td>Typography</td><td>Refers to the fonts used for the content on your website. you can also adjust font, font size scale, line height scale, letter spacing scale for heading and body.</td></tr><tr><td>Typography (advance)</td><td>Allow you adjust element like desktop headings, mobile headings, button, subheading, badge, menu, price.</td></tr><tr><td>Layout</td><td>Help controls the structure of your website, such as the width of the page, grid systems (number of columns).</td></tr><tr><td>Animations</td><td>Help you adjust the effects of the button and image.</td></tr><tr><td>Buttons</td><td>You can adjust the button padding, scale, border, and shadow of the buttons on your website</td></tr><tr><td>Variant pills</td><td>Help customize these variants appear in product page like border, shadow, color swatch ( variant name, color configuration).</td></tr><tr><td>Inputs</td><td>Include text fields, checkboxes, and radio buttons where users can enter information or make selections, you can customize border and shadow of the inputs.</td></tr><tr><td>Icons</td><td>You can select icon style (package 1, 2, 3), adjust icon thickness and icon scale.</td></tr><tr><td>Product cards</td><td>You can select the style (Standard or Card) and adjust the image padding, border, and shadow.</td></tr><tr><td>Product badges</td><td>Indicate special attributes, such as "Sale badge" or "Sold out badge". You can toggle the Enable Badges mode, adjust the corner radius, and change the color (text, background).</td></tr><tr><td>Blog cards</td><td>Display posts in a grid format. You can select the style (Standard or Card) and adjust the image padding, border, and shadow.</td></tr><tr><td>Content containers</td><td>You can adjust the border (thickness, opacity, corner radius) and the shadow (blur, opacity)</td></tr><tr><td>Media</td><td>Including Images, Videos. : You can adjust the border (thickness, opacity, corner radius) and the shadow (blur, opacity).</td></tr><tr><td>Dropdown, popup</td><td>You can adjust the border (thickness, opacity, corner radius) and the shadow (blur, opacity).</td></tr><tr><td>Social media</td><td>You can customize the link of the social accounts like Facebook, Instagram and more.</td></tr><tr><td>Favicon</td><td>A favicon is the small, customizable icon that appears in the browser tab next to your store's title. You can choose a favicon image for your website.</td></tr><tr><td>Currency format</td><td>You can toggle the "Show currency codes".</td></tr><tr><td>Custom CSS</td><td>You can enter the codes to customize the CSS for your theme.</td></tr></tbody></table>

## FAQs

### Why Style Does Not Work

A \[Style] will only apply changes to Smind sections. It will not affect sections that belong to other apps or your total theme


---

# 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://docs.smind.io/in-app/library/styles.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.