Add Your Product Catalog to Your Website

Audience: Dealer Owner: Support / Account Management Last updated: 2026-06-08 Related SOPs: dealer-portal-onboarding.md, dealer-login-and-password-reset.md

What this is

This guide shows you how to get your catalog’s embed code from your Dealer Portal and add it to your website. The embed code places a fully interactive product catalog — with search, filters, product details, and a lead form — directly on a page of your website. Your customers can browse and inquire about products without ever leaving your site.

You can also share your catalog as a Direct Link — a standalone web page hosted by ProductSync that you can link to from anywhere.

What your customers will see

Once the embed code is on your website, customers will see your full product catalog right inside your page. They can:

• Browse products in a grid with images, names, and prices
• Filter by brand, category, and product attributes
• Click any product to see full details, photos, specs, and documents
• Submit an inquiry directly through the built-in lead form

The catalog automatically matches the colors and branding you set up in your portal’s Customize tab.

Figure 1 — Your catalog as it appears embedded on your website.

📸 Screenshot needed — 01-embedded-catalog-preview.png Capture a browser showing a sample website page with the ProductSync widget embedded — showing the product grid with branded header, sidebar filters, and product cards. Use demo data.

🛡️ Don’t worry — The embed code does not modify your website’s existing content, design, or navigation. It simply adds the catalog to the specific page where you paste the code. You can remove it at any time by deleting the snippet.

Before you start

• A catalog that’s been set up — You should have already completed the setup wizard and have products in your catalog. If you haven’t, follow the Getting Started guide first.
• Access to your website’s page editor — You’ll need to add a small HTML snippet to a page on your website. This is usually done in your website builder (WordPress, Squarespace, Wix, Shopify, etc.) or by editing HTML directly. If you’re not sure how to do this, your web developer or account manager can help.
• About 5 minutes — That’s all it takes.

💡 Tip — You don’t need any technical knowledge to use the Direct Link option. It’s just a URL you can share or link to — no code to paste.

What you need to do

Part 1: Get your embed code

1. Sign in to your Dealer Portal. Go to productsync.io, click “Dealer Login”, and sign in with your email and password.

2. Go to your Catalog page by clicking “Catalog” in the sidebar.

3. Click on the catalog you want to embed. This opens the Catalog Editor.

   (screenshot pending: The Catalog page showing your catalog groups) Figure 2 — Click on your catalog to open the Catalog Editor.

   📸 Screenshot needed — 02-catalog-list.png Capture the dealer portal Catalog page showing at least one catalog group card. Highlight or arrow the card the dealer would click.

4. Click the “Embed Code” tab at the top of the Catalog Editor. You’ll see four tabs: Products, Customize, Lead Generation, and Embed Code. Click on Embed Code.

   (screenshot pending: The Catalog Editor tabs with Embed Code highlighted) Figure 3 — Click the “Embed Code” tab at the top of the editor.

   📸 Screenshot needed — 03-embed-code-tab.png Capture the top of the CatalogGroupEditor showing the tab bar with “Embed Code” highlighted/active. Show the catalog name in the header.

5. Make sure your catalog is enabled. If you see a message that says “Enable this catalog to generate an embed code”, click the “Enable & Generate Code” button. This turns on your catalog and creates your unique embed code.

   (screenshot pending: The Embed Code tab before the catalog is enabled) Figure 4 — If your catalog isn’t enabled yet, click “Enable & Generate Code.”

   📸 Screenshot needed — 04-enable-catalog.png Capture the Embed Code tab in the “not enabled” state showing the 💡 icon, “Enable this catalog to generate an embed code” heading, the explanatory text, and the “Enable & Generate Code” button.

   🤔 Already enabled? — If your catalog is already enabled, you’ll skip this step and go straight to the embed code. You’ll know it’s enabled if you see the code snippet and a green ”✓ Catalog is live” banner.

