ShopippiShopify ThemesKyoto
v1.0.0Latest
v1.0.0Latest

Kyoto theme · Documentation · v1.0.0

Product page sections

The product page is built from the Product information section and the sections under it. In the theme editor, choose Products > Default product from the page menu at the top.

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.

Product page

Product information

The product gallery and the information column. Every part of the information column is a block you can move, remove or add.

Sizes and layout

  • Media width †: 50, 55, 60, 65 (default 60).
  • Media aspect ratio: Adapt to image, Portrait, Tall, Square, Landscape, Wide (default Adapt to image).
  • Space between product details: Tight, Normal, Loose (default Tight).
  • Space between media and details †: Small, Medium, Large (default Medium).

Other settings: Layout, Sticky product info, Gallery style, Mobile gallery style, Mobile gallery controls, Peek next image on mobile, Gallery transition, Image fit, Image zoom, Loop video, Autoplay video, Show selected variant media only, Sticky buy bar, Sticky bar button action.

Also has the standard section settings.

Blocks you can add

  • Product title block
    • Size: Heading 1, Heading 2, Heading 3, Medium (between heading 2 and 3), Display (default Medium (between heading 2 and 3)).
    • Other settings: Heading element.
  • Vendor block
    • Other settings: Link to vendor.
  • Price block
    • Size: Small, Medium, Large, Extra large (default Medium).
    • Other settings: Show savings, Label compare-at price, Show tax note, Show installments, Show member price, Member price label, Member price value, Show member price to, Message for guests.
  • Rating block
    • Other settings: Show count.
  • Badges block
    • Other settings: Maximum badges, Include tag badges.
  • Variant picker block
    • Card size †: Small, Medium, Large (default Medium).
    • Dot and swatch size †: Small, Medium, Large (default Medium).
    • Other settings: Style, Use color swatches, Show option name and value, Card layout, Size option names, Small hint under the name.
  • Sibling products block
    • Other settings: Products, Label, Swatch source, Show current product name.
  • Purchase options block
    • Other settings: Show plan details, Show savings badge, Terms, Terms page.
  • Inventory status block
    • Other settings: Low stock threshold, Show in stock status, Show stock count, Stock indicator, Show restock date.
  • Buy buttons block
    • Width †: Full, Auto (default Full).
    • Other settings: Show quantity selector, Quantity and button on one line, Show dynamic checkout buttons, Show gift card recipient form, Show volume pricing, Show back in stock form, Show pickup availability, Show more settings, Pre-order note, Show payment icons.
    • Free shipping progress block (fixed, always inside)
      • Other settings: Style.
  • Delivery estimate block
    • Other settings: Earliest (business days), Latest (business days), Show cutoff time, Same-day cutoff hour, Skip weekends, Closed dates, Replacement text.
  • Description block
    • Lines when collapsed †: 3 to 12 (default 6).
    • Text size: Small, Medium, Large (default Medium).
    • Line length: Full, Medium, Narrow (default Full).
    • Other settings: Collapse long text, Muted text color.
  • Accordion block
    • Other settings: Style, Open first row, Open one at a time.
    • Collapsible row block
      • Other settings: Heading, Icon, Content, Page.
  • Pop-up block
    • Other settings: Label, Icon, Page, Content, Style, Open as, Show next to option.
  • Text (shared block, see Shared blocks)
  • Icons with text block
    • Icon size: Small, Medium, Large, Extra large (default Medium).
    • Text size: Small, Medium, Large (default Medium).
    • Spacing: Small, Medium, Large (default Medium).
    • Other settings: Layout, Rules above and below.
    • Icon with text block
      • Icon size: Use theme setting, Small, Medium, Large, Extra large (default Use theme setting). Leave on the theme setting to use the size of the icon set.
      • Other settings: Icon, Image, Heading, Text, Link.
  • Specifications block
    • Other settings: Heading, Style, SKU rows.
    • Spec row block
      • Other settings: Label, Value.
  • Custom field block
    • Other settings: Field type, Label, Options, Required, Maximum characters, Help text, Value saved on the order: checked, Name saved on the order: noshi, Name saved on the order: name on noshi.
  • Share block
    • Other settings: Label, Show Facebook, Show X, Show Pinterest, Show LINE.
  • Complementary products block
    • Other settings: Heading, Number to show, Layout, Show quick add.
  • Countdown (shared block, see Shared blocks)
  • Custom liquid (shared block, see Shared blocks)
  • Group block
    • Spacing: 0 to 48 px, in steps of 4 (default 12).
    • Other settings: Direction, Add border.
    • Text (shared block, see Shared blocks)
    • Countdown (shared block, see Shared blocks)
    • Custom liquid (shared block, see Shared blocks)
    • Rating scale block
      • Scale style: Dots, Bar, Segments (default Dots).
      • Other settings: Heading, Marker animation.
      • Scale row block
        • Other settings: Label, Value, Left end label, Right end label.
    • Gift wrap block
      • Checkbox size: Small, Medium, Large (default Medium).
      • Text size: Small, Medium, Large (default Medium).
      • Other settings: Label, Show price, Show message field, Name saved on the order: gift wrap, Value saved on the order: gift wrap, Name saved on the order: gift message, Look.
    • Inquiry form block
      • Other settings: Label, Display, Show quantity field, Show phone field, Hide buy buttons on quote-only products.
    • Offers block
      • Other settings: Offer 1, Offer 2, Offer 3, Discount code, End date and time, Icon.
    • Collection links block
      • Other settings: Source, Number to show, Label, Collections.
    • Disclosure block
      • Other settings: Icon, Text, Link, Style.
    • Sticker (shared block, see Shared blocks)
    • Image (shared block, see Shared blocks)
    • Video (shared block, see Shared blocks)
    • Buttons (shared block, see Shared blocks)
    • Email signup (shared block, see Shared blocks)
    • Spacer (shared block, see Shared blocks)
    • App blocks from apps you install
    • Also takes these blocks, described above: Product title, Vendor, Price, Rating, Badges, Variant picker, Sibling products, Purchase options, Inventory status, Buy buttons, Delivery estimate, Description, Accordion, Pop-up, Icons with text, Specifications, Custom field, Share, Complementary products.
  • App blocks from apps you install
  • Size ruler block
    • Ruler length †: Small, Medium, Large, Extra large (default Large).
    • Tick label size †: Small, Medium, Large (default Medium).
    • Bar weight †: Thin, Regular, Bold (default Regular).
    • Other settings: Size option names, Numbers per value, Unit, Show the chosen size as text, Adjust sizes and motion, Side of the photo, Bar color, Motion.
  • Museum label block
    • Second name size †: Small, Medium, Large, Extra large (default Medium).
    • Text size †: Small, Medium, Large (default Medium).
    • Row name column width †: Small, Medium, Large (default Medium).
    • Other settings: Second name, Made in, Show the maker row, Maker, Material, Note, Adjust sizes and motion, Second name color, Top rule, Motion.

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

  • Media stage block
    • Object’s foot in the photo (figure) †: 60 to 100 % (default 82). Figure layout: the photo is cut just below this point, so the object stands on the floor line. 82% suits photos on a white sweep; 100% for cut-outs.
    • Thumbnail column width †: Small, Medium, Large, Extra large (default Medium).
    • Chip text size †: Small, Medium, Large (default Medium).
    • Swatch strength †: 10 to 60 %, in steps of 2 (default 24). How much of a swatch color goes into its field.
    • Product name size under the floor line (figure) †: Medium, Large, Extra large (default Large).
    • Tab row height (figure) †: Small, Medium, Large (default Medium).
    • Buy column width (figure) †: Small, Medium, Large (default Medium).
    • Ruler column width (figure) †: Small, Medium, Large (default Medium).
    • Object size (figure) †: 60 to 100 %, in steps of 5 (default 100).
    • Other settings: Default field color, Color words and fields, Photos, Chip 1, Chip 2, Product type as a chip, Badges as chips, Show made in, maker and material as chips, Adjust sizes and motion, Motion, Object room shape (figure).
    • Seal (shared block, see Shared blocks)
    • Size ruler (described above)

