Customize Your Catalog Appearance

Audience: Dealer Owner: Support / Account Management Last updated: 2026-06-09 Related SOPs: dealer-portal-onboarding.md, dealer-embed-code-setup.md

What this is

The Customize tab is where you control how your product catalog looks — both on your website (if you use the embed code) and on your Direct Link page. You can change your header, pick a layout style, turn filters on or off, add product badges, show related products, and much more. Every change you make here updates what your customers see, in real time after you save.

What your customers will see

After you customize your catalog, your customers will see a polished, branded product browsing experience — including your logo, your chosen layout, filtered navigation, product badges, and related product suggestions — all matching the look and feel you set up. The catalog appears either as a section embedded on your website or as a standalone page on your Direct Link.

Figure 1 — The Customize tab inside the Catalog Editor.

📸 Screenshot needed — 01-customize-tab.png Capture the Catalog Editor with the Customize tab selected. Show the top portion of the page so the tab bar, Save button, and first section are all visible. Crop out any real account data.

🛡️ Don’t worry — Customizing your catalog will not change anything on your existing website, your email, or your domain. It only changes how the product catalog itself looks. You can always undo any setting by toggling it back.

Before you start

You will need:

• Your Dealer Portal login — go to productsync.io, click “Dealer Login”, and sign in with your email and password.
• An existing catalog — you need at least one catalog already created. If you haven’t created one yet, check the dealer-portal-onboarding.md guide first.
• About 15–20 minutes — you don’t have to configure everything in one sitting. You can save at any point and come back later.

💡 Tip — You can skip any section that doesn’t interest you right now. The defaults are sensible and your catalog will look good out of the box. Come back and fine-tune whenever you like.

What you need to do

This guide is organized into nine sections, matching the sections you’ll see on the Customize tab. Work through them in order, or skip to the section you need.

Part 1 — Catalog Description

The catalog description is a brief blurb that tells your customers what this catalog is about. It appears in your catalog’s header area (if the header is turned on).

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

2. In the left sidebar, click Catalog.

3. You will see a list of your catalogs. Click the name of the catalog you want to customize.

4. The Catalog Editor opens. Click the “Customize” tab at the top of the editor.

5. Scroll to the Catalog Description section at the top. You will see a text area where you can type a short description of your catalog.

6. Click inside the text area and type your description. Keep it brief — one or two sentences works best. For example: “Browse our full line of wood and gas fireplaces, inserts, and stoves.”

Figure 2 — The Catalog Description text area.

📸 Screenshot needed — 02-catalog-description.png Capture the Catalog Description section showing the text area with example text typed in. Crop tightly to just the description section.

💡 Tip — This description also appears in search engine results for your Direct Link page, so a clear, keyword-rich sentence helps customers find you.

Part 2 — Header & Branding

The header is the banner area at the very top of your catalog. It can show your logo, your company name, contact details, and more. You control exactly which pieces appear.

7. Scroll to the Header & Branding section.

8. Find the master toggle labeled “Show header section”. This is on by default. When it’s on, the header appears at the top of your catalog. If you turn it off, the header is completely hidden and your catalog starts directly with the product grid.

9. With the toggle on, you’ll see a grid of checkboxes. Each checkbox controls whether a specific piece of information appears in the header. Check or uncheck each one to match what you want to show:

   Checkbox	What it shows
   Dealer Logo	Your company logo (uploaded in your account settings)
   Catalog Title	The name of this catalog
   Catalog Description	The description you wrote in Part 1
   Company Name	Your business name from your dealer profile
   City & State	Your business location
   Phone Number	Your contact phone number
   Website Link	A clickable link to your main website

10. Check the boxes for the items you want visible. Uncheck anything you’d prefer to hide.

Figure 3 — The Header & Branding section with its checkbox grid.

📸 Screenshot needed — 03-header-branding.png Capture the Header & Branding section with the master toggle ON and the checkbox grid visible. Show a mix of checked and unchecked boxes. Crop out any real dealer data.

🛡️ Don’t worry — Unchecking a box here doesn’t delete any of your information. It just hides it from the catalog header. You can re-check it any time to bring it back.

Part 3 — Search & Sort

These two toggles control whether your customers can search through your products and sort them.

11. Scroll to the Search & Sort section.

12. Find the toggle labeled “Enable search bar”. This is on by default. When it’s on, a search box appears at the top of your catalog so customers can type keywords to find products.

13. Find the toggle labeled “Enable sort dropdown”. This is off by default. When you turn it on, a dropdown menu appears that lets customers sort products (for example, by name or price).

14. Toggle each one on or off based on your preference.

Figure 4 — The Search & Sort toggles.

📸 Screenshot needed — 04-search-sort.png Capture the Search & Sort section showing both toggles. Ideally show the search toggle ON and the sort toggle OFF (the defaults). Crop tightly.

