A blank slate theme for Shopify 2.0 with Tailwind CSS
Danshari (断捨離)
n. Decluttering, clearing out past accumulation, minimalism.
- Live demo (Password:
tacos) - Tailwind components demo (
sections/demo-css.liquid) - Richtext demo (
sections/demo-richtext.liquid)
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
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
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 |
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. |
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. |