> For the complete documentation index, see [llms.txt](https://docs.globo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.globo.io/options/storefront-display-and-design/storefront.md).

# Overview

Where the widget appears on your storefront, how it looks, and how it behaves.

Your option sets define *what* you ask. The settings in this section define *where the widget appears* and *what it looks like*. All of them are store-wide, in **Settings**.

## Pages in this section

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Widget placement</strong></td><td>The eight positions, and the CSS-selector options for anything else.</td><td><a href="/options/storefront-display-and-design/widget-placement.md">Widget placement</a></td></tr><tr><td><strong>Match your theme style</strong></td><td>Let the widget inherit your theme's look automatically, on supported themes.</td><td><a href="/options/storefront-display-and-design/match-your-theme-style.md">Match your theme style</a></td></tr><tr><td><strong>Colors</strong></td><td>Every color setting, grouped as the app groups them.</td><td><a href="/options/storefront-display-and-design/colors.md">Colors</a></td></tr><tr><td><strong>Borders and typography</strong></td><td>Border weight and radius, and the four text styles.</td><td><a href="/options/storefront-display-and-design/borders-and-typography.md">Borders and typography</a></td></tr><tr><td><strong>Custom CSS</strong></td><td>Style the parts the design settings do not cover.</td><td><a href="/options/storefront-display-and-design/custom-css.md">Custom CSS</a></td></tr><tr><td><strong>Widget behavior</strong></td><td>Alignment, tooltips, selected values, and limiting the widget's height.</td><td><a href="/options/storefront-display-and-design/widget-behavior.md">Widget behavior</a></td></tr><tr><td><strong>Cart page</strong></td><td>Add-on lines, editing options, and design previews.</td><td><a href="/options/storefront-display-and-design/cart-page.md">Cart page</a></td></tr><tr><td><strong>Ajax cart and redirect to cart</strong></td><td>What happens after Add to cart.</td><td><a href="/options/storefront-display-and-design/ajax-cart-and-redirect.md">Ajax cart and redirect to cart</a></td></tr><tr><td><strong>Show options on orders</strong></td><td>Option details on the cart, checkout, orders, invoices, packing slips, and emails.</td><td><a href="/options/storefront-display-and-design/show-options-on-orders.md">Show options on orders</a></td></tr></tbody></table>

## Setting up the widget's appearance

{% stepper %}
{% step %}

### Check Match theme style

**Settings** > **Design** > **Theme style**. On a supported theme, this sets most of the appearance at once — and it is already on if you installed the app while running that theme. See [Match your theme style](/options/storefront-display-and-design/match-your-theme-style.md).
{% endstep %}

{% step %}

### Adjust anything it did not cover

Set colors, borders, and typography in the same **Design** tab.
{% endstep %}

{% step %}

### Check the placement

**Settings** > **General** > **Widget Settings**. By default, the widget is above the **Add to cart** button. See [Widget placement](/options/storefront-display-and-design/widget-placement.md).
{% endstep %}

{% step %}

### Check a real product page

Use **View in Store** from the builder. The builder preview uses the app's own styling, so it does not reflect your theme.
{% endstep %}

{% step %}

### Check it on a phone

Most customers shop on a phone, so check the widget there as well.
{% endstep %}
{% endstepper %}

## Everything here is store-wide

There is no per-option-set styling or placement. Every option set in the store uses the same position, color scheme, and fonts.

To make one option set look different, add an [HTML class](/options/option-types/shared-settings/direction-width-and-css.md#html-class) to its options and target that class with [custom CSS](/options/storefront-display-and-design/custom-css.md).