# Appearance

![](https://docs-assets.foxecom.app/motrix-theme/32f98151-e4b9-4d82-a8cb-480921156816.jpg)

Appearance settings control the shape and size of common interface elements across your storefront, such as buttons, input fields, badges, and labels.

Use these settings to create a consistent visual style that matches your brand.

<Hint type="info">
  These settings only affect the **shape and dimensions** of elements.&#x20;

  To customize colors, go to [**Colors**](https://docs.foxecom.com/motrix-theme/theme-settings/colors).&#x20;

  To change fonts and text styles, go to [**Typography**](https://docs.foxecom.com/motrix-theme/theme-settings/typography).
</Hint>

## Buttons

Customize the appearance of **buttons** throughout your storefront.

<Table widths="30%">
  | Setting              | Description                                                                                                                                      | Options     |
  | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ----------- |
  | **Height**           | Set the height of buttons throughout your storefront.                                                                                            | 40px - 80px |
  | **Corner radius**    | Control how rounded button corners appear. Use a lower value for more square corners and a higher value for more rounded or pill-shaped buttons. | 0px - 100px |
  | **Border thickness** | Set the border width for outlined buttons.                                                                                                       | 1px - 4px   |
</Table>

<Columns>
  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/documentation/d7dd4b9d-c24f-4731-9239-60c3db539c2b.png" />

      <Figcaption>
        Corner radius \= 0px
      </Figcaption>
    </Figure>
  </Column>

  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/documentation/260fee02-fb5f-4b3f-828e-3c449ea8fbd6.png" />

      <Figcaption>
        Corner radius #0px
      </Figcaption>
    </Figure>
  </Column>
</Columns>

<Columns>
  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/documentation/7f97b771-03c7-48e0-afbe-825aa23c6e16.png" />

      <Figcaption>
        Border thickness \= 1px
      </Figcaption>
    </Figure>
  </Column>

  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/documentation/1d745d0d-df23-484a-950c-c86be5f18e3a.png" />

      <Figcaption>
        Border thickness # 1px
      </Figcaption>
    </Figure>
  </Column>
</Columns>

## Input fields

Customize the appearance of **text fields, dropdowns, and search boxes**.

<Table widths="30%">
  | Setting              | Description                                                 | Options     |
  | -------------------- | ----------------------------------------------------------- | ----------- |
  | **Height**           | Set the height of text fields, dropdowns, and search boxes. | 40px - 80px |
  | **Corner radius**    | Control how rounded the corners of input fields appear.     | 0px - 100px |
  | **Border thickness** | Set the border width of input fields.                       | 1px - 4px   |
</Table>

<Columns>
  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/documentation/1c5b2dcc-dd61-4b96-8250-6c709e70ed84.png" />

      <Figcaption>
        Corner radius \= 0px
      </Figcaption>
    </Figure>
  </Column>

  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/documentation/86c8ca95-6e39-42b6-9c7e-6f2c6ecb0b84.png" />

      <Figcaption>
        Corner radius # 0px
      </Figcaption>
    </Figure>
  </Column>
</Columns>

## Badges

Customize the shape of **badges** throughout your storefront.

<Table widths="30%">
  | Setting           | Description                                    | Options     |
  | ----------------- | ---------------------------------------------- | ----------- |
  | **Corner radius** | Control how rounded the corners badges appear. | 0px - 100px |
</Table>

## Sales badges

Customize the shape of **sales badges** throughout your storefront.

<Table widths="30%">
  | Setting           | Description                                   | Options     |
  | ----------------- | --------------------------------------------- | ----------- |
  | **Border width**  | Set the border width of sales badges.         | 0px - 4px   |
  | **Corner radius** | Control how rounded the corners sales appear. | 0px - 100px |
</Table>

<Columns>
  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/documentation/47c556eb-8968-45d1-aa3d-7c2863f47719.png" />

      <Figcaption>
        Custom badges
      </Figcaption>
    </Figure>
  </Column>

  <Column>
    <Figure>
      <img src="https://docs-assets.foxecom.app/documentation/8fa38543-db1a-4c5b-9b48-958cf7b0af2b.png" />

      <Figcaption>
        Sales badge
      </Figcaption>
    </Figure>
  </Column>
</Columns>

## Labels

Customize the shape of **label pills displayed on supported cards**.

<Table widths="30%">
  | Setting           | Description                                            | Options     |
  | ----------------- | ------------------------------------------------------ | ----------- |
  | **Corner radius** | Control how rounded the corners of label pills appear. | 0px - 100px |
  | **Border width**  | Set the border width of label pills.                   | 0px - 4px   |
</Table>

<Figure>
  <img src="https://docs-assets.foxecom.app/documentation/88d7685e-6abd-490a-bae1-0ed9f72cedcc.png" />

  <Figcaption>
    Labels
  </Figcaption>
</Figure>

## Article card tag

Control the corner radius for **blog article category tags**.

<Table widths="30%">
  | Setting           | Description                                                      | Options     |
  | ----------------- | ---------------------------------------------------------------- | ----------- |
  | **Corner radius** | Control how rounded the corners of article category tags appear. | 0px - 100px |
</Table>

<Figure>
  <img src="https://docs-assets.foxecom.app/documentation/b52b0d3d-659b-4254-a0ff-087aed0a33be.png" />

  <Figcaption>
    Article tags
  </Figcaption>
</Figure>

<Hint type="info">
  To add/remove blog article tags, please go to **Shopify Admins > Content > Blog posts.** [Learn more about tags in Shopify](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/using-tags)
</Hint>