ShopippiShopify ThemesKyoto
v1.0.0Latest
v1.0.0Latest

Kyoto theme · Documentation · v1.0.0

Header, footer and bars

These sections live in the header and footer areas, so they show on every page. Open the theme editor, then select the section in the Header or Footer area of the left sidebar.

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.

Header area

Announcement bar

Up to six short messages above the header, shown as a still row, a slideshow or a moving line. One message can be the free shipping progress.

Sizes and layout

  • Text size: Small, Medium (default Small).

Other settings: Show country and language selectors, Show social media icons, Display on desktop, Display on mobile, Autoplay interval, Show arrows, Scroll speed, Scroll direction, Separator, Alignment, Sticky behavior, Show close button, Stay closed for (days), Transition, Show progress line, Pause on hover and focus, Link speed to scrolling, Text that does not fit.

Also has the standard section settings.

Blocks you can add

  • Announcement block
    • Other settings: Content, Text, Link, Link label, Icon, Countdown end date, After countdown ends, Show more settings, Start date and time, End date and time, Show on, Audience.
  • App blocks from apps you install

Utility bar

A thin band for opening hours, a shipping cut-off or a phone number, with a few small links, social icons and the country and language pickers.

Other settings: Text, Menu, Show social media icons, Show country/region selector, Show language selector, Alignment, Show on mobile.

Also has the standard section settings.

Campaign mode

For a sale or seasonal event with real start and end dates: between the dates the shop switches to a campaign color scheme, can show a campaign bar with a countdown and marks campaign products.

Other settings: Campaign name, Start date and time, End date and time, Preview in editor, Color scheme to replace, Campaign color scheme, Apply colors to, Show campaign bar, Bar text, Bar link, Show countdown, Hide announcement bar, Show campaign badge.

Also has the standard section settings.

Logo, menus, search, account and cart. Nine layouts, six menu styles, three mobile menu styles and a sticky option.

Sizes and layout

  • Menu text size †: Small, Medium, Large (default Medium).
  • Height †: Compact, Regular, Tall (default Regular).

Other settings: Menu, Secondary menu, Show account, Account menu, Show country/region selector, Show language selector, Layout, Mobile menu style, Mega menu style, Open mega menu on, Search on desktop, Search on mobile, Search and cart style, Sticky behavior, Transparent on, Transparent color scheme, Menu motion, Show more settings, Mobile logo position, Mobile submenus, Mega menu promo position, Show images in mobile menu, Menu color scheme, Bottom border, Show search, Icons on mobile.

Also has the standard section settings.

Blocks you can add

  • Mega menu promotion block
    • Image ratio †: Adapt to image, Portrait, Square, Landscape (default Portrait).
    • Column span: 1, 2 (default 1).
    • Other settings: Menu item name, Product, Image, Heading, Text, Link, Button label, Countdown end date, Show on mobile.
  • Menu label block
    • Other settings: Menu item name, Label.
  • Custom liquid (shared block, see Shared blocks)
  • Apps block
    • App blocks from apps you install
  • Mega menu block
    • Columns: Auto, 2, 3, 4, 5, 6 (default Auto).
    • Image ratio †: Portrait, Square, Landscape (default Portrait).
    • Other settings: Menu item, Collection and product images, Promotions, Show a link to the whole item.
    • Also takes these blocks, described above: Mega menu promotion.
  • Drawer promotions block
    • Other settings: Heading.
    • Also takes these blocks, described above: Mega menu promotion.

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

  • Menu drawer block
    • Menu spacing: Use theme setting, Compact, Regular, Spacious, Custom (default Use theme setting).
    • Drawer top and bottom padding †: 8 to 48 px, in steps of 4 (default 24).
    • Drawer side padding †: 12 to 40 px, in steps of 4 (default 20).
    • Menu item height †: 44 to 72 px, in steps of 4 (default 48).
    • Submenu indent †: 0 to 32 px, in steps of 4 (default 16).
    • Space above utility links †: 8 to 64 px, in steps of 4 (default 32).
    • Drawer width (side drawer): Use theme setting, Narrow, Wide, Full (default Use theme setting).
    • Other settings: Drawer menu, Opens from, Show secondary menu, Show account link, Show country and language, Show social media icons.
  • Shop name and tagline block
    • Size on desktop: 16 to 64 px (default 30). Used when no logo image is set. Tablets use a size between the desktop and mobile sizes.
    • Size on mobile: 14 to 40 px (default 22).
    • Letter spacing: 0 to 40 % (default 16).
    • Size (under Tagline): 9 to 16 px (default 10).
    • Other settings: Capitals, Show an accent dot after the name, Text, Show on mobile.
  • Chapter tabs block
    • Other settings: Show the chapter tabs, Chapter names on computers, Show on phones and tablets.

Email signup, menu and text columns, a large shop name, social icons, payment icons, country and language pickers and policy links.

Other settings: Show email signup, Email signup heading, Email signup text, Signup consent note, Show social media icons, Show payment icons, Show country/region selector, Show language selector, Show policy links, Show Shop follow button, Layout, Collapse columns on mobile, Show back to top button, Copyright text, Show Shopify attribution.

Also has the standard section settings.

Blocks you can add

  • Menu block
    • Other settings: Heading, Menu.
  • Text block
    • Other settings: Heading, Text.
  • Image block
    • Width: 40 to 400 px, in steps of 10 (default 160).
    • Other settings: Image, Link.
  • Contact details block
    • Other settings: Heading, Text.
  • Logo block
    • Width: 40 to 400 px, in steps of 10 (default 160).
    • Other settings: Logo version.
  • Payment icon block
    • Other settings: Image, Label.
  • Custom liquid block
    • Other settings: Liquid.
  • App blocks from apps you install
  • Large shop name block
    • Size: 6 to 30 % (default 18). Share of the screen width. A long name wraps between its words.
    • Largest size: 60 to 480 px, in steps of 10 (default 290).
    • Letter spacing: −5 to 30 % (default 1).
    • Other settings: Text, Alignment, Color, Motion.

Mobile tab bar

Up to five tabs fixed to the bottom of the screen on phones and tablets (menu, search, cart, account or any link).

Other settings: Tab labels, Hide on scroll down, Hide on product pages.

Also has the standard section settings.

Blocks you can add

  • Tab block
    • Other settings: Tap action, Icon, Label, Link.