Danshari

A blank slate theme for Shopify 2.0 with Tailwind CSS

Danshari (断捨離だんしゃり)
n. Decluttering, clearing out past accumulation, minimalism.

Demo

• Live demo (Password: tacos)
• Tailwind components demo (sections/demo-css.liquid)
• Richtext demo (sections/demo-richtext.liquid)

Global Settings

Configured in config/settings_schema.json and defined as CSS custom properties in assets/root.css.liquid.

• Colors
• Typography
• Miscellaneous
  • Logos & Favicon
  • Predictive Search feature enabled by default

Default Styles

Danshari is a minimally styled theme. However, the following pages are applied default styles:

• Login, Register and Account related pages (/account)
• Cart page (/cart)
• Blog page & Articles
• Search results page

Media Queries

Use VS Code snippets (defined in .vscode/danshari.code-snippets) and Tailwind screen utilities.

Snippet	Breakpoint
media mobile	≤ 428px
media mobile+	≥ 429px
media tablet	≤ 768px
media tablet+	≥ 769px
media desktop	≤ 1280px
media desktop+	≥ 1281px

Snippets

srcset

Automatically generates srcset, src, width and height attributes for <img> tags.

Example usage:

<img
  {% render 'srcset', image: section.settings.image, width: 1000 %}
  alt="..." loading="lazy"
/>

Props	Description
image	Shopify image object. Required.
width?	Max width of the image to display.

quantity-selector

Renders a product quantity selector.

Props	Description
name	name attribute for the input. Required.
id?	id attribute for the input. (Default: "qty")
value?	Initial value. (Default: 1)
label?	Show a text label above the inputs.