How can I position a button on a product page using CSS Smart Selector?

Shopify Apps

Topic summary

Seeking a way to let merchants visually choose where to place an app-injected button on Shopify product pages. The goal is an on-screen selector that picks the correct target element for insertion.

Rationale: A single, reliable CSS class or selector that works across most Shopify themes is hard to find due to wide HTML/CSS variation between themes. Themes are the storefront’s templates that define markup and styles, causing inconsistent DOM structures.

A linked Loom video demonstrates the desired interaction and problem context.

Ask: Recommendations or techniques for a “smart selector”/visual DOM picker that can robustly determine the correct insertion point across different themes.

Status: No solutions or decisions yet; the request is open for hints or best practices.

Summarized with AI on January 25. AI used: gpt-5.
1

Hi,

We own an app in Shopify that allows stores to inject a button in their product page. We are looking for a solution that enables the merchant to select on the screen the right position for the button.

See video here: https://www.loom.com/share/7bf6ea98942e4b2c8399b00a94a047c9

Why do we want to do this?

It is extremely challenging for us to find a single CSS class that is common across majority of the themes and that we could use as default.

Any help or hints would be highly appreciated!

Kind regards

HW