A Collection page displays all of the products in a given collection. You can add and configure your collections in your Shopify admin.
Use the theme editor to enable the bottom menu bar, adjust product grid settings, set the aspect ratio for image containers, add promotion blocks for the collection page.
Access theme editor settings for collection pages
Navigate to Handy's theme editor settings by clicking Customize. Open any collection in the right-side preview or select Collection pages from the template selector. In the left-side settings, open the Collection pages section.
Enable the bottom menu bar
Handy uses a floating menu bar to provide customers with collection page controls, such as Sort by (e.g. Alphabetical A-Z, Price, etc.) and Refine by (product tags). This bottom bar also provides breadcrumb links for easy navigation. This setting is enabled by default.
Disable bottom bar
Deselect Enable bottom menu in order to move these tools to the collection page. They will sit at the top of the collection page's product grid.
Adjust product grid settings
Pagination
Use the Pagination method dropdown to control how the collection pages are displayed and accessed.
Traditional pagination contains a certain amount of products per page and provides numbered links at the base of the page to access each page.
Click to load more provides a button when the page's products reach their limit. When the customer clicks this button, more items will be loaded on the same page.
Infinite scroll is an automatic feature that loads more products when the customer scrolls past those that have already loaded.
Layout options
Set the Products per page and Products per row using the labeled sliders.
Set the aspect ratio for image containers
Product aspect ratio refers to the proportions between a product image's width and height. With Handy, select from Cropped or Uncropped options for product images.
Using an uncropped setting will generate white space around the image to create a uniform grid without cropping your image. The background in the editor indicates the applied white space, but will not appear on your storefront.
Display the second image on cursor hover
To reveal a second product image with hover interaction, enable Show secondary image on hover.
Enable product quickshop
Select Enable product quickshop for customers to add products to their cart using a modal popup rather than being directed to the page for that product.
Disable AJAX on collection page
The quickshop feature uses AJAX to allow customers to interact with the products without leaving the collection page, but some added apps require this to be disabled. To disable AJAX on the collection page, simply disable quickshop.
Show vendors
Include a label for the products' vendor by enabling Show vendor.
Add promotion blocks
Handy allows you to add promotions to the product grids on your collection pages using Promotion content blocks.
Click [+] Add promotion to get started.
Select collection to pair with the promotion
Use the Select collection button to identify the collection to assign to the promotion. If no collection is selected, the promotion will appear on each collection page.
Position the promotion
Assign a promotion position in the grid using the Display after X products dropdown. For instance, if 14 is entered, the promotion will appear after the 14th product.
Add the copy and link
then add your Text, Link, and Link text in the following fields.
You can create multiple promotions and display them on different collection pages if you wish. There is no limit to the number of promotions you can create.
* NOTE: May not be available on all sections, blocks or templates