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

Widget placement

The eight positions, and the CSS-selector options for anything else.

Match your theme style

Let the widget inherit your theme's look automatically, on supported themes.

Colors

Every color setting, grouped as the app groups them.

Borders and typography

Border weight and radius, and the four text styles.

Custom CSS

Style the parts the design settings do not cover.

Widget behavior

Alignment, tooltips, selected values, and limiting the widget's height.

Cart page

Add-on lines, editing options, and design previews.

Ajax cart and redirect to cart

What happens after Add to cart.

Show options on orders

Option details on the cart, checkout, orders, invoices, packing slips, and emails.

Setting up the widget's appearance

1

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.

2

Adjust anything it did not cover

Set colors, borders, and typography in the same Design tab.

3

Check the placement

Settings > General > Widget Settings. By default, the widget is above the Add to cart button. See Widget placement.

4

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.

5

Check it on a phone

Most customers shop on a phone, so check the widget there as well.

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 to its options and target that class with custom CSS.