INFORMATION

TSUGU theme documentation

Version: 0.1.0
Theme author: RIS
Last reviewed: 2026-08-31

TSUGU is a Shopify Online Store 2.0 theme for merchants who want to present the people, place, materials, techniques, care, and trust behind a product as part of the shopping experience.

Getting started
Global theme settings
Header and navigation
Home page sections
Product pages
Collections, search, and cart
Pages, blogs, and contact forms
Images and focal points
Markets, languages, and customer accounts
Accessibility and SEO
Apps and custom code
Troubleshooting
FAQ
Support policy

1. Getting started

After installing TSUGU:

In Shopify admin, go to Online Store > Themes.
Find TSUGU and select Customize.
Configure the global settings described below.
Add your logo, favicon, menus, products, collections, pages, articles, and images.
Review the home, product, collection, cart, search, blog, article, contact, 404, password, and gift card templates.
Test the store on desktop and mobile before publishing.

Keep an unpublished duplicate of your customized theme before making major changes.

2. Global theme settings

Open Theme settings in the theme editor.

Brand

Logo: Upload a landscape or portrait logo. TSUGU preserves its aspect ratio.
Logo width: Choose a width from 80 to 240 px. The default is 120 px.
Favicon: Upload the small icon shown in browser tabs and bookmarks. Browser caching can delay favicon changes.

If no logo is selected, TSUGU uses the brand name configured in the header or the store name.

Typography

Primary: Select the primary font from Shopify's font library.
The default font is Work Sans.
TSUGU loads regular, bold, italic, and bold italic styles when they are available.

Layout

Page width: Choose the narrow or wide content width.
Page margin: Adjust the minimum horizontal page margin.

Check narrow mobile screens after changing either setting.

Colors

TSUGU uses two paired background and text groups:

Background and Foreground
Secondary background and Text on secondary background

Always check text, links, buttons, form borders, and focus outlines after changing colors. Maintain sufficient contrast for readable text and controls.

Form appearance

Input corner radius: Adjusts the corner radius of supported input fields.

3. Header and navigation

Open the Header section.

Brand name: Used when no logo is selected.
Menu: Select the store's main menu. TSUGU supports navigation up to three levels.
Show country or region selector: Appears when the store has relevant Markets options.
Show language selector: Appears when more than one published language is available.
Customer account menu: Selects the menu shown with customer account navigation when supported.

Desktop navigation uses dropdown menus. Mobile navigation uses expandable menu levels. Test every menu item with both pointer and keyboard input.

Use the Announcement section to display a short store-wide message and optional link.

Footer

Open the Footer section to configure:

Brand name and tagline
Newsletter visibility, heading, and body text
Up to four footer menu columns and their headings
Copyright and Powered by Shopify visibility
Follow on Shop when the feature is available for the store
Shopify payment icons for enabled payment types

Policies are managed in Shopify admin. Add the required policy links to an appropriate footer menu.

4. Home page sections

TSUGU home introduction

This is the main editorial introduction.

Upload the Main visual image and enter meaningful image alternative text.
Add the small label, heading, body text, and up to two buttons.
Add the brand manifesto content.
Configure up to three commerce pillar blocks with a title, heading, text, and optional link.

Do not place essential text inside the image. Keep button labels short and describe their destinations clearly.

TSUGU maker story

Use this section to introduce a maker, workshop, region, material, or production practice.

Add an image and alternative text.
Add the small label, heading, body text, button label, and button link.

TSUGU categories

Use up to three editorial category blocks to guide customers into collections or curated pages.

Each block supports an image, alternative text, title, subtitle, and link.

TSUGU learning guides

Use up to four reading guide blocks to connect shopping with educational content.

Select a blog article to use its content automatically.
Optionally override the image, alternative text, label, title, or link.

TSUGU support

Use up to four support links for topics such as shipping, returns, product care, sizing, installation, or contact information.

Use the newsletter section or footer newsletter setting to collect customer email addresses through Shopify's customer form.

Custom Liquid and custom sections

Custom Liquid accepts Liquid or HTML for merchant-managed integrations and content.
Custom section accepts theme blocks and an optional background image.

Test custom code carefully. Support for third-party custom code is outside the standard TSUGU support scope.

5. Product pages

The product information section supports these blocks:

Vendor
Title
Price
Variant picker and buy buttons
Description
Product context
Custom Liquid
App blocks

Variant picker and purchase controls

TSUGU supports Shopify product variants, quantity input, availability, unit price, add-to-cart, and accelerated checkout when Shopify makes those features available for the product and store.

Color or image swatches depend on product option and swatch data configured in Shopify admin.

Product context

Use product context blocks to explain topics such as:

Origin and maker
Place and community
Material and technique
Care and longevity
Shipping or made-to-order information

Each block includes an index or label, heading, and rich text. Keep claims accurate and maintain this content when products change.

Product media

TSUGU supports Shopify product images and rich media supplied through the product record. Add alternative text to product media in Shopify admin.

Pickup availability

Pickup information appears only when local pickup is configured and available for the selected variant at an eligible location.

Product recommendations and complementary products

Recommendation content depends on Shopify product data and Search & Discovery configuration. If no eligible recommendations exist, the related section may not appear.

Gift card recipient information

Recipient fields appear only for eligible Shopify gift card products when the related Shopify feature is enabled.

6. Collections, search, and cart

Collections

Select the number of products shown per page in the collection section.
Filters and sorting depend on the store's Shopify configuration and product data.
Use clear collection titles, descriptions, and images.

