diff --git a/.gitattributes b/.gitattributes deleted file mode 100644 index f42cf6ac4..000000000 --- a/.gitattributes +++ /dev/null @@ -1 +0,0 @@ -*.json linguist-language=jsonc \ No newline at end of file diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml deleted file mode 100644 index 1e7e82587..000000000 --- a/.github/workflows/ci.yml +++ /dev/null @@ -1,12 +0,0 @@ -name: CI -on: [push] -jobs: - theme-check: - name: Theme Check - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v4 - - name: Theme Check - uses: shopify/theme-check-action@v2 - with: - token: ${{ github.token }} diff --git a/.github/workflows/cla.yml b/.github/workflows/cla.yml deleted file mode 100644 index 2c3a4042f..000000000 --- a/.github/workflows/cla.yml +++ /dev/null @@ -1,22 +0,0 @@ -name: Contributor License Agreement (CLA) - -on: - pull_request_target: - types: [opened, synchronize] - issue_comment: - types: [created] - -jobs: - cla: - runs-on: ubuntu-latest - if: | - (github.event.issue.pull_request - && !github.event.issue.pull_request.merged_at - && contains(github.event.comment.body, 'signed') - ) - || (github.event.pull_request && !github.event.pull_request.merged) - steps: - - uses: Shopify/shopify-cla-action@v1 - with: - github-token: ${{ secrets.GITHUB_TOKEN }} - cla-token: ${{ secrets.CLA_TOKEN }} diff --git a/.gitignore b/.gitignore deleted file mode 100644 index a638c160a..000000000 --- a/.gitignore +++ /dev/null @@ -1,17 +0,0 @@ -# OS generated files # -###################### -.DS_Store -.DS_Store? -._* -.Spotlight-V100 -.Trashes -ehthumbs.db -Thumbs.db -node_modules/ - -# Shopify CLI files -.shopify/ - -## Release files -release -*.zip diff --git a/.shopifyignore b/.shopifyignore deleted file mode 100644 index 59a11a13e..000000000 --- a/.shopifyignore +++ /dev/null @@ -1,13 +0,0 @@ -# This file contains a list of files that will be excluded from Shopify CLI -# operations such as push, pull, dev, etc. -# -# Examples: -# -# Ignore a specific file: -# templates/product.json -# -# Ignore templates with a wildcard pattern: -# templates/*.json -# -# Ignore templates and sections with a regular expression: -# /(templates|sections)/.*\.json/ diff --git a/.theme-check.yml b/.theme-check.yml deleted file mode 100644 index f9576a6ce..000000000 --- a/.theme-check.yml +++ /dev/null @@ -1 +0,0 @@ -extends: theme-check:recommended diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md deleted file mode 100644 index 2ac6ce681..000000000 --- a/CODE_OF_CONDUCT.md +++ /dev/null @@ -1,132 +0,0 @@ -# Contributor Covenant Code of Conduct - -## Our Pledge - -We as members, contributors, and leaders pledge to make participation in our -community a harassment-free experience for everyone, regardless of age, body -size, visible or invisible disability, ethnicity, sex characteristics, gender -identity and expression, level of experience, education, socio-economic status, -nationality, personal appearance, race, caste, color, religion, or sexual -identity and orientation. - -We pledge to act and interact in ways that contribute to an open, welcoming, -diverse, inclusive, and healthy community. - -## Our Standards - -Examples of behavior that contributes to a positive environment for our -community include: - -- Demonstrating empathy and kindness toward other people -- Being respectful of differing opinions, viewpoints, and experiences -- Giving and gracefully accepting constructive feedback -- Accepting responsibility and apologizing to those affected by our mistakes, - and learning from the experience -- Focusing on what is best not just for us as individuals, but for the overall - community - -Examples of unacceptable behavior include: - -- The use of sexualized language or imagery, and sexual attention or advances of - any kind -- Trolling, insulting or derogatory comments, and personal or political attacks -- Public or private harassment -- Publishing others' private information, such as a physical or email address, - without their explicit permission -- Other conduct which could reasonably be considered inappropriate in a - professional setting - -## Enforcement Responsibilities - -Community leaders are responsible for clarifying and enforcing our standards of -acceptable behavior and will take appropriate and fair corrective action in -response to any behavior that they deem inappropriate, threatening, offensive, -or harmful. - -Community leaders have the right and responsibility to remove, edit, or reject -comments, commits, code, wiki edits, issues, and other contributions that are -not aligned to this Code of Conduct, and will communicate reasons for moderation -decisions when appropriate. - -## Scope - -This Code of Conduct applies within all community spaces, and also applies when -an individual is officially representing the community in public spaces. -Examples of representing our community include using an official email address, -posting via an official social media account, or acting as an appointed -representative at an online or offline event. - -## Enforcement - -Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported to the community leaders responsible for enforcement at -opensource@shopify.com. -All complaints will be reviewed and investigated promptly and fairly. - -All community leaders are obligated to respect the privacy and security of the -reporter of any incident. - -## Enforcement Guidelines - -Community leaders will follow these Community Impact Guidelines in determining -the consequences for any action they deem in violation of this Code of Conduct: - -### 1. Correction - -**Community Impact**: Use of inappropriate language or other behavior deemed -unprofessional or unwelcome in the community. - -**Consequence**: A private, written warning from community leaders, providing -clarity around the nature of the violation and an explanation of why the -behavior was inappropriate. A public apology may be requested. - -### 2. Warning - -**Community Impact**: A violation through a single incident or series of -actions. - -**Consequence**: A warning with consequences for continued behavior. No -interaction with the people involved, including unsolicited interaction with -those enforcing the Code of Conduct, for a specified period of time. This -includes avoiding interactions in community spaces as well as external channels -like social media. Violating these terms may lead to a temporary or permanent -ban. - -### 3. Temporary Ban - -**Community Impact**: A serious violation of community standards, including -sustained inappropriate behavior. - -**Consequence**: A temporary ban from any sort of interaction or public -communication with the community for a specified period of time. No public or -private interaction with the people involved, including unsolicited interaction -with those enforcing the Code of Conduct, is allowed during this period. -Violating these terms may lead to a permanent ban. - -### 4. Permanent Ban - -**Community Impact**: Demonstrating a pattern of violation of community -standards, including sustained inappropriate behavior, harassment of an -individual, or aggression toward or disparagement of classes of individuals. - -**Consequence**: A permanent ban from any sort of public interaction within the -community. - -## Attribution - -This Code of Conduct is adapted from the [Contributor Covenant][homepage], -version 2.1, available at -[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1]. - -Community Impact Guidelines were inspired by -[Mozilla's code of conduct enforcement ladder][Mozilla CoC]. - -For answers to common questions about this code of conduct, see the FAQ at -[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at -[https://www.contributor-covenant.org/translations][translations]. - -[homepage]: https://www.contributor-covenant.org -[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html -[Mozilla CoC]: https://github.com/mozilla/diversity -[FAQ]: https://www.contributor-covenant.org/faq -[translations]: https://www.contributor-covenant.org/translations diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index 0877f7465..000000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,24 +0,0 @@ -# Contributing to Skeleton Theme - -## How to contribute - -We ❤️ pull requests. If you'd like to fix a bug, contribute a feature, or just correct a typo, feel free to do so, as long as you follow our [Code of Conduct](./CODE_OF_CONDUCT.md). - -If you're thinking of adding a new feature or proposing a new pattern across the theme, please consider opening an issue first. This will allow us to discuss your idea, ensure it aligns with the project's direction, and potentially save you some time. - -For your contribution to be accepted, you'll need to sign the [Shopify Contributor License Agreement (CLA)](https://cla.shopify.com/). - -## Standards - -* This codebase must be minimalist, not a fully featured theme. -* This theme must provide a common foundational starting point for most developers. -* Do not include or reference legacy or non-recommended features. -* All changes must preserve the principles defined in the README. - -## Steps to contribute - -1. Fork the repository: [https://github.com/Shopify/skeleton-theme/fork](https://github.com/Shopify/skeleton-theme/fork) -2. Create your feature branch: `git checkout -b my-new-feature` -3. Commit your changes: `git commit -am 'Add some feature'` -4. Push to your branch: `git push origin my-new-feature` -5. Create a new Pull Request diff --git a/LICENSE.md b/LICENSE.md deleted file mode 100644 index 611b31d0a..000000000 --- a/LICENSE.md +++ /dev/null @@ -1,9 +0,0 @@ -Copyright (c) 2018-present Shopify Inc. - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, sell and/or create derivative works of the Software or any part thereof, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The rights granted above may only be exercised to develop themes that integrate or interoperate with Shopify software or services, and, if applicable, to distribute, offer for sale or otherwise make available any such themes via the Shopify Theme Store. All other uses of the Software are strictly prohibited. - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index eaf59b2c4..000000000 --- a/README.md +++ /dev/null @@ -1,160 +0,0 @@ -