6. You’ll see three sections once your catalog is enabled:

   • 📖 How Widget Embedding Works — A quick explainer showing the three-step process (copy snippet → it loads automatically → leads flow in)
   • Your Embed Code — The HTML snippet you’ll copy
   • ✓ Catalog is live — A green banner confirming your catalog is active

   (screenshot pending: The Embed Code tab with the code snippet visible) Figure 5 — Your embed code is ready. Click “Copy snippet” to copy it.

   📸 Screenshot needed — 05-embed-code-snippet.png Capture the full Embed Code tab in the “enabled” state showing: the ”📖 How Widget Embedding Works” guide with the 3-step cards, the “Your Embed Code” section with the code in a dp-code block, the “Copy snippet” button, and the green ”✓ Catalog is live” banner below. Use demo data.

7. Click the “Copy snippet” button in the top-right corner of the code block. You’ll see a green confirmation message: “Embed code copied!”

   The code looks something like this (your token will be different):

   <!-- ProductSync Catalog: My Catalog -->
   <div id="ps-catalog-abc123"></div>
   <script data-token="your-token-here" data-catalog-id="abc123"
           data-api-url="https://productsync.io"
           src="https://productsync.io/widget.js" async></script>
   <!-- End ProductSync Catalog -->

   ⚠️ Important — Do not modify the embed code. It contains your unique security token and catalog ID. Changing any part of it may cause the catalog to not load.

Part 2: Add the embed code to your website

Now that you’ve copied the code, paste it into a page on your website. The exact steps depend on your website platform.

WordPress

8. Log in to your WordPress admin (usually yourwebsite.com/wp-admin).

9. Create a new page or open an existing one where you want the catalog to appear (for example, a “Products” or “Catalog” page).

10. Add a “Custom HTML” block. In the WordPress block editor (Gutenberg), click the + button to add a new block, search for “Custom HTML”, and select it. If you’re using the Classic Editor, switch to the “Text” tab.

11. Paste the embed code into the Custom HTML block.

12. Publish or update the page. Your catalog will appear on that page immediately.

💡 Tip — In WordPress, you can also paste the embed code into a widget area (like a sidebar or footer) by adding a Custom HTML widget.

Squarespace

8. Log in to your Squarespace site and navigate to the page where you want the catalog.

9. Add a “Code” block. Click an insert point on the page, then select Embed → Code. Or search for “Code” in the block picker.

10. Paste the embed code into the code block.

11. Click “Apply” and save the page.

Wix

8. Log in to your Wix editor and open the page where you want the catalog.

9. Add an HTML embed. Click Add (+) in the left toolbar → Embed Code → Embed HTML. A box will appear on the page.

10. Select “Code” in the HTML settings panel, then paste the embed code.

11. Resize the embed box to fill the width of your content area. Set the height to at least 800px for the best experience.

12. Click “Apply” and publish your site.

Shopify

8. Log in to your Shopify admin and go to Online Store → Pages.

9. Create a new page or edit an existing one. In the page editor, click the <> (Show HTML) button to switch to HTML mode.

10. Paste the embed code into the HTML editor.

11. Save the page. If you want the page in your navigation, go to Navigation and add it to your menu.

Other platforms or custom HTML

8. Open the HTML source of the page where you want the catalog.

9. Paste the embed code at the location in the <body> where you want the catalog to appear. A good spot is inside a main content <div>.

10. Save and publish.

🛡️ Don’t worry — The embed code uses Shadow DOM technology, which means it creates an isolated container on your page. It will not interfere with your website’s styles, scripts, or other content.

Part 3: Share your Direct Link (optional)

If you don’t want to embed the catalog, or if you want to share it as a standalone page too, you can use the Direct Link.

13. Go to the Embed Code tab in your Catalog Editor (same screen from Part 1).

14. Click “View Direct Link” — the button in the top-right corner of the Embed Code card. This opens your catalog as a standalone page in a new browser tab.

    (screenshot pending: The “View Direct Link” button) Figure 6 — Click “View Direct Link” to open your catalog as a standalone page.

    📸 Screenshot needed — 06-direct-link-button.png Capture the top of the Embed Code tab showing the “Embed Code” heading and the “View Direct Link” button with the external link icon. Highlight the button.