Collection list

Use the collection list template to present collection cards. Check image crops and collection descriptions before publishing.

Search

TSUGU includes search results and predictive search. Result availability depends on indexed store content. Use accurate product titles, descriptions, and media alternative text to improve findability.

Cart

The cart supports line items, variant information, quantity updates, removal, order notes, subtotal, checkout, and continued shopping.

The storefront subtotal can change at checkout when taxes, shipping, duties, discounts, or currency conversion apply.

7. Pages, blogs, and contact forms

TSUGU includes templates for standard pages, contact pages, blogs, articles, 404 pages, password pages, and gift cards.

Contact page

Assign the contact template to a Shopify page to show the contact form. Configure the section's small label and introduction in the theme editor.

Form submissions are handled by Shopify. Test the form with the store's notification settings before publishing.

Blogs and articles

Use Shopify's rich text editor for article content. Add article featured images and alternative text, and test headings, lists, quotes, and links.

8. Images and focal points

TSUGU requests responsive image sizes from Shopify and delays off-screen images where appropriate.

For best results:

Upload a clear source image large enough for its intended layout.
Add concise alternative text that describes the image's purpose.
Open the image editor from the image thumbnail.
Set a focal point on the most important subject when the image may be cropped.
Check desktop and mobile previews.

Changing a focal point can affect every place where the same Shopify image is used. Check the image's usage before changing it.

9. Markets, languages, and customer accounts

Country or region options are controlled by Shopify Markets.
Language options appear only for published store languages.
Customer account behavior depends on the customer account configuration in Shopify admin.

TSUGU includes English and Japanese theme translations. Store content, navigation, products, policies, and third-party app content must be translated separately.

10. Accessibility and SEO

TSUGU includes keyboard focus styles, a skip-to-content link, semantic main content, form labels, responsive layouts, and image alternative text output.

Merchants remain responsible for the accessibility of uploaded content. In particular:

Add meaningful alternative text.
Keep headings in a logical order.
Use descriptive link and button labels.
Maintain readable color contrast.
Provide captions or transcripts for relevant media.
Test keyboard navigation after changing menus or adding custom content.

TSUGU uses Shopify page titles, descriptions, canonical URLs, social sharing images, and product structured data. Configure page titles, meta descriptions, featured images, and product data in Shopify admin.

11. Apps and custom code

Product sections support Shopify app blocks. App appearance and behavior are controlled by the app developer and might require app-specific support.

Before adding custom Liquid, scripts, or third-party integrations:

Duplicate the theme.
Confirm that the code complies with Shopify policies.
Test performance, accessibility, localization, and mobile layouts.
Remove the customization temporarily when diagnosing a theme issue.

12. Troubleshooting

A setting does not appear on the storefront

Confirm that the correct theme and template are being edited.
Confirm that the section or block is visible.
Confirm that required Shopify data exists.
Save the theme and refresh the preview.

A country, language, pickup, recommendation, or accelerated checkout feature is missing

These features appear only when the related Shopify configuration, product data, market, location, language, or payment method is eligible.

An image is cropped incorrectly

Open the image editor, review the focal point, and check desktop and mobile previews. Remember that a focal-point change can affect every use of the same image.

The favicon has not changed

Save the setting, then test in a private browser window or clear the browser cache.

A menu level is missing

Confirm that the selected Shopify menu contains the item and that the navigation is no more than three levels deep.

A product context block is empty

Enter text in the block or connect the content to suitable product data. Content is not generated automatically.

13. FAQ

Can I use TSUGU for products outside Japan?

Yes. The editorial structure can present origin, people, material, care, and trust for many product categories. Replace all demo copy and images with accurate store content.

Can I change the font and colors?

Yes. Use Theme settings > Typography and Theme settings > Colors. Review readability and contrast after changes.

Can I use a portrait logo?

Yes. TSUGU preserves landscape and portrait logo aspect ratios. Adjust the logo width and review desktop and mobile headers.

Why is a section showing placeholder content?

The required image, resource, or text has not been selected. Open the section and add store content.

Does TSUGU translate my products automatically?

No. The theme includes English and Japanese interface translations, but product, page, policy, navigation, and app content must be translated through Shopify's localization tools or a compatible translation workflow.

Does TSUGU include product reviews?

No built-in review system is included. Use a compatible Shopify app block if reviews are required.

Can support customize my store for me?

Standard support covers theme defects and questions about built-in TSUGU features. Store setup, content entry, bespoke design, custom code, and third-party app work are not included unless separately agreed.

14. Support policy

Use the public TSUGU support contact form for theme-related questions. Begin the subject or message with TSUGU theme support.

Include:

Store URL
TSUGU version
Unpublished preview link when possible
Page and template affected
Steps to reproduce the issue
Expected and actual result
Browser, device, and operating system
Screenshots or a short screen recording
Relevant app or customization details

Never send account passwords, payment information, customer personal data, or private API credentials.

We respond to theme support requests within two business days. Critical confirmed theme defects are prioritized.

Standard support includes:

Questions about built-in TSUGU features
Help locating theme settings
Reproducing and fixing confirmed theme defects
Clarification of this documentation

Standard support does not include:

Store design or content-entry services
Custom feature development
Third-party app, payment, carrier, or service troubleshooting
Problems caused by merchant custom code
Shopify platform or account administration issues

We may ask you to reproduce an issue on an unpublished copy of the latest unmodified TSUGU version. Access to a store is requested only when necessary and should be granted through Shopify's approved collaborator workflow.