Skip to main content

Prerequisites

  • A Shopify store with at least one active product
  • PopupShop app installed from the Shopify App Store
Reference: getpopup.shop

Step 1 — Publish products to PopupShop sales channel

  • In Shopify admin, open your products list.
  • Use Bulk editor (or each product) to make products available to the PopupShop sales channel.
  • Optional: If you want collections visible in the widget, make collections available to the PopupShop channel as well.
From the walkthrough, after publishing you should see the product count (e.g., “12 products published”) inside the app.

Step 2 — Create your widget

  • In the PopupShop app, click Create widget.
  • Configure:
    • Brand color: Leave blank to inherit Shopify brand settings, or choose a custom hex.
    • Products: Select which products to display.
    • Collapsed message (optional): Short CTA shown in the collapsed widget.
    • Store link (optional): Show a button linking to your main storefront.
  • You’ll see a live preview update as you change settings.
  • Click Save settings.

Step 3 — Embed on any website

  • In the PopupShop app, click Copy embed code.
  • Paste the snippet into your site’s HTML, typically just before the closing </body> tag.
Example placement (do not hardcode—use the exact snippet from the app):
<!-- Your page content above -->

<script src="https://cdn.getpopup.shop/widget.js" data-client-key="1fb1f32c80d64a2297cfacb5bb1f0000" async></script>

</body>
Publish or deploy your site and verify the widget renders.

Step 4 — Test the buying flow

  • Open your page and interact with the widget:
    • Browse products (recommendations may appear under product details).
    • Add items to cart; open cart to review.
    • Continue to checkout; Shopify’s secure checkout opens to complete purchase.

Tips

  • Keep the embed near the end of body to avoid blocking other content.
  • Start with a small product set to fine‑tune layout and spacing on your site.
  • If brand color is blank, the widget falls back to your Shopify brand settings.

Troubleshooting

  • Widget not showing: Confirm products are available to the PopupShop sales channel and you published the page/deployment.
  • Design not matching: Set a custom color in the widget settings or verify brand settings in Shopify.
  • Checkout issues: Ensure your store is on a paid plan or development store with test payments enabled; verify payment settings in Shopify admin.

Video walkthrough