Appearance

Adjust various appearance-related global settings for your theme.

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.

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.

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.

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.

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).