Customize

Collections and search

How shoppers browse: collection pages, filters and sorting, product cards with swatches, quick add and search.

Collection page

Collection pages use the Collection section. In the theme editor, choose Collections > Default collection in the page selector.

Filtering

Duskline shows the filters that Shopify provides for each collection and search. Which filters appear, and in what order, is set in the free Search and Discovery app.

1. Install the Search and Discovery app from the Shopify App Store.
2. In the app, open Filters and select Add filter. Choose a source such as Availability, Price, Product type, Vendor, a variant option like Size or Color, or a metafield.
3. Save. The filters appear on your collection pages and search results when Enable filtering is on.

• Price filters show a minimum and maximum price field.
• Filters set to show as swatches in the app show color swatches; filters set to show images show the value's image.
• Active filters appear as removable pills above the products, with a link to clear them all.
• Results update as shoppers change filters, without reloading the page. Without JavaScript, filters still work as a normal form.

Sorting

With Enable sorting on, shoppers can sort by the options Shopify provides, such as featured, best selling, alphabetical, price and date. The default order of a collection is the sort order you choose for that collection in your admin under Products > Collections.

Editorial cards

Add an Editorial card block to the Collection section to place an image card between products on the first page of the grid. Up to 4 per collection template.

Tip: create an alternate collection template (for example collection.summer) to use different editorial cards for different collections.

Product cards and swatches

Cards are styled in Theme settings > Product cards, Badges and Swatches. See every card setting.

Photos

With Show second image on hover on, desktop shoppers see the product's second image when they hover a card, and touch screen shoppers can swipe through up to five images, with dots showing their place.

Swatches

With Show color swatches on, a card shows swatches for the first product option whose name is listed in Swatch option names (default: Color, Colour, Print, Pattern). Products with fewer than two values for that option show no swatches on the card. On the product page, a single color is still shown as one swatch. See Options with one value.

• Selecting a swatch changes the card's photo to that variant's image and points the card's link to that variant. With combined listings, it points to the product for that color.
• On desktop, hovering a swatch previews its photo.
• Up to five swatches show; a "+3" style link leads to the product for the rest.
• For the photo to change, add an image to each variant in your admin.

Badges

A sold out badge shows when no variant is available; a sale badge shows when the compare-at price is higher than the price.

Quick add

With Enable quick add on, each available product's card has a quick add button.

• Products with a single variant are added to the cart in one tap.
• Products with options open a small dialog to choose them, then add to the cart. For gift cards and products sold only by subscription, the dialog links to the product page.
• After adding, the cart drawer opens, or shoppers go to the cart page when Cart type is Page.

Search suggestions

The search icon in the header opens a search dialog. With Theme settings > Search > Enable search suggestions on, results appear as shoppers type: suggested searches, products, collections, pages and blog posts. Shoppers can move through suggestions with the arrow keys.

To change which products rank first or to add synonyms, use the Search and Discovery app.

Search results page

The full results page uses the Search results section. It shows products as product cards and also lists matching blog posts and pages.