Loft includes the following collection options:
- Two different templates to choose from (collection-featured-template.liquid and collection-template.liquid).
- Whether or not to display the collection image
- Whether or not collection image should have its original height
- Collection banner image height
- Whether or not to display product sorting drop-downs (sort by featured product, best selling, A-Z, etc.).
- Number of products per row.
- Products to display per page.
- Product image overlay opacity.
- Whether or not product images should "fill" the entire square card they're displayed in.
- Promotional ad display, text, image, link and color options.
Collection template options
- Displays two large products at the top of the collection page.
- Example: https://loft-theme-demo-nashville.myshopify.com/collections/lighting
- Displays all products as squares
- Example: https://loft-theme-demo-nashville.myshopify.com/collections/architectural-photography
From the theme editor, navigate to a collection. Once you see the following options, you'll be able make the below changes.
Customize your grid by checking whether or not sorting is enabled, the number if products to display in each row and how many total products to show on each page.
There are a few settings to determine for your collection pages. Start by choosing a background color for your page using the color picker.
Next customize your grid by checking whether or not sorting is enabled, the number of products to display in each row and how many total products to show on each page. You are able to choose to display the collection's image or not as well as determine its height. An option for the collection image's original height is also included.
Now set your product style. You can choose the opacity of the hover state and check the box if you want your product photos to fill the grid. This is especially useful to create a streamlined look if you do not have product photos with white backgrounds.
Finally, you can enable an ad to show within your product listings by checking the “Enable” option in the customize ad section. If you are using an ad then enter in some text in the field provided and set a background color by checking the “Enable custom background color” box and then using the color picker to choose your color. You are also able to use a linkable image as your ad.