GithubHelp home page GithubHelp logo

drmartin1998 / goldpocket-games-theme Goto Github PK

View Code? Open in Web Editor NEW

This project forked from trelliscommerce/shopify-tailwind-starter-base

0.0 0.0 0.0 15.85 MB

Shopify Dawn theme with TailWindCSS & Prettier integrations

License: Other

Shell 0.01% JavaScript 9.04% CSS 23.06% Liquid 67.89%

goldpocket-games-theme's Introduction

Brought to you and maintained by Trellis Commerce - A full-service eCommerce agency based in Boston, MA

Lastest merged code from Dawn v10.0.0

Dawn + TailWindCSS + Prettier Shopify Starter Theme

Shopify Dawn theme with TailWindCSS & Prettier integrations

The starter theme includes an integration of:

  • Configured to use prefix: twcss- in order to not clash with Dawn’s existing styles

Trellis' Prettier config with Husky pre-commit hooks

  • Formats JS & CSS whenever a git commit is made
  • Setup your own VSCode to apply Prettier formatting when a file is saved (optional)

Other Noted Modifications

  • Set the default page width to 1440px and tweaked the desktop page width range to be 1200px to 1600px with a step adjustment of 10px (standard desktop width used at Trellis and allows for more finetuning)

Steps to Start Using this Starter Theme

  1. Fork this repository & enable actions in the repo's Actions tab.
‼️ When forking this repo, make sure to change the settings in the forked repo under Settings > Actions > General > Workflow permissions to be Read and write permissions and check Allow GitHub Actions to create and approve pull requests for the Theme Check & Lighthouse actions to run
  1. Clone the forked repo, navigate to the directory in your terminal, & run npm install.

  2. In the theme section of your Shopify admin you can connect to a GitHub repository via “Add theme” button.

Add a theme and connect it to your github repo

  1. In your terminal, navigate to the cloned repo directory, and use the Shopify CLI to login to your store with shopify login --store=mystore.myshopify.com and launch the development server with shopify theme serve.
‼️ If you are working on a development store and are signed in via your partner dashboard, you must add a separate user in that Shopify store with admin rights and sign in with this new user when logging in using the Shopify CLI

You can add users in the store Settings:

Where to add users in the store settings

Add Github secrets for Lighthouse CI Performance Evaluation Actions

‼️ This repo does not have the following secrets configured, which is why the Lighthouse action is failing.

First, make sure your Workflow permissions are set like below in order for the actions to run:

Workflow permissions settings

In your github repo, navigate to Settings > Secrets > Actions and add the following repository secrets:

SHOP_APP_ID & SHOP_APP_PASSWORD

  • Get values by navigating to https://mystore.myshopify.com/admin/apps/development, select the theme kit app, and copy the API key value for SHOP_APP_ID & Admin API access token value for SHOP_APP_PASSWORD (value starts with shpat)
  • Notes on how to get these values:
  1. Navigate to the Apps section in your Shopify admin and click the Develop apps button in the top right
  2. Then Allow custom app development
  3. You should be able to click the Create an app button
  4. In the configuration tab of your app, go ahead and check all the boxes for the Admin and Storefront API permissions
  5. The API key & Admin API access token will be in the API credentials tab

SHOP_STORE

  • mystore.myshopify.com (ex. trellis-sandbox.myshopify.com)

SHOP_PASSWORD

  • Need if Preferences > Password protection is enabled

SHOP_COLLECTION_HANDLE

SHOP_PRODUCT_HANDLE

LHCI_GITHUB_APP_TOKEN

  • To enable GitHub status checks via the official GitHub app, install and authorize the app with the owner of the target repo. If the repo is within an organization, organization approval might be necessary. Copy the app token provided on the authorization confirmation page and add it to your build environment as LHCI_GITHUB_APP_TOKEN

These secret values are used in the ci.yml github workflow:

Secrets shown in the workflow file

Common local development commands

  1. Before beginning any work, it is good practice to pull down the latest changes from the Shopify Dawn theme: git fetch upstream git pull upstream main

  2. Add upstream link if you get the error fatal: 'upstream' does not appear to be a git repository run: git remote add upstream https://github.com/Shopify/dawn.git or git remote add upstream https://github.com/TrellisCommerce/shopify-tailwind-starter-base depending on which repository you want to pull updates from

  3. Pull down changes from the theme editor: shopify theme pull -d

  4. Anytime you add a TailwindCSS class (remember to prefix it with twcss-), run the CLI tool to scan your template files for classes and build your CSS to assets/app.css: npx tailwindcss -i ./assets/app-tailwind.css -o ./assets/app.css --watch

  • Run this command in a separate terminal so it will continue to run while you are developing.
  1. Launch the local development server: shopify theme serve

goldpocket-games-theme's People

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.