Skip to content

mitchuman/danshari

Repository files navigation

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

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.