15. Copy the URL from your browser’s address bar. It looks like: productsync.io/dealer/your-company/view/your-catalog.

16. Share this link anywhere — in emails, social media, Google My Business, or as a link on your website. Anyone with the link can browse your catalog.

💡 Tip — The Direct Link is a great option if you want to share your catalog quickly without touching your website’s code. Many dealers link to it from their website’s navigation menu.

Part 4: Verify your embed is working

17. Visit the page on your website where you added the embed code.

18. You should see your product catalog loading inside the page with your branded colors, product grid, and filters.

    (screenshot pending: The catalog successfully embedded on a website) Figure 7 — Your catalog is live on your website. Customers can browse and submit inquiries.

    📸 Screenshot needed — 07-catalog-live-on-site.png Capture a browser showing the embedded widget on a sample page — the branded header, product grid with cards, and sidebar filters visible. Show the browser URL bar to confirm it’s on the dealer’s domain, not productsync.io.

19. Try clicking a product to confirm the detail view opens with photos, specs, and the lead form.

20. Submit a test lead if you have the lead form enabled. Go back to your portal’s Leads section to confirm it appeared.

✅ You’re done when — Your catalog is visible on your website, you can browse products and filters, and test leads appear in your portal.

Keeping your catalog up to date

Once the embed code is on your website, your catalog updates automatically. You don’t need to change the embed code again unless you want to move the catalog to a different page. Here’s what happens automatically:

• New products you add to your catalog appear on your website
• Price changes and product updates sync automatically
• Theme and branding changes you make in the Customize tab appear on your website
• Lead form changes take effect immediately

If your website is showing outdated content, you can clear the cache from the Embed Code tab by clicking the ”🔄 Purge Cache” button. Changes will appear within 1 minute.

Platform-specific tips

If something doesn’t look right

🤔 “The catalog isn’t showing up on my website” Make sure the embed code was pasted as raw HTML, not as visible text. In WordPress, use a “Custom HTML” block — not a regular paragraph block. In other platforms, make sure you’re in “code” or “HTML” mode, not the visual/rich text editor.

🤔 “I see a loading spinner but no products” Check that your catalog is enabled (the green ”✓ Catalog is live” banner should appear in the Embed Code tab). If it is enabled, try clicking ”🔄 Purge Cache” in the Embed Code tab and refreshing your website.

🤔 “The catalog looks different from what I expected” The catalog uses the settings from your Customize tab. Go back to the Catalog Editor, click the Customize tab, and adjust colors, layout, card style, and filters. Save your changes and refresh your website.

🤔 “The catalog is too narrow or too short on my website” The widget expands to fill the width of its container. If it looks narrow, the HTML container on your page may be constrained. On Wix, make sure the embed element stretches to full width. On other platforms, paste the code into a full-width content area, not a sidebar.

🤔 “I want to embed a different catalog” Each catalog has its own embed code. Open the catalog you want to embed, go to its Embed Code tab, and copy that catalog’s snippet. You can have multiple catalogs embedded on different pages.

🤔 “My website uses a Content Security Policy (CSP) and the widget won’t load” Ask your web developer to add productsync.io to your CSP’s script-src and connect-src directives.

You’re done when

✅ You’re done when — You can visit your website page and see your product catalog loading with your branded colors, products, and filters. Customers can browse products, view details, and submit lead inquiries directly from your website.

Completion checklist

• My catalog is enabled in the Dealer Portal (green ”✓ Catalog is live” banner)
• I copied the embed code from the Embed Code tab
• I pasted the embed code into a page on my website
• The catalog is visible on my website with products, filters, and branding
• I can click on a product and see its detail page
• I submitted a test lead and it appeared in my portal’s Leads section (if lead form is enabled)

Need a hand?

If you’re having trouble adding the embed code to your website, your account manager can walk you through it — or even add it for you if you can share temporary access to your website editor. We also have a Direct Link option that requires no code at all. Just ask!

Contact your account manager or email our support team. We’re always happy to help.