This feature is available on all Goodshuffle Pro Plans.
🎥 Prefer to watch instead? Check out the quick video walkthrough below to see this feature in action.
Important: Using the Website Integration on a WIX site requires a paid or premium plan. The "Light" plan is recommended by Goodshuffle Pro and will work.
Your Domain must also be 'Published'. The Custom Elements required for the Integration will not be compatible with an 'Unpublished' Domain.
Step 1: Adding the correct code to the Header of your Wix site
To get started, first head to your Wix site editor. You can get there on most WIX sites by clicking "Home," then "Design Site" or "Edit Site."
Now that we're in the right place, we need to set the Website Integration up in your site's header. You can do this by clicking " Add Elements" and then "Add Custom Element."
Now that you have this element added, watch the video below to learn more about what you need to copy/paste:
Server URL: https://unpkg.com/@goodshuffle/[email protected]/dist/custom-elements/index.js
Tag Name: gspro-wishlist-config
Attribute Name: data-url
Value: https://data.goodshuffle.com/vendor/YOUR-PUBLIC-WEBSITE-KEY
Note: Don't forget to get the Public Browser Key from your account in the Integrations Tab!
You'll know you have things connected correctly if, after clicking "Publish," you see this icon on the front end of your site:
Step 2: Listing inventory items
We've connected our inventory—great! Let's make it appear on a page with an Item Gallery and an Item List.
Wherever you'd like to list items, click "Add Element" and add a custom element.
From here, we'll adjust the Server URL and the tags again —learn more in the video below.
Server URL: https://unpkg.com/@goodshuffle/[email protected]/dist/custom-elements/index.js
Tag Name: gspro-item-gallery or gspro-item-list
Attribute Name: Tags or Category (Note - this can change depending on what you'd like listed)
Value: <Your Tag> or a category of your choosing.
Troubleshooting: Wishlist Loads but No Inventory Appears
If your Wishlist loads but no inventory items appear (e.g., no heart icons or items to add), this issue is likely caused by a missing web component that is required to render inventory items on the page.
Cause
The absence of the <gspro-item-gallery> web component on the relevant page(s) prevents inventory items from being displayed. While the Wishlist itself can load, it will not show any items or allow users to add them without this component.
Solution
Identify the relevant page(s): Determine which page(s) should display inventory items.
Add the
<gspro-item-gallery>component: Insert the<gspro-item-gallery>web component into the HTML of the identified page(s). This component is essential for rendering inventory items.Verify the changes: After adding the component, refresh the page and confirm that inventory items are now visible and the Wishlist heart icons appear. By ensuring the
<gspro-item-gallery>component is present, you can enable the Wishlist to display inventory items correctly.
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!