A Collection page displays all of the products in a given collection. You can add and configure your collections in your Shopify admin.
In this article:
- Accessing theme editor settings for collection pages
- Bottom menu bar
- Product grid settings
- Image containers
- Enable product quickshop
- Show vendors
- Using the promotion blocks
Accessing theme editor settings for collection pages
Navigate to Handy's theme editor settings by clicking Customize > Open a collection in the right-side preview or select Collection page from the page dropdown > In the left-side settings, open the Collection pages section
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.
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.
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 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.
Using the 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 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.