This feature is available on all Goodshuffle Pro Plans.
1. Requirements
Before you begin:
Purchase the Website Integration from the Integrations tab in Goodshuffle Pro.
Copy your Public Browser Key from the same tab — you’ll use this in your Webflow code.
You can find the code snippets here.
Webflow Configuration
Step 1: Open Webflow Project Settings
Click the “W” symbol in the top left of your Webflow page and click "Project Settings".
Caption: Open the Webflow Project Settings from your site dashboard.
Step 2: Open the Custom Code Section
Next, click Custom Code in the Project Settings.
Caption: Select the Custom Code tab to add integration scripts.
3. Add the Goodshuffle Pro Scripts
In the Header section of Custom Code, paste the following:
<script type="module" src="https://unpkg.com/@goodshuffle/[email protected]/dist/gspro-wc/gspro-wc.esm.js"></script> <script nomodule="" src="https://unpkg.com/@goodshuffle/[email protected]/dist/gspro-wc/gspro-wc.js"></script> <gspro-wishlist-config data-url="https://data.goodshuffle.com/vendor/YOUR-PUBLIC-WEBSITE-KEY" ></gspro-wishlist-config>
⚠️ Replace YOUR-PUBLIC-WEBSITE-KEY with the Public Browser Key retrieved earlier.
Once added, click Save Changes.
Step 4: Publish Your Site
After saving the Custom Code:
Click Publish in the top right of Webflow.
Choose the domain(s) you want to publish to.
Caption: Publish your site after adding custom code.
💡 If you have multiple domains, test on a staging or demo domain first.
Previewing Your Website
Click the Jump Out Arrow next to your domain to see a preview of your Wishlist site.
Caption: Use the preview option to confirm your Wishlist Integration is live.
Removing the “Made in Webflow” Badge (Optional)
If you want to remove the Webflow branding badge:
Go to Project Settings → General.
Scroll down and disable Webflow Branding.
Click Save Changes.
Caption: Disable the Webflow branding badge in General settings.
⚠️ Don’t forget to publish after making changes.
Displaying and Item Galleries
Step 1: Open Your Project in Designer
Navigate to your Webflow Designer for the published site.
Caption: Open the Webflow Designer to add embeds.
Step 2: Open the Navigator
Click the Navigator panel and locate the section where you want to insert the gallery.
Caption: Use the Navigator to find the right page section.
Step 3: Add an Embed
Click Add → scroll to Embed.
Next, click 'Add' in the top right and select to add a new 'Embed'.
Note: you may need to scroll down to see Embed.
Caption: Add an Embed element where you want the Item Gallery to appear.
Step 4: Insert the Item Gallery Tag
To add an Item Gallery (more info here), paste the following snippet:
<gspro-item-gallery></gspro-item-gallery>
Then click Save and Close.
💡 You can drag the embed section so margins and layout align with your design.
Caption: Item Gallery embed showing sample items.
You can learn more about how a client will use the Wishlist here.
Set Default Inventory Filters
To display specific inventory by default:
Click the gear icon next to your Embed element.
Add search instructions (e.g., items with “Wedding” in title/description/tag).
Save and Publish.
Caption: Use the gear icon to set default filters for your Item Gallery.
You can learn more about searching items here.
You’re Done!
Once published, your Webflow site will show:
Search & filter section
Category listings
Item galleries embedded where you placed them
🎉 Success! Your Goodshuffle Pro integration is live.
Need Additional Support?
Need Additional Support? Click the blue chat bubble in the bottom corner of your screen to message our support team—we’re happy to help!