-
- logo -
- Shopify Skeleton Theme -

- -A minimal, carefully structured Shopify theme designed to help you quickly get started. Designed with modularity, maintainability, and Shopify's best practices in mind. - -

- License - CI -

- -## Getting started - -### Prerequisites - -Before starting, ensure you have the latest Shopify CLI installed: - -- [Shopify CLI](https://shopify.dev/docs/api/shopify-cli) – helps you download, upload, preview themes, and streamline your workflows - -If you use VS Code: - -- [Shopify Liquid VS Code Extension](https://shopify.dev/docs/storefronts/themes/tools/shopify-liquid-vscode) – provides syntax highlighting, linting, inline documentation, and auto-completion specifically designed for Liquid templates - -### Clone - -Clone this repository using Git or Shopify CLI: - -```bash -git clone git@github.com:Shopify/skeleton-theme.git -# or -shopify theme init -``` - -### Preview - -Preview this theme using Shopify CLI: - -```bash -shopify theme dev -``` - -## Theme architecture - -```bash -. -├── assets # Stores static assets (CSS, JS, images, fonts, etc.) -├── blocks # Reusable, nestable, customizable UI components -├── config # Global theme settings and customization options -├── layout # Top-level wrappers for pages (layout templates) -├── locales # Translation files for theme internationalization -├── sections # Modular full-width page components -├── snippets # Reusable Liquid code or HTML fragments -└── templates # Templates combining sections to define page structures -``` - -To learn more, refer to the [theme architecture documentation](https://shopify.dev/docs/storefronts/themes/architecture). - -### Templates - -[Templates](https://shopify.dev/docs/storefronts/themes/architecture/templates#template-types) control what's rendered on each type of page in a theme. - -The Skeleton Theme scaffolds [JSON templates](https://shopify.dev/docs/storefronts/themes/architecture/templates/json-templates) to make it easy for merchants to customize their store. - -None of the template types are required, and not all of them are included in the Skeleton Theme. Refer to the [template types reference](https://shopify.dev/docs/storefronts/themes/architecture/templates#template-types) for a full list. - -### Sections - -[Sections](https://shopify.dev/docs/storefronts/themes/architecture/sections) are Liquid files that allow you to create reusable modules of content that can be customized by merchants. They can also include blocks which allow merchants to add, remove, and reorder content within a section. - -Sections are made customizable by including a `{% schema %}` in the body. For more information, refer to the [section schema documentation](https://shopify.dev/docs/storefronts/themes/architecture/sections/section-schema). - -### Blocks - -[Blocks](https://shopify.dev/docs/storefronts/themes/architecture/blocks) let developers create flexible layouts by breaking down sections into smaller, reusable pieces of Liquid. Each block has its own set of settings, and can be added, removed, and reordered within a section. - -Blocks are made customizable by including a `{% schema %}` in the body. For more information, refer to the [block schema documentation](https://shopify.dev/docs/storefronts/themes/architecture/blocks/theme-blocks/schema). - -## Schemas - -When developing components defined by schema settings, we recommend these guidelines to simplify your code: - -- **Single property settings**: For settings that correspond to a single CSS property, use CSS variables: - - ```liquid -
- ... -
- - {% stylesheet %} - .collection { - gap: var(--gap); - } - {% endstylesheet %} - - {% schema %} - { - "settings": [{ - "type": "range", - "label": "gap", - "id": "gap", - "min": 0, - "max": 100, - "unit": "px", - "default": 0, - }] - } - {% endschema %} - ``` - -- **Multiple property settings**: For settings that control multiple CSS properties, use CSS classes: - - ```liquid -
- ... -
- - {% stylesheet %} - .collection--full-width { - /* multiple styles */ - } - .collection--narrow { - /* multiple styles */ - } - {% endstylesheet %} - - {% schema %} - { - "settings": [{ - "type": "select", - "id": "layout", - "label": "layout", - "values": [ - { "value": "collection--full-width", "label": "t:options.full" }, - { "value": "collection--narrow", "label": "t:options.narrow" } - ] - }] - } - {% endschema %} - ``` - -## CSS & JavaScript - -For CSS and JavaScript, we recommend using the [`{% stylesheet %}`](https://shopify.dev/docs/api/liquid/tags#stylesheet) and [`{% javascript %}`](https://shopify.dev/docs/api/liquid/tags/javascript) tags. They can be included multiple times, but the code will only appear once. - -### `critical.css` - -The Skeleton Theme explicitly separates essential CSS necessary for every page into a dedicated `critical.css` file. - -## Contributing - -We're excited for your contributions to the Skeleton Theme! This repository aims to remain as lean, lightweight, and fundamental as possible, and we kindly ask your contributions to align with this intention. - -Visit our [CONTRIBUTING.md](./CONTRIBUTING.md) for a detailed overview of our process, guidelines, and recommendations. - -## License - -Skeleton Theme is open-sourced under the [MIT](./LICENSE.md) License. diff --git a/assets/base.css b/assets/base.css new file mode 100644 index 000000000..0ba26a05c --- /dev/null +++ b/assets/base.css @@ -0,0 +1,25 @@ +*, +*::before, +*::after { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: -apple-system, BlinkMacSystemFont, sans-serif; + background: #fff; + color: #111; + line-height: 1.5; +} + +img { + max-width: 100%; + display: block; +} + +button { + cursor: pointer; + border: none; + background: none; +} \ No newline at end of file diff --git a/assets/cart.js b/assets/cart.js new file mode 100644 index 000000000..e69de29bb diff --git a/assets/component.css b/assets/component.css new file mode 100644 index 000000000..e69de29bb diff --git a/assets/critical.css b/assets/critical.css deleted file mode 100644 index cdb1ae1aa..000000000 --- a/assets/critical.css +++ /dev/null @@ -1,117 +0,0 @@ -/** Critical CSS for the theme. This file is included on every page. */ - -/* Reset styles inspired by https://www.joshwcomeau.com/css/custom-css-reset/ */ -* { - box-sizing: border-box; - margin: 0; -} - -body { - display: flex; - flex-direction: column; - margin: 0; - min-height: 100svh; -} - -html:has(dialog[scroll-lock][open], details[scroll-lock][open]) { - overflow: hidden; -} - -img, -picture, -video, -canvas, -svg { - display: block; - max-width: 100%; - height: auto; -} - -input, -textarea, -select { - font: inherit; - border-radius: var(--style-border-radius-inputs); -} - -select { - background-color: var(--color-background); - color: currentcolor; -} - -dialog { - background-color: var(--color-background); - color: var(--color-foreground); -} - -p { - text-wrap: pretty; -} -p, -h1, -h2, -h3, -h4, -h5, -h6 { - overflow-wrap: break-word; -} - -p:empty { - display: none; -} - -:is(p, h1, h2, h3, h4, h5, h6):first-child, -:empty:first-child + :where(p, h1, h2, h3, h4, h5, h6) { - margin-block-start: 0; -} - -:is(p, h1, h2, h3, h4, h5, h6):last-child, -:where(p, h1, h2, h3, h4, h5, h6) + :has(+ :empty:last-child) { - margin-block-end: 0; -} - -/** Theme styles below */ -body { - font-family: var(--font-primary--family); - background-color: var(--color-background); - color: var(--color-foreground); -} - -/** Section layout utilities */ - -/** - * Setup a grid that enables both full-width and constrained layouts - * depending on the class of the child elements. - * - * By default, a minimum content margin is set on the left and right - * sides of the section and the content is centered in the viewport to - * not exceed the maximum page width. - * - * When a child element is given the `full-width` class, it will span - * the entire viewport. - */ -.shopify-section { - --content-width: min( - calc(var(--page-width) - var(--page-margin) * 2), - calc(100% - var(--page-margin) * 2) - ); - --content-margin: minmax(var(--page-margin), 1fr); - --content-grid: var(--content-margin) var(--content-width) var(--content-margin); - - /* This is required to make elements work as background images */ - position: relative; - grid-template-columns: var(--content-grid); - display: grid; - width: 100%; -} - -/* Child elements, by default, are constrained to the central column of the grid. */ -.shopify-section > * { - grid-column: 2; -} - -/* Child elements that use the full-width utility class span the entire viewport. */ -.shopify-section > .full-width { - grid-column: 1 / -1; -} diff --git a/assets/icon-account.svg b/assets/icon-account.svg deleted file mode 100644 index 5c523a3f8..000000000 --- a/assets/icon-account.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - diff --git a/assets/icon-cart.svg b/assets/icon-cart.svg deleted file mode 100644 index 0a8d0a9b1..000000000 --- a/assets/icon-cart.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - \ No newline at end of file diff --git a/assets/product.js b/assets/product.js new file mode 100644 index 000000000..e69de29bb diff --git a/assets/shoppy-x-ray.svg b/assets/shoppy-x-ray.svg deleted file mode 100644 index 6937b3c0c..000000000 --- a/assets/shoppy-x-ray.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/assets/theme.js b/assets/theme.js new file mode 100644 index 000000000..5c89e18ae --- /dev/null +++ b/assets/theme.js @@ -0,0 +1,3 @@ +document.addEventListener("DOMContentLoaded", () => { + console.log("Ktusu Theme Loaded 🚀"); +}); \ No newline at end of file diff --git a/blocks/group.liquid b/blocks/group.liquid deleted file mode 100644 index baea31c58..000000000 --- a/blocks/group.liquid +++ /dev/null @@ -1,105 +0,0 @@ -{% doc %} - Renders a group of blocks with configurable layout direction, gap and - alignment. - - All settings apply to only one dimension to reduce configuration complexity. - - This component is a wrapper concerned only with rendering its children in - the specified layout direction with appropriate padding and alignment. - - @example - {% content_for 'block', type: 'group', id: 'group' %} -{% enddoc %} - -
- {% content_for 'blocks' %} -
- -{% stylesheet %} - .group { - display: flex; - flex-wrap: nowrap; - overflow: hidden; - width: 100%; - } - - .group--horizontal { - flex-direction: row; - justify-content: space-between; - align-items: center; - padding: 0 var(--padding); - } - - .group--vertical { - flex-direction: column; - align-items: var(--alignment); - padding: var(--padding) 0; - } -{% endstylesheet %} - -{% schema %} -{ - "name": "t:general.group", - "blocks": [{ "type": "@theme" }], - "settings": [ - { - "type": "select", - "id": "layout_direction", - "label": "t:labels.layout_direction", - "default": "group--vertical", - "options": [ - { "value": "group--horizontal", "label": "t:options.direction.horizontal" }, - { "value": "group--vertical", "label": "t:options.direction.vertical" } - ] - }, - { - "visible_if": "{{ block.settings.layout_direction == 'group--vertical' }}", - "type": "select", - "id": "alignment", - "label": "t:labels.alignment", - "default": "flex-start", - "options": [ - { "value": "flex-start", "label": "t:options.alignment.left" }, - { "value": "center", "label": "t:options.alignment.center" }, - { "value": "flex-end", "label": "t:options.alignment.right" } - ] - }, - { - "type": "range", - "id": "padding", - "label": "t:labels.padding", - "default": 0, - "min": 0, - "max": 200, - "step": 2, - "unit": "px" - } - ], - "presets": [ - { - "name": "t:general.column", - "category": "t:general.layout", - "settings": { - "layout_direction": "group--vertical", - "alignment": "flex-start", - "padding": 0 - } - }, - { - "name": "t:general.row", - "category": "t:general.layout", - "settings": { - "layout_direction": "group--horizontal", - "padding": 0 - } - } - ] -} -{% endschema %} diff --git a/blocks/text.liquid b/blocks/text.liquid deleted file mode 100644 index b985c3894..000000000 --- a/blocks/text.liquid +++ /dev/null @@ -1,59 +0,0 @@ -{% doc %} - Renders a text block. - - @example - {% content_for 'block', type: 'text', id: 'text' %} -{% enddoc %} - -
- {{ block.settings.text }} -
- -{% stylesheet %} - .text { - text-align: var(--text-align); - } - .text--title { - font-size: 2rem; - font-weight: 700; - } - .text--subtitle { - font-size: 1.5rem; - } -{% endstylesheet %} - -{% schema %} -{ - "name": "t:general.text", - "settings": [ - { - "type": "text", - "id": "text", - "label": "t:labels.text", - "default": "Text" - }, - { - "type": "select", - "id": "text_style", - "label": "t:labels.text_style", - "options": [ - { "value": "text--title", "label": "t:options.text_style.title" }, - { "value": "text--subtitle", "label": "t:options.text_style.subtitle" }, - { "value": "text--normal", "label": "t:options.text_style.normal" } - ], - "default": "text--title" - }, - { - "type": "text_alignment", - "id": "alignment", - "label": "t:labels.alignment", - "default": "left" - } - ], - "presets": [{ "name": "t:general.text" }] -} -{% endschema %} diff --git a/config/settigns_data.json b/config/settigns_data.json new file mode 100644 index 000000000..8eb00892b --- /dev/null +++ b/config/settigns_data.json @@ -0,0 +1,87 @@ +{ + "current": { + "text_setting": "Welcome to Seed Theme", + "checkbox_setting": true, + "select_setting": "option1", + "color_primary": "#000000", + "color_secondary": "#FFFFFF", + "color_text": "#333333", + "color_accent": "#0066CC", + "font_body": "helvetica_neue_n4", + "font_heading": "helvetica_neue_n7", + "font_size_body": 16, + "font_size_heading": 32, + "spacing_section": 40, + "spacing_horizontal": 20, + "container_width": 1200, + "social_facebook": "https://facebook.com", + "social_instagram": "https://instagram.com", + "social_twitter": "https://twitter.com", + "social_pinterest": "https://pinterest.com" + }, + "presets": [ + { + "name": "Default", + "text_setting": "Welcome to Seed Theme", + "checkbox_setting": true, + "select_setting": "option1", + "color_primary": "#000000", + "color_secondary": "#FFFFFF", + "color_text": "#333333", + "color_accent": "#0066CC", + "font_body": "helvetica_neue_n4", + "font_heading": "helvetica_neue_n7", + "font_size_body": 16, + "font_size_heading": 32, + "spacing_section": 40, + "spacing_horizontal": 20, + "container_width": 1200, + "social_facebook": "https://facebook.com", + "social_instagram": "https://instagram.com", + "social_twitter": "https://twitter.com", + "social_pinterest": "https://pinterest.com" + }, + { + "name": "Minimal", + "text_setting": "Minimal Design", + "checkbox_setting": false, + "select_setting": "option2", + "color_primary": "#FFFFFF", + "color_secondary": "#F5F5F5", + "color_text": "#222222", + "color_accent": "#999999", + "font_body": "helvetica_neue_n4", + "font_heading": "helvetica_neue_n7", + "font_size_body": 14, + "font_size_heading": 28, + "spacing_section": 30, + "spacing_horizontal": 15, + "container_width": 1000, + "social_facebook": "", + "social_instagram": "", + "social_twitter": "", + "social_pinterest": "" + }, + { + "name": "Vibrant", + "text_setting": "Bold & Vibrant", + "checkbox_setting": true, + "select_setting": "option3", + "color_primary": "#FF6B35", + "color_secondary": "#004E89", + "color_text": "#1A1A1A", + "color_accent": "#F77F00", + "font_body": "helvetica_neue_n4", + "font_heading": "helvetica_neue_n7", + "font_size_body": 18, + "font_size_heading": 36, + "spacing_section": 50, + "spacing_horizontal": 25, + "container_width": 1300, + "social_facebook": "https://facebook.com/vibrant", + "social_instagram": "https://instagram.com/vibrant", + "social_twitter": "https://twitter.com/vibrant", + "social_pinterest": "https://pinterest.com/vibrant" + } + ] +} diff --git a/config/settings_data.json b/config/settings_data.json deleted file mode 100644 index 512f358e7..000000000 --- a/config/settings_data.json +++ /dev/null @@ -1,12 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "current": {} -} diff --git a/config/settings_schema.json b/config/settings_schema.json index 8d3b532d1..af7996c68 100644 --- a/config/settings_schema.json +++ b/config/settings_schema.json @@ -1,83 +1,169 @@ [ - { - "name": "theme_info", - "theme_name": "Skeleton", - "theme_version": "0.1.0", - "theme_author": "Shopify", - "theme_documentation_url": "https://help.shopify.com/manual/online-store/themes", - "theme_support_url": "https://support.shopify.com/" - }, - { - "name": "t:general.typography", - "settings": [ - { - "type": "header", - "content": "t:general.fonts" - }, - { - "type": "font_picker", - "id": "type_primary_font", - "default": "work_sans_n4", - "label": "t:general.primary" - } - ] - }, - { - "name": "t:general.layout", - "settings": [ - { - "type": "select", - "id": "max_page_width", - "label": "t:labels.page_width", - "options": [ - { - "value": "90rem", - "label": "t:options.page_width.narrow" - }, - { - "value": "110rem", - "label": "t:options.page_width.wide" - } - ], - "default": "90rem" - }, - { - "type": "range", - "id": "min_page_margin", - "min": 10, - "max": 100, - "step": 1, - "unit": "px", - "label": "t:labels.page_margin", - "default": 20 - } - ] - }, - { - "name": "t:general.colors", - "settings": [ - { - "type": "color", - "id": "background_color", - "default": "#FFFFFF", - "label": "t:labels.background" - }, - { - "type": "color", - "id": "foreground_color", - "default": "#333333", - "label": "t:labels.foreground" - }, - { - "type": "range", - "id": "input_corner_radius", - "min": 0, - "max": 10, - "step": 1, - "unit": "px", - "label": "t:labels.input_corner_radius", - "default": 4 - } - ] - } -] + { + "name": "Seed", + "settings": [ + { + "type": "header", + "content": "Welcome to the Seed Theme!" + } + ] + }, + { + "name": "general settings", + "settings": [ + { + "type": "text", + "id": "text_setting", + "label": "Text Setting", + "default": "Default Text" + }, + { + "type": "checkbox", + "id": "checkbox_setting", + "label": "Checkbox Setting", + "default": true + }, + { + "type": "select", + "id": "select_setting", + "label": "Select Setting", + "options": [ + { "value": "option1", "label": "Option 1" }, + { "value": "option2", "label": "Option 2" }, + { "value": "option3", "label": "Option 3" } + ], + "default" : "option1" + } + ] + }, + { + "name": "Colors", + "settings": [ + { + "type": "color", + "id": "color_primary", + "label": "Primary Color", + "default": "#000000" + }, + { + "type": "color", + "id": "color_secondary", + "label": "Secondary Color", + "default": "#FFFFFF" + }, + { + "type": "color", + "id": "color_text", + "label": "Text Color", + "default": "#333333" + }, + { + "type": "color", + "id": "color_accent", + "label": "Accent Color", + "default": "#0066CC" + } + ] + }, + { + "name": "Typography", + "settings": [ + { + "type": "font_picker", + "id": "font_body", + "label": "Body Font", + "default": "inter_n4" + }, + { + "type": "font_picker", + "id": "font_heading", + "label": "Heading Font", + "default": "inter_n7" + }, + { + "type": "range", + "id": "font_size_body", + "min": 12, + "max": 20, + "step": 1, + "unit": "px", + "label": "Body Font Size", + "default": 16 + }, + { + "type": "range", + "id": "font_size_heading", + "min": 18, + "max": 48, + "step": 2, + "unit": "px", + "label": "Heading Font Size", + "default": 32 + } + ] + }, + { + "name": "Spacing & Layout", + "settings": [ + { + "type": "range", + "id": "spacing_section", + "min": 0, + "max": 100, + "step": 10, + "unit": "px", + "label": "Section Spacing", + "default": 40 + }, + { + "type": "range", + "id": "spacing_horizontal", + "min": 0, + "max": 100, + "step": 10, + "unit": "px", + "label": "Horizontal Padding", + "default": 20 + }, + { + "type": "range", + "id": "container_width", + "min": 800, + "max": 1400, + "step": 50, + "unit": "px", + "label": "Container Width", + "default": 1200 + } + ] + }, + { + "name": "Social Media", + "settings": [ + { + "type": "text", + "id": "social_facebook", + "label": "Facebook URL", + "placeholder": "https://facebook.com/yourpage" + }, + { + "type": "text", + "id": "social_instagram", + "label": "Instagram URL", + "placeholder": "https://instagram.com/yourprofile" + }, + { + "type": "text", + "id": "social_twitter", + "label": "Twitter URL", + "placeholder": "https://twitter.com/yourhandle" + }, + { + "type": "text", + "id": "social_pinterest", + "label": "Pinterest URL", + "placeholder": "https://pinterest.com/yourprofile" + } + ] + } +] \ No newline at end of file diff --git a/layout/password.liquid b/layout/password.liquid deleted file mode 100644 index 350ec0bd1..000000000 --- a/layout/password.liquid +++ /dev/null @@ -1,19 +0,0 @@ - - - - {% # Inlined CSS Variables %} - {% render 'css-variables' %} - - {% # Load and preload the critical CSS %} - {{ 'critical.css' | asset_url | stylesheet_tag: preload: true }} - - {% # Social, title, etc. %} - {% render 'meta-tags' %} - - {{ content_for_header }} - - - - {{ content_for_layout }} - - diff --git a/layout/theme.liquid b/layout/theme.liquid index 0e3fd39ca..0d16aabb5 100644 --- a/layout/theme.liquid +++ b/layout/theme.liquid @@ -1,36 +1,15 @@ - + - {% # Inlined CSS Variables %} - {% render 'css-variables' %} + + {{ content_for_header }} - {% comment %} - Font preloading: - 1. Preconnect to font CDN for faster connection - 2. Preload only the critical font variant (base weight) - 3. Additional variants load on-demand via @font-face - {% endcomment %} - {% unless settings.type_primary_font.system? %} - - - {% comment %} Preload the base font variant for initial page render {% endcomment %} - {{ settings.type_primary_font | font_url | preload_tag: as: 'font', crossorigin: 'anonymous' }} - {% endunless %} - - {% # Load and preload the critical CSS %} - {{ 'critical.css' | asset_url | stylesheet_tag: preload: true }} - - {% # Social, title, etc. %} - {% render 'meta-tags' %} - - {{ content_for_header }} + + + + - - {% sections 'header-group' %} - {{ content_for_layout }} - - {% sections 'footer-group' %} diff --git a/locales/en.default.json b/locales/en.default.json deleted file mode 100644 index 3a43570d9..000000000 --- a/locales/en.default.json +++ /dev/null @@ -1,52 +0,0 @@ -{ - "404": { - "title": "404", - "not_found": "Page not found.", - "back_to_shopping": "Back to shopping" - }, - "blog": { - "article_comments": "Comments", - "article_metadata_html": "{{ date }} by {{ author }}", - "comment_form_body": "Comment", - "comment_form_email": "Email", - "comment_form_name": "Name", - "comment_form_submit": "Post", - "comment_form_title": "Add a comment" - }, - "cart": { - "checkout": "Checkout", - "title": "Cart", - "update": "Update", - "remove": "Remove" - }, - "customers": { - "login": { - "email": "Email", - "password": "Password", - "submit": "Sign in", - "title": "Login" - } - }, - "collections": { - "title": "Collections" - }, - "gift_card": { - "add_to_apple_wallet": "Add to Apple Wallet", - "card": "Gift card", - "expired": "This gift card has expired", - "expires_on": "Expires on {{ expires_on }}", - "use_at_checkout": "Use this gift card at checkout" - }, - "password": { - "title": "This shop is private", - "password": "Password", - "enter": "Enter" - }, - "search": { - "title": "Search", - "placeholder": "Search articles, pages, or products", - "submit": "Search", - "no_results_html": "No results found for {{ terms }}", - "results_for_html": "{{ count }} results found for {{ terms }}" - } -} diff --git a/locales/en.default.schema.json b/locales/en.default.schema.json deleted file mode 100644 index 2dfbc2f7d..000000000 --- a/locales/en.default.schema.json +++ /dev/null @@ -1,77 +0,0 @@ -{ - "general": { - "404": "Not found", - "article": "Article", - "block": "Block", - "blog": "Blog", - "cart": "Cart", - "collection": "Collection", - "collections": "Collections", - "collection_card": "Collection card", - "collections_grid": "Collections grid", - "colors": "Colors", - "column": "Column", - "content": "Content", - "custom_section": "Custom section", - "fonts": "Fonts", - "footer": "Footer", - "group": "Group", - "header": "Header", - "layout": "Layout", - "main": "Main", - "page": "Page", - "password": "Password", - "primary": "Primary", - "product": "Product", - "row": "Row", - "search": "Search", - "secondary": "Secondary", - "section": "Section", - "settings": "Settings", - "sidebar": "Sidebar", - "text": "Text", - "theme": "Theme", - "typography": "Typography" - }, - "labels": { - "alignment": "Alignment", - "background": "Background", - "foreground": "Foreground", - "grid_gap": "Grid spacing", - "grid_item_width": "Grid item width", - "input_corner_radius": "Input corner radius", - "layout_direction": "Layout direction", - "menu": "Menu", - "customer_account_menu": "Customer account menu", - "padding": "Padding", - "page_margin": "Page margin", - "page_width": "Page width", - "show_payment_icons": "Show payment icons", - "text_style": "Text style", - "text": "Text" - }, - "options": { - "alignment": { - "left": "Left", - "center": "Center", - "right": "Right" - }, - "direction": { - "horizontal": "Horizontal", - "vertical": "Vertical" - }, - "page_width": { - "narrow": "Narrow", - "wide": "Wide" - }, - "size": { - "large": "Large", - "small": "Small" - }, - "text_style": { - "title": "Title", - "subtitle": "Subtitle", - "normal": "Normal text" - }, - } -} diff --git a/sections/404.liquid b/sections/404.liquid deleted file mode 100644 index 076cfc919..000000000 --- a/sections/404.liquid +++ /dev/null @@ -1,23 +0,0 @@ -{% comment %} - This section is used in the 404 template to render page shown when customers - enter an invalid store URL. - - https://shopify.dev/docs/storefronts/themes/architecture/templates/404 -{% endcomment %} - -

{{ '404.title' | t }}

- -

- {{ '404.not_found' | t }} -

- - - {{ '404.back_to_shopping' | t }} - - -{% schema %} -{ - "name": "t:general.404", - "settings": [] -} -{% endschema %} diff --git a/sections/article.liquid b/sections/article.liquid deleted file mode 100644 index 146acd1ed..000000000 --- a/sections/article.liquid +++ /dev/null @@ -1,68 +0,0 @@ -{% comment %} - This section is used in the article template to render the article page, which - displays the full content of the blog post and can optionally include a - comments section for customers (not shown in this example). - - https://shopify.dev/docs/storefronts/themes/architecture/templates/article -{% endcomment %} - -{% if article.image %} - {{ article.image | image_url: width: 1000 | image_tag }} -{% endif %} - -

{{ article.title }}

- -{% assign date = article.published_at | time_tag: format: 'date' %} -

{{ 'blog.article_metadata_html' | t: date: date, author: article.author }}

- -{{ article.content }} - -{% if blog.comments_enabled? %} -

{{ 'blog.article_comments' | t }}

- -
- {% paginate article.comments by 10 %} - {% for comment in article.comments %} -
-

{{ comment.author }}

-

- {{- comment.created_at | time_tag: format: 'date' -}} -

-

{{ comment.content }}

-
- {% endfor %} - - {{ paginate | default_pagination: anchor: 'comments' }} - {% endpaginate %} -
- - {% form 'new_comment', article %} -

{{ 'blog.comment_form_title' | t }}

- - {{ form.errors | default_errors }} - -
- - -
- -
- - -
- -
- - -
- - - {% endform %} -{% endif %} - -{% schema %} -{ - "name": "t:general.article", - "settings": [] -} -{% endschema %} diff --git a/sections/blog.liquid b/sections/blog.liquid deleted file mode 100644 index 0ea2113bd..000000000 --- a/sections/blog.liquid +++ /dev/null @@ -1,35 +0,0 @@ -{% comment %} - This section is used in the blog template to render the blog page listing all - articles within a blog. - - https://shopify.dev/docs/storefronts/themes/architecture/templates/blog -{% endcomment %} - -

{{ blog.title }}

- -{% paginate blog.articles by 5 %} - {% for article in blog.articles %} -
- {% if article.image %} - {{ article.image | image_url: width: 1000 | image_tag }} - {% endif %} -

- {{ article.title | link_to: article.url }} -

- {% assign date = article.published_at | time_tag: format: 'date' %} -

{{ 'blog.article_metadata_html' | t: date: date, author: article.author }}

-

{{ article.excerpt }}

-
- {% endfor %} - - {%- if paginate.pages > 1 -%} - {{- paginate | default_pagination -}} - {%- endif -%} -{% endpaginate %} - -{% schema %} -{ - "name": "t:general.blog", - "settings": [] -} -{% endschema %} diff --git a/sections/cart-drawer.liquid b/sections/cart-drawer.liquid new file mode 100644 index 000000000..e69de29bb diff --git a/sections/cart.liquid b/sections/cart.liquid deleted file mode 100644 index 6d7e49841..000000000 --- a/sections/cart.liquid +++ /dev/null @@ -1,37 +0,0 @@ -{% comment %} - This section is used in the cart template to render /cart page with an - overview of the items in customer's cart. - - https://shopify.dev/docs/storefronts/themes/architecture/templates/cart -{% endcomment %} - -

{{ 'cart.title' | t }}

- -
- - {% for item in cart.items %} - - - - - - {% endfor %} -
- {% render 'image', image: item.image, url: item.url %} - -

{{ item.product.title }}

- {{ 'cart.remove' | t | link_to: item.url_to_remove }} -
- - -
- - -
- -{% schema %} -{ - "name": "t:general.cart", - "settings": [] -} -{% endschema %} diff --git a/sections/collection.liquid b/sections/collection.liquid deleted file mode 100644 index e5a786805..000000000 --- a/sections/collection.liquid +++ /dev/null @@ -1,47 +0,0 @@ -{% comment %} - This section is used in the collection template to render collection page - listing all products within a collection. - - https://shopify.dev/docs/storefronts/themes/architecture/templates/collection -{% endcomment %} - -

{{ collection.title }}

- -
- {% paginate collection.products by 20 %} - {% for product in collection.products %} -
- {% if product.featured_image %} - {% render 'image', - class: 'collection-product__image', - image: product.featured_image, - url: product.url, - width: 400, - height: 400, - crop: 'center' - %} - {% endif %} -
-

{{ product.title | escape | link_to: product.url }}

-

{{ product.price | money }}

-
-
- {% endfor %} - - {{ paginate | default_pagination }} - {% endpaginate %} -
- -{% stylesheet %} - .collection-products { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); - } -{% endstylesheet %} - -{% schema %} -{ - "name": "t:general.collection", - "settings": [] -} -{% endschema %} diff --git a/sections/collections.liquid b/sections/collections.liquid deleted file mode 100644 index db897a3dd..000000000 --- a/sections/collections.liquid +++ /dev/null @@ -1,83 +0,0 @@ -{% comment %} - This section is used in the list-collections template to render a list of - collections. - - https://shopify.dev/docs/storefronts/themes/architecture/templates/collection -{% endcomment %} - -

{{ 'collections.title' | t }}

- -
- {% for collection in collections %} - - {% if collection.featured_image %} - {% render 'image', - class: 'collection-card__image', - image: collection.featured_image, - width: 600, - height: 600, - crop: 'center' - %} - {% endif %} - -
-

{{ collection.title }}

- - {% if collection.description %} -

{{ collection.description | strip_html | truncatewords: 15 }}

- {% endif %} -
-
- {% endfor %} -
- -{% stylesheet %} - .collections { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(min(var(--collection-card-size), 100%), 1fr)); - gap: var(--grid-gap); - } - .collections--compact { - --collection-card-size: 160px; - } - .collections--full { - --collection-card-size: 280px; - } - .collection-card { - display: flex; - flex-direction: column; - width: 100%; - } -{% endstylesheet %} - -{% schema %} -{ - "name": "t:general.collections_grid", - "settings": [ - { - "type": "select", - "id": "grid_item_width", - "label": "t:labels.grid_item_width", - "options": [ - { "value": "collections--compact", "label": "t:options.size.small" }, - { "value": "collections--full", "label": "t:options.size.large" } - ], - "default": "collections--full" - }, - { - "type": "range", - "id": "grid_gap", - "label": "t:labels.grid_gap", - "min": 0, - "max": 50, - "step": 5, - "unit": "px", - "default": 10 - } - ], - "presets": [{ "name": "t:general.collections_grid" }] -} -{% endschema %} diff --git a/sections/custom-section.liquid b/sections/custom-section.liquid deleted file mode 100644 index 529d497bf..000000000 --- a/sections/custom-section.liquid +++ /dev/null @@ -1,60 +0,0 @@ -
- {% if section.settings.background_image %} -
- {{ section.settings.background_image | image_url: width: 2000 | image_tag }} -
- {% endif %} - -
- {% content_for 'blocks' %} -
-
- -{% stylesheet %} - .custom-section { - position: relative; - overflow: hidden; - width: 100%; - } - .custom-section__background { - position: absolute; - width: 100%; - height: 100%; - z-index: -1; - overflow: hidden; - } - .custom-section__background img { - position: absolute; - width: 100%; - height: auto; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - } - .custom-section__content { - display: grid; - grid-template-columns: var(--content-grid); - } - .custom-section__content > * { - grid-column: 2; - } -{% endstylesheet %} - -{% schema %} -{ - "name": "t:general.custom_section", - "blocks": [{ "type": "@theme" }], - "settings": [ - { - "type": "image_picker", - "id": "background_image", - "label": "t:labels.background" - } - ], - "presets": [ - { - "name": "t:general.custom_section" - } - ] -} -{% endschema %} diff --git a/sections/footer-group.json b/sections/footer-group.json deleted file mode 100644 index 6560feb34..000000000 --- a/sections/footer-group.json +++ /dev/null @@ -1,25 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "type": "footer", - "name": "t:general.footer", - "sections": { - "footer": { - "type": "footer", - "settings": { - "menu": "", - "show_payment_icons": true - } - } - }, - "order": [ - "footer" - ] -} diff --git a/sections/footer.liquid b/sections/footer.liquid index 66e6f0978..e69de29bb 100644 --- a/sections/footer.liquid +++ b/sections/footer.liquid @@ -1,57 +0,0 @@ - - -{% stylesheet %} - footer { - display: flex; - justify-content: space-between; - margin-top: 2rem; - } - footer a { - text-decoration: none; - color: var(--color-foreground); - } - footer .footer__links, - footer .footer__payment { - display: flex; - gap: 1rem; - } -{% endstylesheet %} - -{% schema %} -{ - "name": "t:general.footer", - "settings": [ - { - "type": "link_list", - "id": "menu", - "label": "t:labels.menu" - }, - { - "type": "checkbox", - "id": "show_payment_icons", - "label": "t:labels.show_payment_icons", - "default": true - } - ] -} -{% endschema %} diff --git a/sections/header-group.json b/sections/header-group.json deleted file mode 100644 index 25ed90714..000000000 --- a/sections/header-group.json +++ /dev/null @@ -1,22 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "type": "header", - "name": "t:general.header", - "sections": { - "header": { - "type": "header", - "settings": {} - } - }, - "order": [ - "header" - ], -} diff --git a/sections/header.liquid b/sections/header.liquid index d873bdda7..e69de29bb 100644 --- a/sections/header.liquid +++ b/sections/header.liquid @@ -1,77 +0,0 @@ -
-

- {{ shop.name | link_to: routes.root_url }} -

- -
- {% for link in section.settings.menu.links %} - {{ link.title | link_to: link.url }} - {% endfor %} -
- -
- {% if shop.customer_accounts_enabled %} - - {{ 'icon-account.svg' | inline_asset_content }} - - {% endif %} - - - {% if cart.item_count > 0 %} - {{ cart.item_count }} - {% endif %} - - {{ 'icon-cart.svg' | inline_asset_content }} - -
-
- -{% stylesheet %} - header { - height: 5rem; - display: flex; - align-items: center; - justify-content: space-between; - } - header a { - position: relative; - text-decoration: none; - color: var(--color-foreground); - display: flex; - align-items: center; - justify-content: center; - } - header a sup { - position: absolute; - left: 100%; - overflow: hidden; - max-width: var(--page-margin); - } - header svg { - width: 2rem; - } - header .header__menu, - header .header__icons { - display: flex; - gap: 1rem; - } -{% endstylesheet %} - -{% schema %} -{ - "name": "t:general.header", - "settings": [ - { - "type": "link_list", - "id": "menu", - "label": "t:labels.menu" - }, - { - "type": "link_list", - "id": "customer_account_menu", - "label": "t:labels.customer_account_menu", - "default": "customer-account-main-menu" - } - ] -} -{% endschema %} diff --git a/sections/hello-world.liquid b/sections/hello-world.liquid deleted file mode 100644 index 839823ac0..000000000 --- a/sections/hello-world.liquid +++ /dev/null @@ -1,144 +0,0 @@ -{% comment %} - Welcome to Shopify theme development! -{% endcomment %} - -
-
-
-

Hello, World!

- -

- The Skeleton theme is a minimal, carefully structured Shopify theme designed to help you quickly get started. - Designed with modularity, maintainability, and Shopify's best practices in mind. -

- -

- Themes shape the online store experience for merchants and their customers. Build fast, flexible themes at scale - using Liquid, Shopify's theme templating language, along with HTML, CSS, JavaScript, and JSON. -

-
-
- -
-
-
- -
-
-

Key Concepts

-

- Shopify themes are a package of template files, building blocks, and supporting assets. Use these building blocks - to create modular, customizable themes. -

-

{{ 'Learn more about key concepts' | link_to: 'https://shopify.dev/docs/storefronts/themes/architecture' }}

-
- -
-

Liquid

-

- The Liquid templating language is the backbone of Shopify themes, and is used to load dynamic content on - storefronts. Extend Liquid objects to store and present custom data using metafields. -

-

{{ 'View the Liquid reference' | link_to: 'https://shopify.dev/docs/api/liquid' }}

-
- -
-

Best Practices

-

- To optimize your theme development experience, Shopify has established a set of best practices that you can refer - to when developing your theme and setting up your toolchains and processes. -

-

{{ 'Follow best practices' | link_to: 'https://shopify.dev/docs/storefronts/themes/best-practices' }}

-
-
- -{% stylesheet %} - .welcome { - display: grid; - grid-template-columns: var(--content-grid); - background-color: #f6f6f7; - padding: 72px 0; - } - - .welcome-content { - grid-column: 2; - display: flex; - justify-content: space-between; - align-items: center; - gap: 1rem; - width: 100%; - padding: 0 24px; - } - - .welcome-description { - max-width: 80ch; - line-height: 1.4; - margin-top: 1.5rem; - } - - .icon { - width: 300px; - } - - .highlights { - display: grid; - gap: 2rem; - grid-template-columns: repeat(3, 1fr); - margin-top: 50px; - } - - @media (max-width: 1100px) { - .highlights { - grid-template-columns: 1fr; - } - } - - .highlight { - display: flex; - flex-direction: column; - height: 100%; - padding: 24px; - border-radius: 8px; - background-color: #eef3ff; - color: rgb(92, 95, 98); - line-height: 1.4; - } - - .highlight > * + * { - margin-top: 1rem; - } - - .highlight h3 { - font-size: 1rem; - color: rgb(32, 34, 35); - } - - .highlight-description { - flex: 1 1; - } - - .highlight a { - display: flex; - width: fit-content; - background-color: rgb(250, 251, 251); - box-shadow: rgba(0, 0, 0, 0.2) 0px -3px 0px 0px inset, rgba(255, 255, 255, 0.9) 0px 2px 0px 0px inset; - border: 1px solid rgb(140, 145, 150); - border-radius: 4px; - color: rgb(92, 95, 98); - padding: 3px 10px 5px; - text-decoration: none; - } -{% endstylesheet %} - -{% schema %} -{ - "name": "Hello World", - "settings": [], - "presets": [ - { - "name": "Hello World Template", - "category": "Demo" - } - ] -} -{% endschema %} diff --git a/sections/page.liquid b/sections/page.liquid deleted file mode 100644 index 1a3fea126..000000000 --- a/sections/page.liquid +++ /dev/null @@ -1,17 +0,0 @@ -{% comment %} - This section is used in the page template to render store pages like About us - or Contact us. - - https://shopify.dev/docs/storefronts/themes/architecture/templates/page -{% endcomment %} - -

{{ page.title }}

- -{{ page.content }} - -{% schema %} -{ - "name": "t:general.page", - "settings": [] -} -{% endschema %} diff --git a/sections/password.liquid b/sections/password.liquid deleted file mode 100644 index 6f2272182..000000000 --- a/sections/password.liquid +++ /dev/null @@ -1,35 +0,0 @@ -{% comment %} - This section is used in the password template to render landing page shown - when password protection is applied to a store. - - https://shopify.dev/docs/storefronts/themes/architecture/templates/password -{% endcomment %} - -

{{ 'password.title' | t }}

- -{% if shop.password_message %} -

{{ shop.password_message }}

-{% endif %} - -{% form 'storefront_password' %} - {% if form.errors %} - {{ form.errors | default_errors }} - {% endif %} - - - - - - -{% endform %} - -{% schema %} -{ - "name": "t:general.password", - "settings": [] -} -{% endschema %} diff --git a/sections/product-main.liquid b/sections/product-main.liquid new file mode 100644 index 000000000..e69de29bb diff --git a/sections/product.liquid b/sections/product.liquid deleted file mode 100644 index 9664dfda5..000000000 --- a/sections/product.liquid +++ /dev/null @@ -1,52 +0,0 @@ -{% comment %} - This section is used in the product template to render product page with - media, content, and add-to-cart form. - - https://shopify.dev/docs/storefronts/themes/architecture/templates/product -{% endcomment %} - -
- {% for image in product.images %} - {% render 'image', class: 'product-image', image: image %} - {% endfor %} -
- -
-

{{ product.title }}

-

{{ product.price | money }}

-

{{ product.description }}

-
- -
- {% form 'product', product %} - {% assign current_variant = product.selected_or_first_available_variant %} - - - - - - - {{ form | payment_button }} - {% endform %} -
- -{% schema %} -{ - "name": "t:general.product", - "settings": [], - "disabled_on": { - "groups": ["header", "footer"] - } -} -{% endschema %} diff --git a/sections/search.liquid b/sections/search.liquid deleted file mode 100644 index 7177c1818..000000000 --- a/sections/search.liquid +++ /dev/null @@ -1,70 +0,0 @@ -{% comment %} - This section is used in the search template to render search results for - products, articles, and pages. - - https://shopify.dev/docs/storefronts/themes/architecture/templates/search -{% endcomment %} - -

{{ 'search.title' | t }}

- -
- - -
- -{% if search.performed %} - {% if search.results_count == 0 %} -

{{ 'search.no_results_html' | t: terms: search.terms }}

- {% else %} -

{{ 'search.results_for_html' | t: terms: search.terms, count: search.results_count }}

- -
- {% paginate search.results by 20 %} - {% # Search result items may be an article, a page, or a product. %} - {% for result in search.results %} -
- {% assign featured_image = result.featured_image | default: result.image %} - {% if featured_image %} - {% render 'image', class: 'search-result__image', image: featured_image, url: result.url, width: 400 %} - {% endif %} -
-

- {{ result.title | link_to: result.url }} - {% if result.price %} - {{ result.price | money_with_currency }} - {% endif %} -

-
-
- {% endfor %} - - {{ paginate | default_pagination }} - {% endpaginate %} -
- {% endif %} -{% endif %} - -{% stylesheet %} - .search-results { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - } - .search-results .prev, - .search-results .page, - .search-results .next { - grid-column: 1 / -1; - } -{% endstylesheet %} - -{% schema %} -{ - "name": "t:general.search", - "settings": [] -} -{% endschema %} diff --git a/sections/sticky-atc.liquid b/sections/sticky-atc.liquid new file mode 100644 index 000000000..e69de29bb diff --git a/snippets/css-variables.liquid b/snippets/css-variables.liquid deleted file mode 100644 index 99b5497a3..000000000 --- a/snippets/css-variables.liquid +++ /dev/null @@ -1,18 +0,0 @@ -{% style %} - {% # Loads all font variantions with display: swap %} - {{ settings.type_primary_font | font_face: font_display: 'swap' }} - {{ settings.type_primary_font | font_modify: 'weight', 'bold' | font_face: font_display: 'swap' }} - {{ settings.type_primary_font | font_modify: 'weight', 'bold' | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }} - {{ settings.type_primary_font | font_modify: 'style', 'italic' | font_face: font_display: 'swap' }} - - :root { - --font-primary--family: {{ settings.type_primary_font.family }}, {{ settings.type_primary_font.fallback_families }}; - --font-primary--style: {{ settings.type_primary_font.style }}; - --font-primary--weight: {{ settings.type_primary_font.weight }}; - --page-width: {{ settings.max_page_width }}; - --page-margin: {{ settings.min_page_margin }}px; - --color-background: {{ settings.background_color }}; - --color-foreground: {{ settings.foreground_color }}; - --style-border-radius-inputs: {{ settings.input_corner_radius }}px; - } -{% endstyle %} diff --git a/snippets/icon.liquid b/snippets/icon.liquid new file mode 100644 index 000000000..e69de29bb diff --git a/snippets/image.liquid b/snippets/image.liquid deleted file mode 100644 index 9ea580a80..000000000 --- a/snippets/image.liquid +++ /dev/null @@ -1,64 +0,0 @@ -{% doc %} - Renders a responsive image that might be wrapped in a link. - - When `width`, `height` and `crop` are provided, the image will be rendered - with a fixed aspect ratio. - - Serves as an example of how to use the `image_url` filter and `image_tag` filter - as well as how you can use LiquidDoc to document your code. - - @param {image} image - The image to be rendered - @param {string} [url] - An optional destination URL for the image - @param {string} [class] - Optional class to be added to the image wrapper - @param {number} [width] - The highest resolution width of the image to be rendered - @param {number} [height] - The highest resolution height of the image to be rendered - @param {string} [crop] - The crop position of the image - - @example - {% render 'image', image: product.featured_image %} - {% render 'image', image: product.featured_image, url: product.url %} - {% render 'image', - class: 'product__image', - image: product.featured_image, - url: product.url, - width: 1200, - height: 800, - crop: 'center', - %} -{% enddoc %} - -{% liquid - unless height - assign width = width | default: image.width - endunless - - if url - assign wrapper = 'a' - else - assign wrapper = 'div' - endif -%} - -<{{ wrapper }} - class="image {{ class }}" - {% if url %} - href="{{ url }}" - {% endif %} -> - {{ image | image_url: width: width, height: height, crop: crop | image_tag }} - - -{% stylesheet %} - .image { - display: block; - position: relative; - overflow: hidden; - width: 100%; - height: auto; - } - - .image > img { - width: 100%; - height: auto; - } -{% endstylesheet %} diff --git a/snippets/meta-tags.liquid b/snippets/meta-tags.liquid deleted file mode 100644 index 67299c04f..000000000 --- a/snippets/meta-tags.liquid +++ /dev/null @@ -1,105 +0,0 @@ - - - - -{%- liquid - assign og_title = page_title | default: shop.name - assign og_url = canonical_url | default: request.origin - assign og_type = 'website' - assign og_description = page_description | default: shop.description | default: shop.name - - if request.page_type == 'product' - assign og_type = 'product' - elsif request.page_type == 'article' - assign og_type = 'article' - elsif request.page_type == 'password' - assign og_url = request.origin - endif -%} - - - - - - - -{%- if page_image -%} - - - - -{%- endif -%} - -{%- if request.page_type == 'product' -%} - - - - -{%- endif -%} - - - - - - - {{ page_title }} - {%- if current_tags %} – tagged "{{ current_tags | join: ', ' }}"{% endif -%} - {%- if current_page != 1 %} – Page {{ current_page }}{% endif -%} - {%- unless page_title contains shop.name %} – {{ shop.name }}{% endunless -%} - - - - -{% if page_description %} - -{% endif %} diff --git a/snippets/price.liquid b/snippets/price.liquid new file mode 100644 index 000000000..e69de29bb diff --git a/snippets/product-card.liquid b/snippets/product-card.liquid new file mode 100644 index 000000000..e69de29bb diff --git a/templates/404.json b/templates/404.json deleted file mode 100644 index fc12fc786..000000000 --- a/templates/404.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ - { - "sections": { - "main": { - "type": "404", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/article.json b/templates/article.json deleted file mode 100644 index d3bc0dfda..000000000 --- a/templates/article.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "article", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/blog.json b/templates/blog.json deleted file mode 100644 index 09705d701..000000000 --- a/templates/blog.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "blog", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/cart.json b/templates/cart.json deleted file mode 100644 index 78c2add24..000000000 --- a/templates/cart.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "cart", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/collection.json b/templates/collection.json index 7592ac075..e69de29bb 100644 --- a/templates/collection.json +++ b/templates/collection.json @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "collection", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/gift_card.liquid b/templates/gift_card.liquid deleted file mode 100644 index db5d8289b..000000000 --- a/templates/gift_card.liquid +++ /dev/null @@ -1,73 +0,0 @@ -{% layout none %} - - - - - {% # Inlined CSS Variables %} - {% render 'css-variables' %} - - {% # Load and preload the critical CSS %} - {{ 'critical.css' | asset_url | stylesheet_tag: preload: true }} - - {% # Social, title, etc. %} - {% render 'meta-tags' %} - - {% style %} - main { - text-align: center; - } - main img { - display: unset; - } - {% endstyle %} - - {{ content_for_header }} - - - -
-
-

{{ gift_card.balance | money }}

- - {% if gift_card.enabled == false or gift_card.expired %} -

{{ 'gift_card.expired' | t }}

- {% endif %} - - {% if gift_card.expires_on %} - {% assign expires_on = gift_card.expires_on | date: '%B %e, %Y' %} -

- {{ 'gift_card.expires_on' | t: expires_on: expires_on }} -

- {% endif %} - -

- {% if settings.logo %} - {{ settings.logo | image_url: width: 300 | image_tag: alt: shop.name }} - {% else %} - {{ 'gift_card.card' | t }} - {% endif %} -

- -

{{ shop.name }}

-

{{ 'gift_card.use_at_checkout' | t }}

-

{{ gift_card.code | format_code }}

- - {% if gift_card.pass_url %} - - {{ 'gift_card.add_to_apple_wallet' | t }} - - {% endif %} -
-
- - diff --git a/templates/index.json b/templates/index.json deleted file mode 100644 index 1f827db93..000000000 --- a/templates/index.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "hello-world", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/list-collections.json b/templates/list-collections.json deleted file mode 100644 index 309842879..000000000 --- a/templates/list-collections.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "collections", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/page.json b/templates/page.json deleted file mode 100644 index 36d23000f..000000000 --- a/templates/page.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "page", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/password.json b/templates/password.json deleted file mode 100644 index 030b72597..000000000 --- a/templates/password.json +++ /dev/null @@ -1,21 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "layout": "password", - "sections": { - "main": { - "type": "password", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/product.json b/templates/product.json index 8329ddc68..e69de29bb 100644 --- a/templates/product.json +++ b/templates/product.json @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "product", - "settings": {} - } - }, - "order": [ - "main" - ] -} diff --git a/templates/search.json b/templates/search.json deleted file mode 100644 index 8c540c545..000000000 --- a/templates/search.json +++ /dev/null @@ -1,20 +0,0 @@ -/* - * ------------------------------------------------------------ - * IMPORTANT: The contents of this file are auto-generated. - * - * This file may be updated by the Shopify admin theme editor - * or related systems. Please exercise caution as any changes - * made to this file may be overwritten. - * ------------------------------------------------------------ - */ -{ - "sections": { - "main": { - "type": "search", - "settings": {} - } - }, - "order": [ - "main" - ] -}