Collection Page

1. How to Access Collection Page Settings

• Log in to your Shopify Admin.
• Go to Online Store >> Themes.
• Click Customize on your active theme.
• From the top dropdown, select Collections >> Default Collection.
• Select the Collection section from the sidebar.

2. Collection Page Overview

The Collection Page displays all products that belong to a specific collection. It includes a collection banner, filtering options, sorting controls, and a responsive product grid layout.

3. Collection Banner Settings

The Collection Banner appears at the top of the collection page and highlights the collection with a title, description, and optional banner image.

• Heading Size: Controls the size of the collection title.
• Heading Display: Choose whether the title appears in default or uppercase style.
• Show Description: Displays the collection description below the heading.
• Content Alignment: Adjust alignment of the title and description (Left, Center, End).
• Enable Header Image: Displays a banner image at the top of the collection page.
• Custom Header Image: Upload a custom banner image. If not selected, the collection image will be used.
• Image Overlay Opacity: Adjust the overlay opacity on the banner image.

4. Product Grid Settings

The Product Grid section controls how products appear within the collection page layout.

• Number of Products per Page: Controls how many products appear on a single page.
• Number of Columns per Row: Defines how many product cards appear per row on desktop devices.
• Mobile Columns: Choose how many products appear per row on mobile devices.

5. Filters and Sorting

Filters and sorting help customers quickly find products within a collection. Filters are configured using Shopify's Search & Discovery App.

• Filter Layout:
  • Vertical ' Filters appear in a sidebar.
  • Drawer ' Filters appear inside a slide-out panel.
• Enable Sorting: Allows customers to sort products by price, popularity, and other options.

6. Pagination Settings

Pagination settings control how additional products are loaded when customers browse through the collection.

• Default Pagination: Products are displayed across multiple pages.
• Infinite Scroll: Products automatically load when users scroll down.

7. Product Card Settings

Product card settings allow you to control how products appear within the collection grid.

• Product Card Style: Choose between available product card layouts.
• Image Aspect Ratio: Define the shape of product images (Portrait, Square, etc.).
• Show Vendor: Display the brand or vendor name.
• Show Product Options: Show product variants such as color or size.
• Enable Quick View: Allow customers to preview product details in a popup.
• Show Variant Image Instead of Color: Display variant image when selecting options.

8. Collection Page Available Blocks

The Collection page in the Emoll-Apario theme allows you to highlight promotions within the product grid using promotional blocks. These blocks help showcase special offers, featured collections, or promotional messages to attract customer attention. The theme includes two promotional block types: Promo Banner and Promo Tiles.

Promo Banner Block

The Promo Banner block allows you to display a wide promotional banner inside the collection product grid. This is useful for highlighting offers, seasonal campaigns, or featured collections.

Available Settings

• Banner Position
  Controls the placement of the banner within the product grid. The number represents the position where the banner will appear between products.
• Banner Image
  Upload the promotional image that will appear in the collection grid. It is recommended to use a high-quality horizontal banner image for best display.
• Banner Link
  Allows you to link the banner to a specific page, collection, or product. Customers will be redirected when they click the banner.

Promo Tiles Block

The Promo Tiles block displays a large promotional tile within the product grid. It helps highlight featured products, categories, or special promotions while maintaining a visually balanced layout.

Available Settings

• Promo Position
  Defines the position of the promo tile inside the product grid. The tile will appear at the selected product position.
• Promo Width
  Controls the width of the promotional tile. You can choose between layout options such as one column or two columns depending on how much space the tile should occupy in the grid.
• Promo Image
  Upload the image that will appear in the promotional tile. Using a high-resolution lifestyle or promotional image is recommended.

9. Best Practices

• Use high-quality product images for better visual presentation.
• Maintain consistent image ratios across all products.
• Enable filters to help customers quickly find products.
• Use clear and descriptive collection titles and descriptions.
• Limit the number of products per page to maintain fast loading speed.