Product details

Long facts under the product: specifications, materials and care, nutrition, how to use, shipping and returns. Rows can read product metafields.

Ready-made versions when you add it: Product details, Product details: food.

Sizes and layout

  • Content width: Narrow, Normal, Wide (default Normal).

Other settings: Style, Open first row.

Also has the standard section settings.

Blocks you can add

  • Detail row block
    • Other settings: Heading, Icon, Text, Page.
  • Spec table block
    • Other settings: Heading.
    • Spec row block
      • Other settings: Label, Value, Note.
  • Nutrition facts block
    • Other settings: Heading, Serving size.
    • Also takes these blocks, described above: Spec row.
  • How to use block
    • Other settings: Heading.
    • Step block
      • Other settings: Image, Heading, Text, Link, Button label.
  • Text (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)

Complementary products

Products you paired with this one in the Search & Discovery app, to buy together.

Other settings: Number to show, Layout, Include current product, Checked by default.

Also has the standard section settings.

Blocks you can add

  • App blocks from apps you install

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

Product recommendations

More products near the one being viewed, from Shopify's recommendations or a collection.

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: Source, Number to show, Layout, Mobile layout, Controls, 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)

Product rows

“More from this brand” or “More from this collection”.

Ready-made versions when you add it: More from this brand, More from this collection.

Sizes and layout

  • Columns on desktop: 2 to 6 (default 4).

Other settings: Source, Number to show, Layout, Controls, Collection.

Also has the standard section settings.

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

Blog articles that belong with the product or collection on screen.

Other settings: Match articles by, Filter by tag, Number to show, Layout, Articles, Blog.

Also has the standard section settings.

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

Reviews

The place for a reviews app, with an optional rating summary read from the standard review metafields.

Other settings: Show rating summary, Note.

Also has the standard section settings.

Blocks you can add

  • Text (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)

Quick order list

Wholesale ordering: every variant is a row with a quantity field, so buyers can set all quantities at once.

Other settings: Show SKU, Show inventory, Show volume pricing table, Rows per page.

Also has the standard section settings.

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