Coupon Not Showing on the Product Page: Set the Placement with the Product Form Selector

Klip coupons usually appear on your product page automatically, either below the Add to Cart button or inside the Klip block if you've added it in the theme editor.

If your coupons aren't showing up, first check that the Klip app embed is enabled and that the Klip app block has been added to your product template. For more details, see our Common Troubleshooting Methods for Klip Coupons guide.

With non-standard themes, page builders, or custom product templates, the coupon may not show up at all, or it may appear in the wrong spot. In that case, you can tell Klip exactly where to place it with the Product form selector.

This also helps if your store has several product templates. You set the placement once, instead of adding the Klip block to every template.

Step 1: Open the Product form selector setting

In the Klip app, go to Settings → Advanced → Coupon placements → Product page, and find the Product form selector field.

Step 2: Find the selector for where the coupon should go

1. Open one of your product pages on your storefront.
2. Right-click near the Add to Cart and Buy it now buttons and choose Inspect.
3. In the panel that opens, hover over the elements until the whole area around the buttons is highlighted. This is usually the product form. Pick the container, not the button itself.
4. Right-click the highlighted element and choose Copy → Copy selector.

If the copied selector contains a long number or a template name (for example #product-form-template--2134__main), it may only work on one template. Use one of the element's class names instead, like .product-form, so it works across all your product pages.

Step 3: Paste the selector into Klip

Back in Klip, replace the value in Product form selector with the selector you copied.

The default value is form[action*="/cart/add"], which is your store's Add to Cart form. You can also use any other container, such as your product price or product description block.

Step 4: Save and check your product page

Click Save, then open a product page on your storefront and refresh it. The coupon should now appear at the end of the element you chose.

How the selector works

• The coupon goes at the end of the first matching element. Klip finds the first element on the page that matches your selector and adds the coupon inside it, after its existing content.
• Target a container, not a button. If you target the Add to Cart button itself, the coupon will end up inside the button.
• Make sure the selector is unique. If several elements match, like a sticky Add to Cart bar, a quick view or product recommendations, the coupon goes into the first one, which may not be the one you want.

Klip block or selector: which one is used?

The Klip block always takes priority. If a product template contains a Klip block, the coupon shows in that block and the selector is ignored. If the template has no Klip block, the selector is used.

Stores with many product templates

If your products use several templates, you can combine both methods:

1. If the templates share a common spot for the coupon, set that spot once with the Product form selector. You won't need to add the Klip block to every template.
2. Add the Klip block only to the templates where the selector doesn't work.

Additional Tips: If the coupon didn't move

• Check for a Klip block. Open that product template in the theme editor. While a Klip block is there, the selector is ignored.
• Check that the element exists on the page. On the product page, open your browser's console and run document.querySelector('your selector'). It should return the element you expect. If it returns null, the selector doesn't match anything on that page.
• Go back to the default. Enter form[action*="/cart/add"] in the Product form selector field and save.

Still stuck? Message us through the chat in the Klip app and we'll help you find the right selector for your theme.

Updated on: 08/11/2026