Code Monkey home page Code Monkey logo

theme-quiz's Introduction

Theme Quiz

PRs Welcome CI Discord Shield

Usage | Tools | Contributing | License

An opinionated lightweight theme starter for all projects.

Usage

To get started clone the template by clicking the Use this template button or by running the following command:

git clone https://github.com/odestry/theme-quiz.git

Running the development server

To run the development server, you'll need to have Shopify CLI as well as Node.js installed on your machine.

  1. Install the dependencies
npm install
  1. Connect to your store

To connect your store update the shopify.theme.toml file with your store's information.

[environments.development]
store = "john-apparel.myshopify.com"
  1. Start the development server
npm run dev

After authenticating, this will start a local development server running at https://localhost:9292 that you can use to preview your changes.

Tools

There are a number of really useful tools that the Shopify Themes team uses during development. This theme is already set up to work with these tools.

Shopify CLI

Shopify CLI helps you build Shopify themes faster and is used to automate and enhance your local development workflow. It comes bundled with a suite of commands for developing Shopify themes—everything from working with themes on a Shopify store (e.g. creating, publishing, deleting themes) or launching a development server for local theme development.

You can follow this quick start guide for theme developers to get started.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom storefront interfaces. It's a great way to build Shopify themes and sections quickly. You can find the configuration file at tailwind.config.ts. We use Vite to compile Tailwind CSS.

Theme Check

We recommend using Theme Check as a way to validate and lint your Shopify themes.

Theme Check is a command line tool that runs a series of tests against your theme code to surface errors, deprecations, and potential bugs. It's a great way to ensure your theme is up to date with the latest best practices and that you're not using any deprecated Liquid or JSON fields.

You can also run it from a terminal with the following Shopify CLI command:

shopify theme check

Continuous Integration

This theme uses GitHub Actions to maintain the quality of the theme. This is a starting point and what we suggest to use in order to ensure you're building better themes. Feel free to build off of it!

Shopify/lighthouse-ci-action

We love fast websites! Which is why we created Shopify/lighthouse-ci-action. This runs a series of Google Lighthouse audits for the home, product and collections pages on a store to ensure code that gets added doesn't degrade storefront performance over time.

Shopify/theme-check-action

This theme runs Theme Check on every commit via Shopify/theme-check-action.

Contributing

We'd love your help! Please read our contributing guide to learn about our development process, how to propose bug fixes and improvements.

License

Copyright (c) 2023-present Odestry. See LICENSE for further details.

theme-quiz's People

Contributors

blanklob avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.