Process shortcode from an app using variant metafield driven dropdown menu

Topic summary

A merchant wants to dynamically update a GLO Related Products widget on a product page when a user selects a different model via a variant-metafield-driven dropdown, without reloading the page.

  • Current setup: The app renders related products via a shortcode-like div (e.g.,
    ). The page already swaps other content (specs, description) on variant change by replacing div IDs.
  • Attempted approach: Programmatically replace the widget’s ID number (e.g., 12345) in the div when the variant changes.
  • Problem: After changing the ID, the GLO widget does not automatically re-render. The user doesn’t know how to “process” or re-initialize the updated shortcode to load the new related products without a page refresh.

Key question: Is there a way to trigger the app to reprocess the updated widget client-side (e.g., via a re-init function or event) to load variant-specific related products?

Status: Unresolved; seeking guidance on feasibility and implementation steps.

Summarized with AI on December 14. AI used: gpt-5.

I’m using GLO Related Products app to show related products on a product page. This app provides a typical shortcode (e.g.

) that’s embeded into a page to show Related Products when the shortcode is processed and loaded.

This product page has a model dropdown menu driven by variant metafields to change content of this product (e.g. specs, descriptions, etc.) on the fly without reloading the page based on which model variant was selected in the dropdown menu (I do this by grabbing and changing div ID to replace content).

I also want to change the Related Products content (driven by the app) on the same page without reloading the page, but I can’t seem to make that work. I got as far as replacing the id (“12345”) contained in the shortcode with another id using the variant dropdown menu, but I’m not sure how to actually process the updated shortcode to load updated Related Products.

Is this possible?