Advanced Manufacturer Grid with SEO URLs

Follow this step-by-step guide to set up and configure your manufacturer pages and grid   display.

Step 1: Installation

1. Install the plugin
2. Activate the plugin
3. Clear cache if necessary

Important: The plugin automatically uses existing manufacturers from your   store along with their configured logo images. No manual data import is needed.

Step 2: Configure SEO URLs for Manufacturers (Optional but Recommended)

By default, manufacturer pages use generic URLs like /manufacturer/abc123def456.   You can create SEO-friendly URLs instead.

Navigate to SEO URL Management:

Catalogues → Manufacturer SEO URLs

Generate SEO URLs:

• Generate for All: Creates SEO slugs for all manufacturers based on their   names
• Generate for Missing: Creates slugs only for manufacturers without SEO   URLs
• Manual Editing: Click edit icon next to any manufacturer to set custom   slug
• Bulk Operations: Select multiple manufacturers and   generate/regenerate/delete URLs

Example: Manufacturer "Apple Inc." → slug: apple-inc → URL:   /manufacturer/apple-inc

Note: The dashboard shows statistics: total manufacturers, how many have   SEO URLs, and how many don't.

Step 3: Add Manufacturer Grid to Your Pages

Creating the Grid Element:

1. Go to Content → Shopping Experiences (or any CMS page editor)
2. In the sidebar, find section "Text & Images"
3. Look for element called "Brand Grid Block"
4. Drag it onto your page layout

Step 4: Configure Grid Settings

Click on the Brand Grid Block element to open configuration panel:

Grid Layout Settings:

• Grid Columns: Choose 2, 3, 4, 5, or 6 columns
• Show sorting buttons: Enable A-Z/Z-A sorting for customers
• Show search bar: Add search functionality for finding brands
• Show brand name: Display manufacturer name below logo
• Rounded corners: Enable rounded box corners

Image Display Settings (Global):

• Image Object Fit: Choose contain, cover, fill, or scale-down
• Image Padding Horizontal: Space left/right around images (in pixels)
• Image Padding Vertical: Space top/bottom around images (in pixels)

These settings apply to all brands unless overridden individually.

Color Settings:

• Item Colors: Background, border, border hover, brand name color
• Image Colors: Image background and border
• Sort Button Colors: Background, border, text (normal/hover/active   states)
• Search Bar Colors: Background, border, text
• Empty State Colors: For when no brands match search

Step 5: Select and Order Manufacturers

Brand Selection Section:

• Available Brands: All manufacturers from your store are listed
• Select All: Add all manufacturers to grid
• Select All with Logo: Add only manufacturers that have logo images
• Search Brands: Filter available brands by name
• Individual Selection: Click on any brand to add it to selected list

Ordering Selected Brands:

• Drag & Drop: Click and drag brands to reorder them
• Sort Alphabetically: Use button to auto-sort A-Z
• Remove: Click X to remove brand from grid

Step 6: Per-Brand Customization (Optional)

Click "Edit Brand" icon on any selected manufacturer to customize:

Link Configuration:

• Default: Links to manufacturer's product listing page (uses SEO URL if   configured)
• Custom Link: Override with any URL, optionally open in new tab

Image Settings Override:

• Enable to set custom object-fit and padding for this specific brand
• Useful when one logo needs different display settings

Custom Content:

• Custom HTML: Add any HTML content to this brand's tile
• CTA Button: Add call-to-action button with custom text, colors, and   link

Step 7: Save and Publish

1. Save your CMS page configuration
2. Publish the page
3. View on frontend to see your manufacturer grid in action

How Links Work

• Without SEO URLs: Clicking brand goes to   /manufacturer/abc123def
• With SEO URLs: Clicking brand goes to   /manufacturer/brand-name
• Custom Links: Goes to whatever URL you configured per brand

All manufacturer pages automatically display complete product listings for that   manufacturer.

Tips & Best Practices

• Configure SEO URLs first before adding grid to pages
• Use "Select All with Logo" to avoid showing brands without images
• Test different column counts on mobile and desktop
• Use per-brand image settings only when necessary for consistency
• Enable search bar for stores with many manufacturers (30+)