💡 Tip — If you have a small catalog (under 20 products), you might not need the search bar. For larger catalogs, leaving it on makes it much easier for customers to find what they’re looking for.

Part 4 — Layout & Product Display

This is the biggest section. It controls how your products are arranged on the page, what information shows on each product card, and how the catalog looks on phones.

15. Scroll to the Layout & Product Display section.

16. Find the Layout Style dropdown. Click it and choose one of three options:

    Layout Style	What it looks like
    Grid	Products arranged in a uniform grid of equal-sized cards (most common)
    List	Products stacked vertically, one per row, with more detail visible
    Masonry	A Pinterest-style layout where cards have different heights based on their images

17. Find the Grid Columns dropdown. This controls how many product cards appear in each row. Your options are:

    Option	What it means
    Auto Fit Responsive	The system automatically picks the best number of columns based on the screen width (recommended)
    2	Always show 2 products per row
    3	Always show 3 products per row
    4	Always show 4 products per row

18. Find the Card Style dropdown. This controls how much information appears on each product card:

    Card Style	What shows on each card
    Standard	Product image plus the fields you select below
    Minimal (Image + Name)	Just the product image and its name — clean and simple
    Detailed (All Fields)	Everything: image, name, price, description, brand, and more

19. Find the Mobile Columns dropdown. This controls how products appear on phones and small screens:

    Option	What it means
    1 Column (default)	Products stack one per row on mobile — large, easy-to-tap cards
    2 Columns	Products appear two per row on mobile — more compact

20. Find the Image Border dropdown. This adds a subtle frame around product images:

    Option	What it looks like
    None	No border — images blend into the card
    Subtle (default)	A light, barely-visible border that gives images a clean edge
    Bordered	A more prominent border around each image

21. Below the dropdowns, find the Product Fields checkbox grid. Each checkbox controls whether a specific piece of information appears on product cards in the grid view. Check or uncheck each one:

    Checkbox	What it shows on the card
    Price	The product’s price
    Model Number/SKU	The manufacturer’s model number or SKU
    Short Description	A brief product description
    Brand Name	The brand or manufacturer name
    Category	The product’s category
    View Details Link	A clickable “View Details” link to the full product page
    Product Options	Any product options (like colors or sizes)
    Product Attributes	Key product attributes (like dimensions or BTU rating)

22. If you check “Product Attributes”, an additional section called the Attribute Display Manager appears. This lets you pick exactly which attributes show on the card and in what order. Use it to highlight the specs that matter most to your customers.

Figure 5 — The Layout & Product Display section.

📸 Screenshot needed — 05-layout-display.png Capture the full Layout & Product Display section showing the Layout Style, Grid Columns, Card Style, Mobile Columns, and Image Border dropdowns, plus the Product Fields checkbox grid. If possible, show the Attribute Display Manager as well. May need a tall/scrolling capture. Crop out any real account data.

🤔 Not sure which layout to pick? — Grid with Auto Fit Responsive columns is the most popular choice and works well for most dealers. Start there, save, and preview your catalog. You can always come back and change it.

Part 5 — Product Detail Page

When a customer clicks on a product in your catalog, they see a product detail page — a full page with large images, a description, specifications, and more. This setting controls how wide the main content area of that page is.

23. Scroll to the Product Detail Page section.

24. You will see a range slider labeled “Image & Content Column Width”. This controls the maximum width (in pixels) of the images and content on the product detail page.

    • The slider goes from 400px (narrow) to 1400px (very wide).
    • The default is 700px, which works well for most layouts.
    • Drag the slider left to make the content area narrower, or right to make it wider.

25. As you drag, the number next to the slider updates so you can see the exact pixel width.

Figure 6 — The Product Detail Page width slider.

📸 Screenshot needed — 06-product-detail.png Capture the Product Detail Page section showing the range slider with the current value displayed. Show the slider at or near the default 700px. Crop tightly.

💡 Tip — If your product images are very wide or your descriptions are long, try increasing this to 900px or 1000px. If you prefer a more compact look, the default 700px is a great choice.

Part 6 — Filtering System

Filters are the controls your customers use to narrow down the product list — for example, by brand, category, price range, or specific attributes like BTU rating or fuel type. This section lets you turn filters on or off, choose where they appear, and control exactly which filters are available.

26. Scroll to the Filtering System section.

27. Find the master toggle labeled “Enable filter sidebar”. This is on by default. When it’s on, your customers see filter controls alongside your product grid. When it’s off, filters are completely hidden.

28. Find the Filter Layout dropdown. This controls where the filter controls appear:

    Option	What it looks like
    Sidebar (left)	Filters appear in a column on the left side of the product grid
    Top Bar (above products)	Filters appear as a horizontal bar above the product grid

