ShopippiShopify ThemesKyoto
v1.0.0Latest
v1.0.0Latest

Kyoto theme · Documentation · v1.0.0

Collection, search and list pages

Sections of the collection page, the search page and the collections list page.

Every size setting is listed with its full range or its choices and the default. A dagger (†) marks a setting that appears only after you choose a related option. “Other settings” lists the remaining options by their name in the theme editor.

Collection page

Collection banner

The collection's heading, image and description, including the color field with a shelf of products.

Sizes and layout

  • Height †: Small, Medium, Large, Full screen, Adapt to image (default Medium).
  • Overlay opacity †: 0 to 80 %, in steps of 5 (default 30).
  • Heading size: Small, Medium, Large, Display (default Medium).
  • Shelf piece size †: Small, Medium, Large (default Medium).

Other settings: Show collection image, Image placement, Content position, Show description, Show product count, Subcollections style, Subcollections, Display heading, Feature number, Chapter opener, Content alignment, Products on the shelf, Field color.

Also has the standard section settings.

Product grid

The product grid with filters, sorting, a column switcher, promo tiles and pagination.

Sizes and layout

  • Columns on desktop: 2 to 6 (default 4).
  • Columns on mobile: 1, 2 (default 2).
  • Card image ratio: Use theme setting, Adapt to image, Portrait, Tall, Square, Landscape, Wide (default Use theme setting).

Other settings: Sidebar menu, Sidebar menu heading, Sidebar menu on mobile, Products per page, Pagination, Enable filtering, Filter layout, Show filter counts, Show more after (values), Open filter groups, Enable sorting, Show column switcher, Card hover effect.

Also has the standard section settings.

Blocks you can add

  • Promo tile block
    • Column span †: 1, 2 (default 1).
    • Overlay opacity †: 0 to 80 %, in steps of 5 (default 20).
    • Tile size: Auto, Large, Tall, Wide (default Auto). Used by the Contents and bento grids. Tall fits a 9:16 video.
    • Other settings: Media type, Image, Video, Heading, Text, Link, Button label, Position in grid, Show more settings, Content position, Hide when filtered, Product, Collection, Article.
  • Custom liquid (shared block, see Shared blocks)
  • App blocks from apps you install

Fixed blocks (always part of the section; select them in the sidebar to change them)

  • Chapter block
    • Other settings: Open with a spread, Link to the next chapter.
  • Grid look block
    • Product name size: Use theme setting, Medium, Large, Extra large (default Use theme setting).
    • Row spacing: Use theme setting, Medium, Large, Extra large (default Use theme setting).
    • Label plate width †: 28 to 50 % (default 38).
    • Product name size on the plate †: Small, Medium, Large, Extra large (default Medium).
    • Price size on the plate †: Small, Medium, Large (default Medium).
    • Object size †: 60 to 100 %, in steps of 5 (default 100).
    • Object’s foot in the photo †: 60 to 100 % (default 82). Where the object stands in the photo, from the top. The photo is cut just below it, so the object stands on the floor line. 82% suits photos on a white sweep with a soft shadow; use 100% for cut-outs.
    • Other settings: First product large (2 × 2), Photos on pale color fields, Field colors, Field color, Name and price under the picture, Motion, Adjust the label plate card, Color field shape, Floor line.

Collection description

Shows the collection description under the products (turn off the description in the collection banner first).

Sizes and layout

  • Maximum width: Narrow, Normal, None (default Normal).

Also has the standard section settings.

Product comparison

Compares the products a shopper picked (two to four) row by row.

Other settings: Maximum products, Show differences toggle, Show add to cart buttons, Sticky product names.

Also has the standard section settings.

Blocks you can add

  • Compare row block
    • Other settings: Label, Source, Metafield (namespace.key).

Fixed blocks (always part of the section; select them in the sidebar to change them)

Collections list page

Collections list

The page that lists all your collections or the ones you choose.

Sizes and layout

  • Columns on desktop: 2 to 6 (default 3).
  • Columns on mobile: 1, 2 (default 2).

Other settings: Source, Sort order, Collections per page, Collection card style, Show product count, Collections, Layout.

Also has the standard section settings.

Blocks you can add

Search page

Search results

The search results with filters, sorting and result type tabs.

Sizes and layout

  • Columns on desktop: 2 to 6 (default 4).
  • Columns on mobile: 1, 2 (default 2).
  • Card image ratio: Use theme setting, Adapt to image, Portrait, Tall, Square, Landscape, Wide (default Use theme setting).

Other settings: Products per page, Pagination, Enable filtering, Filter layout, Show filter counts, Enable sorting, Show result type tabs, Show article images, Card hover effect.

Also has the standard section settings.

Blocks you can add

  • Custom liquid (shared block, see Shared blocks)
  • App blocks from apps you install

Fixed blocks (always part of the section; select them in the sidebar to change them)

  • Search look block
    • Large line size: Small, Medium, Large, Extra large (default Large). The words searched for (or the question before a search), in the heading font.
    • Search field size: Small, Medium, Large (default Medium).
    • Chip size: Small, Medium, Large (default Medium).
    • Product name size (heading font): Use theme setting, Medium, Large, Extra large (default Large).
    • Tile height †: Small, Medium, Large (default Medium).
    • Label plate width †: 28 to 50 % (default 38).
    • Product name size on the plate †: Small, Medium, Large, Extra large (default Medium).
    • Price size on the plate †: Small, Medium, Large (default Medium).
    • Object size †: 60 to 100 %, in steps of 5 (default 100).
    • Object’s foot in the photo †: 60 to 100 % (default 82). Where the object stands in the photo, from the top. The photo is cut just below it, so the object stands on the floor line. 82% suits photos on a white sweep with a soft shadow; use 100% for cut-outs.
    • Other settings: Product pictures on pale color fields, Show collections as color tiles before a search and when nothing matches, Motion, Adjust the label plate card, Color field shape, Floor line.