# Appearance

### Borders

#### Button border radius

Applies a border radius to buttons and similar elements, including form fields and the count down timer. You can choose between **none**, **slightly rounded**, and **rounded**. The exact level of roundedness is automatically determined on a component level.

#### Card border radius

Applies a border radius to centered modal dialogs, images and any card containers.  You can choose between **none**, **slightly rounded**, and **rounded**. The exact level of roundedness is automatically determined on a component level.

#### Border thickness

Select a value between 1px and 3px. The border thickness will be applied globally to all borders, including inputs and buttons.

#### Border opacity

Makes some borders transparent. Select a percentage value from 0% - 100%. This will only apply to decorative borders between elements, not outlines on inputs or buttons.

### Overlays

#### Default color scheme

Defines the default color scheme for overlays and pop-ups. When applicable, can be overridden at the section level.

#### Overlay background

Sets a background color to cover the rest of the page when certain overlays are open. 

#### Show borders

This setting adds borders around overlays that don't have a background backdrop, such as newsletter pop-ups and error messages. This may be overridden on certain sections, e.g. Newsletter popup.

{% hint style="info" %}
If you don't want a border around a specific overlay, create a color scheme with transparent borders by clearing the "Border" color field and select that color scheme.
{% endhint %}

#### Enable background blur

This setting adds a blur effect to the modal and popup backgrounds. This can help to minimize distractions from moving/animated content in the background, but it may also cover important context.

### Forms

#### Label style

For form fields, labels can either be positioned as placeholder text that moves upwards when the form is filled (**floating**), or be persistently displayed above the form field (**always on top**). For greater accessibility, we recommend displaying labels **always on top**. Find out more about this in our [accessibility guide](/guides/accessibility.md).

#### **Input style**

For inputs, you can choose between an **underline** or **rectangle** style. Underline displays a single bottom border, whereas rectangle will fully enclose the input with a border. Certain users can have difficulty understanding that underline inputs are actual form fields, so if accessibility is a concern, we recommend using the **rectangle** style.

#### Input padding

Select **small, medium,** or **large** to apply different levels of padding to form inputs. 

#### Swatch style

Swatches, when configured, can appear on the **Product template**, **Featured product** section and in **Product cards**. This setting allows you determine the shape of swatch inputs globally, **rectangle, circle and square.**  \
\
Check out Shopify's documentation on [how to set up native swatches](https://help.shopify.com/en/manual/custom-data/metafields/category-metafields/using-category-metafields). 

### Quick add

#### Button icon

Choose between a bag or plus icon for the quick add button (appears in mini product, product cards and [image block](/blocks/image.md)).


---

# 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.ultramarinastudios.com/theme-settings/appearance.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.