29. Below the layout dropdown, you’ll find the Filter Manager — this is a list of all available filters for your catalog. Each row in the list represents one filter (like “Brand” or “Category” or a specific product attribute). You can:

    • Drag and drop rows to reorder filters — grab the handle on the left and drag up or down.

    • Rename a filter — click its label text and type a new name (for example, rename “BTU Input” to “Heating Power”).

    • Toggle a filter on or off — use the switch on each row to show or hide that filter.

    • Collapse by default — set whether a filter starts collapsed (just the heading visible) or expanded (options visible).

    • Choose render mode — pick how the filter options are displayed to your customers:

      Render Mode	What it looks like
      Checkboxes	A list of options with checkboxes (most common)
      Range	A slider for numeric values (like price or BTU)
      Pills	Small rounded buttons that customers click to toggle
      Dropdown	A dropdown menu
      Radio	Radio buttons — only one option can be selected at a time

30. Find the Mobile Filter Panel Default setting. This controls whether the filter panel starts open or closed when a customer visits your catalog on a phone:

    Option	What it means
    Open	Filters are visible right away on mobile
    Closed	Filters are hidden behind a “Filters” button on mobile (recommended for small screens)

Figure 7 — The Filtering System section with the Filter Manager.

📸 Screenshot needed — 07-filtering-system.png Capture the Filtering System section showing the master toggle ON, the Filter Layout dropdown, and the Filter Manager list with several filter rows visible (showing drag handles, toggles, and render mode dropdowns). Also show the Mobile Filter Panel Default setting. May need a tall/scrolling capture. Crop out any real account data.

🤔 Not sure which render mode to use? — Checkboxes work best for most filters. Use Range for numeric values like price. Use Pills if you want a more compact, modern look.

Part 7 — Product Badges

Badges are small colored labels that appear on product cards — like “New”, “Sale”, “Clearance”, or “Best Seller”. They help draw your customers’ attention to specific products. This section controls the overall badge appearance. You assign badges to individual products in the Products tab (not here).

31. Scroll to the Product Badges section.

32. Find the master toggle labeled “Enable product badges”. This is on by default. Turn it off to hide all badges across your catalog.

33. Find the Badge Position dropdown. This controls where the badge appears on each product card:

    Option	Where the badge appears
    Top Left (default)	Upper-left corner of the product image
    Top Right	Upper-right corner of the product image
    Bottom Left	Lower-left corner of the product image
    Bottom Right	Lower-right corner of the product image

34. Find the Badge Style dropdown. This controls the shape of the badge:

    Option	What it looks like
    Pill (default)	A small rounded rectangle
    Ribbon	A ribbon-style banner that wraps around the corner
    Flag	A flag-shaped label

