Requirements
Purchase the integration from your Integrations tab.
The web key from Goodshuffle Pro can be found in your Integrations tab.
You can find the code snippets here (also later in this article).
Configuration
Click the “W” symbol in the top left of your Webflow page and click 'Project Settings'
Next, click 'Custom Code'
We're going to add the following code to the Header elements:
PLEASE NOTE! You need to replace the text YOUR-PUBLIC-WEBSITE-KEY below with your Public Browser Key from Goodshuffle Pro (retrieved in the Activation step above).
<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>
Then, click 'Save Changes'
After, click to Publish your site by clicking 'Publish' in the top right of your screen and select 'Publish to Selected Domains'.
If you have multiple domains, we recommend publishing to your test or demo domain first.
To preview your Website, click the 'Jump Out Arrow' next to your domain and you'll be able to see a preview of your Wishlist Website.
Removing the 'Made in Webflow' badge
If you'd like the remove the 'Made in Webflow' badge from the bottom right, first head into 'General'.
Scroll down and disable the Webflow Branding and click 'Save Changes' when done.
Note: please ensure you're saving and publishing to save these changes.
Displaying and Item Galleries
First, navigate to your Projects.
And click to open the Designer.
From here, click to open the Navigator and open the sections highlighted below.
Next, click 'Add' in the top right and select to add a new 'Embed'.
Note: you may need to scroll down to see Embed.
To add an Item Gallery (more info here), paste the following snippet:
<gspro-item-gallery></gspro-item-gallery>
Press 'Save and Close' to show a list of items.
Note: you can drag your Embed section to the sections above to ensure the margins match.
When you save and publish these changes, you can see a search and filter section, and categories listed on your website.
You can learn more about how a client will use the Wishlist here.
Displaying default inventory
To display a specific set of inventory by default, first click the 'Gear' symbol next to the Embed section.
From here you can add a specific set of search instructions to pull up certain items.
You can learn more about searching items here.
Save & Close, and publish these changes and you'll see all items with the word "Wedding" in their title, description, or tag.
Well done!
Awesome!