# 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fsr0JXYTGPylqxcQe4tVG%2FStyle%201.jpg?alt=media&#x26;token=41ba84ca-2b3b-4bfc-9ba6-9a73599b9f7d" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FTeNuzOXDFlsIpk4kF7R1%2FStyle%204.jpg?alt=media&#x26;token=02cdfc64-9b1b-4450-8c93-f4c27f8f16e0" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FtbITNWl7zC5e5CqKmmRB%2FStyle%205.jpg?alt=media&#x26;token=ec19d866-ed23-459d-a456-f0dee520c737" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2F4r6L7ytdaq5aC1nyMBXw%2FStyle%206.jpg?alt=media&#x26;token=7ddc6ea9-3d92-42fb-9d58-174b91a1a134" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fo3aIseiArdDc5tLJXlgq%2FStyle%202.jpg?alt=media&#x26;token=c59bd220-3f8f-456e-8d80-8c05ef3f5a37" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2Fjx5c40CwC8Y9XFjL3nZI%2FStyle%203.jpg?alt=media&#x26;token=d387a648-1aee-4542-bad0-b58f955e1874" 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="https://2195890312-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjRi1aohY8I4BPjjvC9cH%2Fuploads%2FVRrksmXpifW5SRDHxzHG%2Fimage.png?alt=media&#x26;token=823143bd-4c24-42e3-86d6-a554b3650b0d" 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