35. Find the Default Badge Color color picker. Click it to choose the background color of your badges. The default is a bright red (#ef4444). Pick a color that stands out against your product images.

36. Find the Badge Text Color color picker. Click it to choose the text color inside your badges. The default is white (#ffffff). Make sure there is good contrast with your badge background color so the text is easy to read.

Figure 8 — The Product Badges section.

📸 Screenshot needed — 08-product-badges.png Capture the Product Badges section showing the master toggle ON, the Badge Position and Badge Style dropdowns, and both color pickers. If a color picker is open, even better. Crop tightly.

💡 Tip — To actually assign a badge to a product (like labeling it “New” or “Sale”), go to the Products tab in this same Catalog Editor. Badges are set per-product, not here. This section only controls how all badges look.

Part 8 — Related Products

Related products are suggestions that appear at the bottom of each product detail page — a “You May Also Like” section. This helps customers discover more of your products. This feature is off by default.

37. Scroll to the Related Products section.

38. Find the master toggle labeled “Enable related products”. This is off by default. Turn it on to show related product suggestions on every product detail page.

39. Once you turn the toggle on, several additional settings appear:

40. Find the Section Title text input. This is the heading your customers see above the related products. The default is “You May Also Like”. You can change it to anything you’d like — for example, “More Products” or “You Might Also Be Interested In”.

41. Find the Max Products to Show range slider. Drag it to choose how many related products appear. The range is 2 to 8, and the default is 4.

42. Find the Matching Strategy dropdown. This controls how the system picks which products to suggest:

    Strategy	How it works
    Smart Match (recommended)	Uses a combination of attributes, category, and brand to find the most relevant suggestions
    Shared Attributes	Suggests products that share similar specifications
    Same Category	Suggests products from the same category
    Same Brand	Suggests products from the same brand
    Category + Brand	Suggests products that match both the category and the brand

43. Find the Columns range slider. This controls how many related product cards appear per row. The range is 2 to 6, and the default is 4.

44. Find the Show Price toggle. Turn it on to display prices on the related product cards, or leave it off to hide prices there.

Figure 9 — The Related Products section.

📸 Screenshot needed — 09-related-products.png Capture the Related Products section with the master toggle ON so all sub-settings are visible. Show the Section Title input, Max Products slider, Matching Strategy dropdown, Columns slider, and Show Price toggle. Crop out any real account data.

💡 Tip — Smart Match is the best choice for most dealers because it automatically picks the most relevant related products. Try it first, and only switch to a manual strategy if you want more control.

Part 9 — Footer

The footer is a small line at the very bottom of your catalog.

45. Scroll to the Footer section.

46. Find the toggle labeled “Show ‘Powered by ProductSync.io’ footer”. This is on by default. It displays a small “Powered by ProductSync.io” credit line at the bottom of your catalog. You can turn it off if you prefer a cleaner look.

Figure 10 — The Footer section toggle.

📸 Screenshot needed — 10-footer-section.png Capture the Footer section showing the toggle. Crop tightly to just this section.

Saving Your Changes

⚠️ Important — None of your changes take effect until you click Save. Always save before leaving the page.

47. Scroll back to the top of the Customize tab. Click the “Save” button at the top of the editor.

48. You will see a confirmation message letting you know your changes have been saved. Your catalog will now display the new settings — both on your embedded widget and your Direct Link.

Figure 11 — The Save button at the top of the Catalog Editor.

📸 Screenshot needed — 11-save-button.png Capture the top of the Catalog Editor showing the Save button prominently. If possible, also show the tab bar (Products, Customize, etc.) for context. Crop out any real account data.

🛡️ Don’t worry — Changes apply to both your embedded widget (on your website) and your Direct Link page at the same time. You don’t need to save twice or do anything extra. Both update together automatically.

⚠️ Important — Danger Zone — At the very bottom of the Catalog Editor, below all the customization sections, there is a red “Danger Zone” area with a “Delete Catalog” button. Do not click this unless you truly want to permanently delete this entire catalog. Deleting a catalog removes it from your website and your Direct Link. This action cannot be undone. If you’re unsure, contact your account manager first.

Platform-specific tips

Not applicable for this procedure — the Customize tab works the same way regardless of which website platform you use (WordPress, Squarespace, Wix, Shopify, or custom). All changes are made inside the Dealer Portal and apply automatically to your embedded catalog and Direct Link.

If something doesn’t look right

🤔 I changed a setting but my catalog looks the same. Make sure you clicked the Save button at the top of the editor. Changes don’t take effect until you save. After saving, refresh your website page or Direct Link page to see the update.

🤔 The filters I turned on aren’t showing up. Filters only appear if there are products in your catalog that actually have values for that filter. For example, a “Brand” filter won’t appear if none of your products have a brand assigned. Check your product data in the Products tab.

🤔 My badges aren’t showing on any products. The badges section in the Customize tab only controls how badges look (color, position, style). To actually assign a badge to a product, go to the Products tab in the Catalog Editor and set the badge text on individual products.

🤔 Related products aren’t appearing on my product detail pages. Make sure the “Enable related products” toggle is turned on and you’ve clicked Save. Also, you need at least a few products in your catalog for the system to find related matches.

🤔 The layout looks different on my phone than on my computer. That’s by design. The catalog automatically adjusts for smaller screens. You can control the mobile experience with the Mobile Columns dropdown (Part 4) and the Mobile Filter Panel Default setting (Part 6).

🤔 I want to undo all my changes and go back to the defaults. There isn’t a single “reset” button, but you can manually set each option back to its default value. The defaults are noted throughout this guide. If you’re not sure what the defaults were, contact your account manager for help.

You’re done when

✅ You’re done when — You’ve configured each section to match your preferences, clicked Save, and previewed your catalog (either on your website or via your Direct Link) to confirm everything looks right. Your customers are now seeing the layout, header, filters, badges, and related products you chose.

Completion checklist

• Opened the Catalog Editor and selected the Customize tab
• Set your catalog description (Part 1)
• Configured your header and branding checkboxes (Part 2)
• Set your search and sort preferences (Part 3)
• Chose your layout style, columns, card style, and product fields (Part 4)
• Adjusted the product detail page width if needed (Part 5)
• Configured your filter sidebar, layout, and Filter Manager (Part 6)
• Set your badge style, position, and colors (Part 7)
• Configured related products if desired (Part 8)
• Set your footer preference (Part 9)
• Clicked Save at the top of the editor
• Previewed your catalog on your website or Direct Link to confirm the changes

Need a hand?

You don’t have to figure this out alone. If anything looks off, or if you’d like help choosing the best settings for your catalog, reach out to your account manager or email our support team. We’re happy to walk you through it or make adjustments on your behalf.