Widget placement

The eight positions the widget can take on a product page, and how to place it elsewhere.

Widget placement controls where the option widget appears on your product page. Settings > Settings > General > Widget Settings > Widget placement.

The eight positions

Four positions are relative to elements every theme has. The other four are relative to an HTML element you specify.

Position	Puts the widget
Above product variants	Before the variant pickers
Below product variants	After the variant pickers, before the buy buttons
Above add to cart button	Directly above the buy buttons. New stores start here
Below add to cart button	Directly below the buy buttons
Above an HTML element	Immediately before an element you specify
Below an HTML element	Immediately after it
At the start of an HTML element	Inside it, as its first content
At the end of an HTML element	Inside it, as its last content

The four custom positions display a Selector of the HTML element field, where you enter a CSS selector such as #addToCart.

Widget placement, with the eight positions the widget can take.

Which to choose

You want	Choose
The most reliable default	Above add to cart button — options are read before the customer commits
Options grouped with the variant pickers	Below product variants
Options before the customer picks a variant	Above product variants — rarely right, since variant choice usually comes first
Options after the buy buttons	Below add to cart button — only if your theme puts something useful there. Customers may miss them
An exact position none of the above gives	An app block first, and a custom selector only if the block will not do

Try the app block before a CSS selector. You drag an app block into position in the theme editor, and there is no selector to maintain. A selector depends on your theme's internal structure, and a theme update can change it.

The placement setting includes a tip that points to the theme editor.

Using a custom selector

1

Find the element

On your product page, use your browser's inspector to find the element you want to place the widget against. Look for a stable id or a distinctive class.

2

Choose the relationship

Above and Below place the widget outside the element. At the start of and At the end of place it inside.

3

Enter the selector

Enter it in Selector of the HTML element, for example #addToCart or .product-form__buttons.

4

Save and check a real product page

If the widget does not appear, the selector does not match anything. Check it in your browser's inspector.

5

Record the selector you used

A theme update can change the markup. Knowing which selector you used makes the widget quick to fix.

Placement on other page types

The setting above applies to product pages. Other page types are handled differently:

Page	How the widget gets there
Collection quickview popups	Automatic. The app renders into the quickview's product form when your theme exposes one. There is no setting to turn on
Home page, featured product section	An app block in that section
Regular pages and blog pages, featured product section	The same app block
Cart page	Its own settings. See Cart page

Notes

• Placement is store-wide. Every option set uses the same position.

• Adding an app block does not disable automatic placement. If the widget appears twice, remove one of them.

• If a selector matches several elements, the widget is placed against the first one.

• Changing the placement does not affect the options themselves or how they behave.