Overview
This guide covers the new configuration options available for Brand and Category slices in Prismic CMS. These enhancements give you greater control over the layout, appearance, and behavior of your brand and category displays across your website.
Brands Slice Configurations
Default Variation
The Default Variation now includes the following configuration options:
Content Align
Purpose: Controls the alignment of content within each brand item
Options: Left, Center, Right
How to use: Select your preferred alignment from the dropdown menu
Items Per View
Purpose: Determines how many brand items display simultaneously in the slider
Input: Numeric value (e.g., 4)
Recommendation: Consider your design and typical screen sizes when selecting this value
Round Image
Purpose: Enables circular/rounded display for brand images
Options: True or False (toggle)
When True: Images appear with rounded corners or as circles
When False: Images display with standard square corners
Autoplay
Purpose: Controls whether the slider automatically advances through items
Options: True or False (toggle)
When True: Slider automatically cycles through brands
When False: Users must manually navigate the slider
Grid Variation
The Grid Variation now includes the following configuration options:
Columns Per Row (Desktop Column Count)
Purpose: Sets how many brand items appear horizontally on desktop screens
Input: Numeric value
Round Image
Purpose: Enables circular/rounded display for brand images
Options: True or False (toggle)
When True: Images appear with rounded corners or as circles
When False: Images display with standard square corners
Content Align
Purpose: Controls the alignment of content within each brand item
Options: Left, Center, Right
How to use: Select your preferred alignment from the dropdown menu
Items Max Width
Purpose: Sets the maximum width for each brand item on desktop
Input: Numeric value (typically in pixels)
Use case: Prevents items from becoming too large on wide screens
Items Max Width Mobile
Purpose: Sets the maximum width for each brand item on mobile devices
Input: Numeric value (typically in pixels)
Use case: Optimizes display for smaller screens
Categories Slice Configurations
Default Variation
The Default Variation now includes the following configuration options:
Items Per View
Purpose: Determines how many category items display simultaneously in the slider
Input: Numeric value (e.g., 4)
Recommendation: Consider your design and typical screen sizes when selecting this value
Content Align
Purpose: Controls the alignment of content within each category item
Options: Left, Center, Right
How to use: Select your preferred alignment from the dropdown menu
Round Image
Purpose: Enables circular/rounded display for category images
Options: True or False (toggle)
When True: Images appear with rounded corners or as circles
When False: Images display with standard square corners
Autoplay
Purpose: Controls whether the slider automatically advances through items
Options: True or False (toggle)
When True: Slider automatically cycles through categories
When False: Users must manually navigate the slider
Grid Variation
The Grid Variation now includes the following configuration options:
Columns Per Row
Purpose: Sets how many brand items appear horizontally on desktop screens
Input: Numeric value
Items Max Width
Purpose: Sets the maximum width for each brand item on desktop
Input: Numeric value (typically in pixels)
Use case: Prevents items from becoming too large on wide screens
Items Max Width Mobile
Purpose: Sets the maximum width for each brand item on mobile devices
Input: Numeric value (typically in pixels)
Use case: Optimizes display for smaller screens
Round Image
Purpose: Enables circular/rounded display for category images
Options: True or False (toggle)
When True: Images appear with rounded corners or as circles
When False: Images display with standard square corners
Content Align
Purpose: Controls the alignment of content within each category item
Options: Left, Center, Right
How to use: Select your preferred alignment from the dropdown menu
How to Configure Your Slices
Step 1: Access Your Page in Prismic
Log into your Prismic repository
Navigate to the page where you want to add or edit the slice
Locate the Slice Zone where your Brand or Category slice is (or will be) placed
Step 2: Add or Select the Slice
If adding a new slice, click "Add a slice" in the Slice Zone
Select either "Brands" or "Categories" from the available slices
Choose the variation you want: Default or Grid
Step 3: Configure Your Settings
Locate the configuration options
Adjust each setting according to your needs:
Use toggles for True/False options (Round Image, Autoplay)
Enter numeric values for Items Per View, Columns Per Row, and Max Width settings
Select from dropdowns for Content Align options
Step 4: Preview and Save
Use the preview function to see how your configurations look
Test on both desktop and mobile views
Click "Save" when satisfied with your settings
Configuration Tips and Best Practices
For Optimal Performance
Keep Items Per View between 3-6 for best user experience
Use Autoplay sparingly to avoid overwhelming users
Test mobile configurations on actual devices
For Visual Consistency
Use Round Image consistently across related slices
Align Content Align settings with your overall site design
Consider your brand guidelines when setting max widths
For Accessibility
Ensure sufficient contrast if using rounded images with backgrounds
Test slider navigation with keyboard controls when Autoplay is disabled
Verify that content remains readable at all configured widths
Frequently Asked Questions
Can I use these slices on multiple pages?
Yes, these slices can be added to any page within your Prismic repository.
What happens if I don't set a Max Width value?
If no max width is set, items will expand to fill available space according to your column/items per view settings.