Maximize - Collection page
Maximize - Collection page
Maximize - Collection page
1. What is Product grid? The Product grid section is used to display products on the collection page in an organized and visually appealing layout. It allows you to control how many products appear per row or per page, customize filtering and sorting options, and enhance the browsing experience with advanced filter and promotion blocks. ⚠️ Note: This section can only be used on the Collection page. 2. Section Components Section Suggest collections related to the current collection page. Available block Used to add a promotion (that has image and text inside) to the section. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize". Click on the Homepage dropdown menu > Collection > Default collection. Click "Add Section". Search for "Related collections". Click on it to add. 4. Core Features Flexible layout control: Adjust how many products appear per row or per page for desktop and mobile. Built-in filtering and sorting: Allow customers to refine products by attributes, availability, or custom metafields. Advanced filter system: Display filter values as image grids to make product discovery more visual. Promotion block integration: Highlight special deals or key messages inside your collection grid. 5. Common Use Cases 🤔 How to display and customize the Product Grid? Goal: Control how products appear on your Collection page - grid or list layout, number per row, and pagination style. STEP 1: Add the sectionGo to Theme Editor → Collection page → Add section → choose Product grid. STEP 2: Set up layout and pagination Click on the Product grid section to open its settings panel and: Products per page: Choose how many items are displayed per page (6–50). Products per row on desktop: Adjust horizontal density (2–6). Products per row on mobile: Choose between 1 or 2 products per row. Pagination style: Pick Infinite scroll, Click to load, or Number pagination depending on your store’s navigation flow. STEP 3: Click "Save" when done. 🤔 How to control product card details? Goal: Decide what information appears on each product card. STEP 1: In the Collection page > go to the Product grid section > Product card setting group. STEP 2: Toggle on the information you want to show: Toggle Show vendor to display the brand or supplier. Enable Show rating to display average product reviews (requires a rating app). Turn on Show quickview for instant product previews without leaving the page. Activate Show description on list view to display product details in list layout mode. STEP 3: Click "Save" when done. 🤔 How to enhance browsing with Filtering & Sorting within the Collection page? Help customers find products faster by adjusting the filter and sorting settings for your Product grid: STEP 1: In the Collection page > go to the Product grid section > Filtering and Sorting setting group. STEP 2: Enable filtering: Turn on to allow customers to filter products. Enable sticky filters: Keep filters visible while scrolling (desktop). Desktop filter layout: Choose between Above, Aside or Drawer layout.(⚠️ Note: Drawer is the default mobile layout.) Collapse filter: Set filters to be hidden by default in Aside/Above layouts. Click “Filters” above the grid to view them. Expand all filters by default: Show all filters expanded (Drawer/Aside only). Enable collection count: Show product counts next to filter options. Enable sorting: Allow customers to sort products (Featured, Best selling, etc.). STEP 3:Click "Save" when done. 🤔 How to use the Advanced Filter (Visual filters)? 🔍 Information: Advanced filter is a distinctive feature in the Maximize Theme, designed to enhance the product discovery experience by displaying filter values as an image grid. These filters allow you to showcase up to three filter values as images, making it easier for customers to visually understand and select product attributes. These filters work independently, just like standard filters, but are presented in a more visually engaging format. STEP 1: Set up filters in Shopify Use the Search & Discovery app to create filters from product options or metafields.You can use metafields for visual options like colors, patterns, or materials. ⚠️ Filter app requirement: The Maximize theme does not natively support filter display; you will need a filtering app like Shopify's Search & Discovery to enable and manage filters. STEP 2: Create the Filter Option Depending on how you want to filter products, you can create filters using either product options or metafields. Using Product Options Using Metaobject/Metafield: If you prefer to use metafields for filtering, follow these steps: Create a Metaobject: Ensure it includes a field for the filter option name and a field for color/image input in a one-value format Create Entries: Input relevant data into the metaobject Create a Metafield: Set the type as "Metaobject reference", choose the metaobject that was created previously. Ensure that the metafield is set to accept only one value. Assign Metafield to Products: Go to each product and assign the metafield to the corresponding entries. STEP 3: Create the Filter in the App Once your product options or metafields are set up: Navigate to the Search & Discovery app in Shopify. Follow the Shopify Filter Setup Guide to create filters. Also, refer to the Storefront Filters Customization Guide to fine-tune the filters. STEP 4: Storefront set up Click on the Product grid section to open its settings panel and: Enable advanced filters to show up to 3 filters in grid layout, with optional image display. Fill the Advanced filter labels with Filter label set up above. Turn on Hide unavailable filter values if you want to automatically remove out-of-stock or unavailable options from your filter lists. Toggle on Enable carousel on desktop. Carousel is enabled on mobile by default. Choose Image Style as Round or Square. STEP 5: Click "Save" when done. 🤔 How to add Promotion blocks to Product Grid? The promotion block allows you to highlight special offers, flash sales, or important announcements within the related collections section. You can customize the icon, heading, text, and background to match your store’s aesthetic. Here's how: STEP 1: Under the Product Grid section, add the Promotion block. STEP 2: Add your text and visuals: Add Subheading, Heading, and Content. Upload a Background image and adjust Overlay opacity (0–100%). Set Button label, Button link, and Button style. Align content (Left / Center / Right) and position it (Top / Center / Bottom). STEP 3: Adjust layout on both views: On desktop 🖥️: Set Column width in grid view, Row height in grid view(1 to 3), Column width in list view (1 or 2), and Row height in list view (1 or 2). On mobile 📱: Number of columns wide (1 or 2) and Number of rows tall (1 or 2). STEP 4: Click "Save" when done. Need help? Contact our support team at Omni Themes Support.
Maximize - Collection page
1. What are Related Collections? Related collections are curated groupings of products displayed on a collection page to guide users to similar or complementary items, thereby enhancing navigation and improving the customer's shopping experience by offering intuitive, logical pathways to explore more products. ⚠️ Note: This section can only be used on the Collection page. 2. Section Components Section Suggest collections related to the current collection page. Available block Used to add a promotion (that has image and text inside) to the section. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize". Click on the Homepage dropdown menu > Collection > Default collection. Click "Add Section". Search for "Related collections". Click on it to add. 4. Core Features Improved Navigation: Link related products for easier browsing. Enhanced User Experience: Help customers discover products quickly. Increased Sales: Suggest complementary items for upselling. Brand Storytelling: Guide users through a cohesive shopping experience. 5. Common Use Cases 🤔 How to add related collections manually for each collection page? If you want to manage related collections for a specific collection or the entire collection of your store, set up metafields following the instructions below: STEP 1: Add the section In the collection page, add a Related collections section. STEP 2: Create a Collection Metafield Go to "Shopify Admin" > "Settings" > "Metafields and metaobjects". From the "Metafield definitions" table, select "Collections". Click on the "Add definition" button. Set Key: related_collections. Choose Type: Collection (List of collections). Save the metafield definition. STEP 3: Assign Collections to the Metafield Go to Collections > select the collection where you want to show related collections. In the collection editor, find the metafield related_collections. Select the collections you want to display in the Related Collections section. Save your changes. STEP 4: Customize the section look Once the section is added, you can adjust its appearance to match your store style: Heading: Add a title for the section (default: Related collections). Collection Card Settings: Image style: Choose between Natural, Square (1:1), Rectangle (2:3), Landscape (4:3), Standard (3:4), Round. Enable text overlay: Toggle ON/OFF to place text over the image. Overlay opacity: Adjust transparency of text background (0%–100%). Show item count: Toggle ON/OFF to display the number of products in each collection. STEP 5: Click "Save" when done. 🤔 How to enable Carousel for Related Collections? Want to showcase Related Collections in a dynamic carousel? Follow these steps: STEP 1: Open the settings panel Click on the Related Collections section to expand its settings. STEP 2: Scroll down to the Carousel setting group, and: 🖥️ For desktop: Turn on the Enable carousel on desktop setting. 📱 For mobile: Turn on the Enable swipe on mobile to allow users to swipe through posts. STEP 3: Click "Save" when done. 🤔 How to add Promotion blocks to Related collections? The promotion block allows you to highlight special offers, flash sales, or important announcements within the related collections section. You can customize the icon, heading, text, and background to match your store's aesthetic. Here's how: STEP 1: Add Promotion block Under the Related Collections section, add the Promotion block block. STEP 2: Set up Icon setting group: Rearrange Promotion Block position (1 to 13, 1 indicates the first position). Choose the Icon from the drop-down list, or choose None if you don't want any (default: Authentic). Select or upload Custom icon image, or enter an SVG code if you want to use a different icon from the list. This action will disable your picked Icon above. Adjust Icon size. Add a Heading and Content to the section. STEP 3: Customize the whole block look After setting up each Icon group, you can: Adjust the Icon size. Adjust the Heading size, Text size, Alignment, and Content position. Add Background image, Mobile image, or Video. Remember to adjust Image overlay opacity for better contrast and readability. STEP 4: Click "Save" when done. 🤔 What customization options can you give your Related Collections? For the whole Related Collections section ✨ Change color scheme Click on the Related Collections section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. ✨ Add highlight effect to the heading When entering the Heading for the Related Collections section, wrap the text you want to highlight between [] brackets. Choose the Marker style to be Underline, Marker, Text color change or Shadow. ✨ Change the heading size Click on the Related Collections section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes) Click on the Related Collections section, find and choose the Heading tag from the list. ✨ Change the heading alignment Click on the Related Collections section, find and choose the Heading alignment to be Left, Right, or Center. ✨ Change layout based on device Click on the Related Collections section, and scroll down to Desktop layout & Mobile Layout: On desktop 🖥️: Adjust Number of columns to choose how many collections appear in a single row. Adjust Block spacing to choose the gap between collection cards (measured in pixels). On mobile 📱: Choose Number of columns to adjust how many collections appear in a single row. Adjust Block spacing to choose the gap between collection cards (measured in pixels). ✨ Change the section width, add padding, or add a divider Click on the Related Collections section, and scroll down to the Section layout group, and you will be able to change those settings. For a single Promotion block block ✨ Show video from url Scroll to Or embed video from url, and paste the link into the URL field (only supports Youtube and Vimeo). If you want the carousel to slide automatically, turn on Enable video autoplay. ✨ Change color scheme Click on the Promotion block block, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. ✨ Change the button style Click on a block, then in the Button style setting, select to make it follow Primary or Secondary style. Need help? Contact our support team at Omni Themes Support.
Maximize - Collection page
1. What is Collection Description? The Collection Description section displays detailed information (set up in Shopify admin) about a collection on the collection page. It is a simple but effective tool to describe what makes a collection fascinating. ⚠️ Note: This section can only be used on the Collection page. 2. Location & Setup Go to "Online Store" > "Themes" > "Customize". Click on the Homepage dropdown menu > Collection > Default collection. Click "Add section". Search for "Collection description". Click on it to add the section. 3. Section Components Section A container to show the detailed description of a collection. 4. Core Features Dynamically updated: The description automatically changes depending on the selected collection. Flexible layout: Adjust padding, alignment, and text size for better design consistency. "Read More" toggle: Manage long descriptions with collapsible content for cleaner layout. 5. Common Use Cases 🤔 How to set up the Collection Description? Don’t know where to start with your Collection Description section? Just follow this simple guide: STEP 1: Add the section In Theme Editor, click the dropdown menu > Collection > Collection page. Then, add the Collection description section. STEP 2: Adjust content & layout Enter a Heading. Choose the Default content height. Set the Text size that fits your theme design. STEP 3: Click “Save” when done. Need help? Contact our support team at Omni Themes Support.
Maximize - Collection page
1. What is Collection banner section? A Collection banner shows the featured image of the collection when customers visit the collection page. It helps showcase key content, including featured images and breadcrumbs, while improving aesthetics and boosting user engagement. ⚠️ Note: This section can ONLY be used in the collection pages. 2. Section Components Section Showcase key content, including featured images, title, description, and breadcrumbs for the collection. Available block Display navigational links that show the path back to previous pages. Add a brief description or details about the collection. 3. Location & Setup Go to "Online Store" > "Themes" > "Customize". Click on the Homepage dropdown menu > Collection > Default collection. Click "Add Section". Search for "Collection banner". Click on it to add. 4. Core Features Flexibility in design, allowing you to adjust the banner's appearance to align with your store's branding and style. Easy to navigate with breadcrumbs, enhancing user experience. 5. Common Use Cases 🤔 How to show a banner on a collection page? Want to show a collection banner on a collection page but don't know how to start? Here's how: STEP 1: Add the section In the collection page, add a Collection banner section. STEP 2: Customize the section Show collection image: Display the collection image on the banner. Show collection title: Add a specific title to the collection banner. Image height: In the Desktop layout and Mobile layout setting group, choose the preferred image height display. STEP 3: (Optional) Add a custom image as the banner In case you don't want to use the default collection image as the banner, upload your custom one by: Scroll down to Desktop layout/Mobile layout setting group. At Image setting, upload your preferred image. STEP 4: Click "Save". 🤔 How to show breadcrumbs under this collection banner? Want to show breadcrumbs under the collection banner? Here's how: STEP 1: Add the block Under Collection banner section, add Breadcrumbs block. STEP 2: Click "Save". 🤔 How to show a description under the collection banner? Want to add relevant details or promotional content about the collection? Here's how: STEP 1: Under the Collection banner section, add a Description block. STEP 2: Customize the block with these: Choose the desired Default content height. Selecting a height other than Full will display a "Read more" button. Label the "Read more"/"See less" button. Adjust the Desktop content alignment 🖥️ and Mobile content alignment 📱. STEP 3: Click "Save". 🤔 What customization options can you give your Collection banner? Option How to set it up? ✨ Change color scheme Click on the Collection banner section, and choose the overall scheme you want to use in both light and dark mode in the Color scheme. ✨ Change the Image overlay opacity Click on the Collection banner section, and choose the Image overlay opacity from 0-100%. ✨ Change the Collection title size Click on the Collection banner section, and choose the Heading size to be Small, Medium, or Large. ✨ Change the Heading tag (for SEO purposes) Click on the Collection banner section, find and choose the Heading tag from the list. ✨ Change the Desktop/Mobile layout Click on the Collection banner section, scroll down to the Desktop layout 🖥️ and Mobile layout 📱, you can customize Collection title position, upload Image and adjust Image height. ✨ Change the height of images Click on the Collection banner section, scroll down to Mobile layout 📱 and Desktop layout 🖥️, and choose your preferred Image height. ✨ Change the section width or add padding Click on the Collection banner section, and scroll down to the Section layout group, select one of 4 options in the Section width dropdown and adjust Top padding/Bottom padding from 1-100px to distance the section from the above/below section as you desire. Need help? Contact our support team at Omni Themes Support.
