Short description of issue
Need help rendering custom dynamic block with in product page
Reproduction steps
Use a Shopify theme that includes the component (for example, Dawn-based custom theme).
Open assets/theme.js (or product-rerender.js) and confirm that the component listens for product:rerender events.
Add a new block type named coupon to the product section (e.g. sections/main-product.liquid) just below the Buy Buttons.
Wrap it with data-block-type=“coupon” and data-block-id=“{{ block.id }}”.
Trigger a variant change on the product page (which fires product:rerender).
Observe that the coupon block does not re-render, since it’s not part of the blockTypes array in the product-rerender component.
Additional info
Hi everyone,
In my theme, I’m using Shopify’s custom web component that dynamically updates product blocks when the product:rerender event is triggered (usually on variant change).
I need to add a new custom dynamic block, which should render below the Buy Buttons on the product page and be configurable via the theme editor.
I’ve already reviewed theme.js and product-rerender.js (where the blockTypes array handles partial rerenders for blocks like price, inventory, buy-buttons, etc.), but I’m not sure what’s the best way to register a new custom block so that it gets picked up automatically by the rerender system.
If anyone has experience extending with a new block type, I’d appreciate some guidance or example code.
Thanks!
What type of topic is this
Troubleshooting