01
1. Publish your configurator
In Hub, finish product and pricing setup, then open Publish and copy the iframe snippet for your public ID. Keep embed=1 in the URL so the layout fits inside Shopify.
Open HubIntegrations
Shopify theme embed
Add your branded PergolaConfigurator to a Shopify storefront with a Custom Liquid (or Custom HTML) section. This is a theme embed — not a Shopify App Store app — and works with your published public ID.
Last updated: October 23, 2026
02
2. Add a Custom Liquid section
In the Shopify theme editor, open the page or product template where the configurator should appear. Add a Custom Liquid (Online Store 2.0) or Custom HTML section, then paste the iframe snippet.
03
3. Recommended Liquid snippet
Replace YOUR_DOMAIN and YOUR_PUBLIC_ID (or paste the exact Hub snippet): <div class="pergola-configurator-embed" style="width:100%;min-height:780px"> <iframe src="https://YOUR_DOMAIN/?d=YOUR_PUBLIC_ID&embed=1" title="Pergola configurator" style="width:100%;min-height:780px;border:0;border-radius:8px" allow="fullscreen; xr-spatial-tracking" loading="lazy" ></iframe> </div>
04
4. Test on mobile
Preview the storefront on a phone. Make sure the section height is tall enough for the configurator drawer and quote buttons. Increase min-height if controls are clipped.
05
App Store note
A native Shopify Partner app with OAuth install is planned later. Theme embed is the supported path today and does not require App Store review.
General embed docs