Banner: none, title and description, or text over image (image, height, overlay opacity, and text colors; the collection image is used when the image is blank). Collection description, breadcrumbs, and alignment
Related collections menu: shows the links of a menu you choose above the products, for example sub-categories
Product grid: products per page, columns (2 to 4 on desktop, 1 or 2 on phones), and pagination (page numbers, a Load more button, or infinite scroll)
Filters and sorting: set up filters (availability, price, product type, and more) in Shopify's Search & Discovery app. On desktop, filters can show in a sidebar, a horizontal bar, or a drawer. On phones, they always show in a drawer. Expand filter groups, sorting, and keep the toolbar in view while scrolling
Filters that you set to show as swatches or images in Search & Discovery appear as color dots or images
Changing filters or sorting updates the products and the URL without reloading the page
Column switch: shoppers choose 2, 3, or 4 columns on desktop, and 1 or 2 on phones. Their choice carries over to other pages
On model switch: when it's turned on under Product cards in theme settings, a switch between product and on-model images appears
Promo tile: add a Promo tile block to place an image and text tile on the first page, before the product at the position you choose (counted from the top left). It's one or two columns wide
App blocks appear above the product grid
Product cards
Set the card's look under Product cards in theme settings (see 02. Theme settings)
Contents: image (with the second image on hover, if set), badges, ranking number, vendor, title, price, star rating, color swatches, and the compare checkbox
Price: for products whose prices vary by variant, the lowest price, shown as From ¥1,000 (¥1,000〜 on Japanese pages). Prices show (tax incl.) or (tax excl.) following the Japan settings in theme settings
Badges: sale badges show the percent off (for example, 20% off; products whose prices vary show Sale), sold out, and tag badges. Product tags that start with badge: become badges. For example, badge:New shows New. You can change the prefix in theme settings
Color swatches: pointing at a swatch shows that color's image, and clicking it also changes the card's link to that color. Products without swatches set in Shopify show the number of colors instead, such as 3 colors
Star ratings appear when your review app writes Shopify's standard review metafields (reviews.rating and reviews.rating_count)
Quick add and quick view
Size buttons: for products with a size option, the size buttons appear when shoppers point at the card on desktop, and adding a size puts it in the cart. On phones, they tap + to show them. If a color is selected on the card, that color in that size is added
Button: products with only one variant get Add to cart, and products with options get Choose options, which opens a quick view. With Size buttons, products without a size option get this button too
Quick view: images, price, variants, quantity, an add to cart button, and a link to the product page (View full details)
Products that continue selling when out of stock show Pre-order when stock is at or below zero
You can place app blocks (such as a wishlist button) inside product cards. Add them to the Product card block in the Product list, Collection tabs, and Related products sections, and in the collection and search page sections, then choose their position (on the image or under the price)
Compare
Turn on Show compare checkbox in theme settings to add Compare to product cards. Shoppers can pick up to four products. The picks appear in a bar at the bottom of the screen, and Compare opens the table. The picks stay as shoppers move to other pages
Enter the table's rows in Comparison rows, one per line, as label | metafield (for example, Weight | custom.weight). Besides metafields, you can use vendor, type, sku, weight, or an option name such as Size. Rows without values for any product are hidden
Turn on Highlight differences to mark rows where the products differ
Search
Search page: result type tabs (all, products, pages, and articles), filters and sorting, results per page, columns, and pagination
The search in the header shows suggestions (products, pages, and articles) as shoppers type. In languages that predictive search supports, such as English, it also suggests collections and search terms
Shopify's predictive search doesn't support Japanese, so on Japanese pages and for Japanese words, Miyabi builds suggestions from regular search results
Collection list page
Collections to show (all collections when blank), columns, image ratio, text position (below or on the image), and product counts