Skip to main content

Documentation Index

Fetch the complete documentation index at: https://voyage-theme.fasil.in/llms.txt

Use this file to discover all available pages before exploring further.

The collection page (PLP) is composed of a single section — main-collection — driven by templates/collection.json. The section is intentionally rich: it owns the chip nav, the filter sidebar, the sticky toolbar, the view-mode picker, the product grid, the empty state, and an optional editorial studio note.

​
Anatomy

ElementWhat it does
Optional bannerRenders collection.image as a full-width banner when show_banner is on.
Title barAlternate to the banner — renders collection.title + collection.description cleanly.
Chip navHorizontal scrolling category chips above the toolbar.
Sticky toolbarFilter toggle, product count, view-mode picker, sort dropdown. Sticks to the top of the viewport as the customer scrolls.
Filter sidebarStorefront API filters — color swatches, size chips, price range, availability, brand, vendor.
Product gridCards with hover-reveal second image and a “Select Options” quick-view button.
PaginationNumbered pagination (Shopify’s default_pagination).
Editorial studio noteOptional quote block at the bottom — script accent + signature.

​
Default template

{
  "sections": {
    "main": { "type": "main-collection", "settings": {} }
  },
  "order": ["main"]
}
The default JSON is intentionally minimal — every setting on main-collection carries a sensible default, so the template simply opts in to the section’s full layout. Override individual settings either in the Theme Editor (recommended) or by adding them to the JSON.

​
Chip nav

The chip nav is a horizontal scrollable list of category labels. The default labels match the Voyager demo catalog vocabulary; merchants override per-vertical via the chip_labels setting (comma-separated string).
​
show_chip_nav
checkbox
default:"true"
​
chip_labels
text
Comma-separated. The first entry is the “All” / catch-all label.
Each chip links to /collections/all?type={chip} — meaning chips filter Shopify’s all collection by product type. The first chip (“All Pieces” by default) clears the filter and shows the full catalog.

​
Filter sidebar

The sidebar is driven by Shopify’s Storefront API filters — configured in admin under Online Store → Navigation → Filters. Voyager renders three filter types differently:
Filter typeVoyager render
list (Color / Colour)Circular color swatches in a horizontal row.
list (Size)Pill-style size chips in a horizontal row.
list (everything else)Checkbox list with (count) annotation.
price_rangeFrom / To number inputs + Apply button.
If no filters are configured in admin, the sidebar renders a polite empty-state note pointing the merchant at Navigation → Filters.
​
show_filter_sidebar
checkbox
default:"true"

​
Sort dropdown

Pulls from collection.sort_options — Shopify’s standard set (Featured, Best selling, Alphabetically A–Z and Z–A, Price low–high and high–low, Date newest and oldest). The current sort is highlighted; selecting another updates the URL and re-renders the grid.

​
View-mode picker

Four options: 2 columns, 3 columns, 4 columns (default), and list view. The selection is persisted in localStorage under the key voyage-plp-view — so a customer who prefers list view sees it on every collection they browse, across sessions.
​
default_columns
select
default:"4"
Initial column count for first-time visitors. Options: 2, 3, 4.
The list view applies an entirely different card layout — landscape image, longer description, larger price.

​
Product grid

The grid renders product cards from the product-card snippet. Each card includes:
  • Primary image — first image, lazy-loaded
  • Hover-reveal second image — second image, fades in on hover (desktop only)
  • Swatch row — small dots for each color variant
  • Title — links to product page
  • Price — formatted via the money filter, with compare-at strikethrough if applicable
  • “Select Options” overlay — opens the quick-view modal without leaving the page
​
products_per_page
range
default:"24"
Products per page. Min 12, max 48, step 4.
​
empty_text
text
default:"No products in this collection yet."

​
Pagination

Uses Shopify’s default_pagination filter — numbered page links with previous/next chevrons. Renders only when the collection spans more than one page.

​
Editorial studio note

An optional studio quote block below the grid. Useful for editorial brands that want to close every PLP with a signature voice.
​
show_editorial
checkbox
default:"true"
​
editorial_eyebrow
text
default:"Studio note · 03"
​
editorial_location
text
default:"Home Port · 44.40°N 8.94°E"
​
editorial_quote
textarea
The main quote. Wrapped in script-accent quotation marks.
​
editorial_signature
text
default:"— Marco Visconti, Head Cutter"
Two mutually useful display modes for the header area:

​
Structured data

The PLP emits two JSON-LD blocks: CollectionPage (name, URL, description, image, number of items) and BreadcrumbList (Home › Collection).

​
What’s next

Main collection section

Every setting in reference form.

Product card

The card snippet, its hover behavior, and quick-view triggers.