How to Position Widgets on a Product Page

here are two methods to position your widget: using a CSS Selector or using App Blocks.

Method 1: Position a Widget Using a CSS Selector

1. On your store's product page, use your browser's "Inspect" tool to find the CSS class of the element you want to position the widget next to. [screenshot of finding the parent class 'product form button']
2. Copy this CSS class name.
3. Navigate to the widget's Settings page in the app.
4. In the Widget Settings section, find the Product page selector field.
5. Paste the class name into the field, starting with a period (.). For example: .product form button
6. Choose to position the widget Above or Below the selector.
7. Click Save. The widget will now appear in the new position on your product page. [screenshot of the widget positioned above the 'add to cart' and 'buy now' buttons]

Method 2: Position a Widget Using App Blocks

1. Go to your Online Store and click Customize on your theme.
2. Navigate to the page where you want to place the widget (e.g., the product page).
3. In the left-side panel, click Add section or Add block.
4. Select Apps.
5. Find and click on the widget you want to add, such as Goal base. [screenshot of selecting the Goal-based discount app block]
6. The app block will be added to the page. You can click and drag the block to move it to your preferred position.
7. Click Save. The widget will now appear in the new position on your page.

Updated on: 11/08/2025