thomaskn / astro-shopify Goto Github PK

View Code? Open in Web Editor NEW

248.0 8.0 81.0 836 KB

A lightweight and powerful ecommerce starter theme to build headless Shopify storefronts with Astro.

Home Page: https://astro-shopify.frontvibe.com

License: MIT License

JavaScript 1.64% Svelte 17.56% Astro 67.46% TypeScript 12.70% CSS 0.63%

astro shopify ecommerce headless

astro-shopify's Introduction

Astro starter theme to build a headless ecommerce website with Shopify

The theme is built with Svelte but you can use any framework you like (React, Vue, Solid etc.) thanks to Astro. Tailwind UI free components are used for the design.

🧑‍🚀 Where to start

Create a .env file based on .env.example with your Shopify store url and your public and private access tokens
The credentials are used inside the /utils/config.ts file, you can update the API version there
Run npm install or yarn or pnpm install
Run npm run dev or yarn run dev or pnpm run dev

Shopify Configuration Guide

Create a new account or use an existing one. https://accounts.shopify.com/store-login
Add the Shopify Headless channel to your store
Click on Add Storefront
Copy/Paste your public and private access tokens to your .env file
Next, check Storefront API access scopes
- unauthenticated_read_product_listings and unauthenticated_read_product_inventory access should be fine to get you started.
- Add more scopes if you require additional permissions.

Shopify Troubleshooting

If you encounter an error like error code 401 you likely didn't set this up correctly. Revisit your scopes and be sure add at least one test product. Also make sure you are using the Storefront API and not the Admin API as the endpoints and scopes are different.
If you do not see a checkout sidebar, or if it is empty after adding a product, you need to add an image to your test product.

🚀 Project Structure

Inside the project, you'll see the following folders and files:

/
├── public/
├── src/
│   └── components/
│       └── Header.astro
│   └── layouts/
│       └── BaseLayout.astro
│   └── pages/
│       └── index.astro
│   └── stores/
│       └── cart.ts
│   └── styles/
│       └── global.css
│   └── utils/
│       └── shopify.ts
└── package.json

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There's nothing special about src/components/, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory.

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
`npm install`	Installs dependencies
`npm run dev`	Starts local dev server at `localhost:3000`
`npm run build`	Build your production site to `./dist/`
`npm run preview`	Preview your build locally, before deploying
`npm run astro ...`	Run CLI commands like `astro add`, `astro check`
`npm run astro --help`	Get help using the Astro CLI

⚡️ Lighthouse

astro-shopify's People

Contributors

Stargazers

Watchers

Forkers

imthedeveloper zenonmok bronifty yulduck holawanli i7eo husseins1 aquaqamelob shopemaa paulweezydesign jjcastro tripplen23 akritibhusal doggi-co masturw andyyoungp studiohic fucha-co alexmisfans seanrreid alyssadicarlo spdracer22 cawa0505 primallogic ellevet n-seine simotasca rema-droid aishablake tonyoconnell altoo-tecnologia crs19 jennyriess chrxs jwcastillo soelucas 2chainzmc mz0in akshyanshalenka roger120981 serbia580 bhaskarmurthy lyctea crazycodestar joesamdevops oqva-digital masande lazaeag jonasallencodes n2enterprise lexjm terrytse0705 gmarko afhm admatt01 rgclarke nziwo14483554 maxnice phungviettung cristian-cor gn13008 newton077 kpoeta1 allowebs pharmafelix deniskawata shimapi 3200pro brunohernandeze javisolans springmicrohost1 bleeckerj jericktwo martinalbanesi ciphore shaogx tiissmeyy topopelon christopher-aldred ai-deeplang

astro-shopify's Issues

Question: What is this template/theme missing?

Thank you so much for this incredible resource, Thomas. It looks really well done and that most thinkgs have been thought through.

I was wondering, because there are so many templates out there for various stacks that just show how to integrate things without being production ready, could you clarify from your point of view what this template is missing currently?

As in, if I were to build a store using this template, what would I need to do myself/remember to do in order to have something production ready (of course besides the things that are specific to a certain store like the page structure, content structure etc.)

Things like:

Caching
Analytics
CDN
Other integrations to Shopify that most likely will be needed.

I am asking from a point of ignorance :)

Thank you in advance.

shopifyShop name or url?

First of all, awesome work!

for the .env file, should shopifyShop be the name or the url? So "my-shop" or "my-shop.myshopify.com"?
I unfortunately get an error for both of them.

Error using name:

 error   fetch failed
  File:
    C:\Users\silve\Documents\web-dev\astro\astro-shopify\C:\Users\silve\Documents\web-dev\astro\astro-shopify\node_modules\undici\index.js:109:13
  Stacktrace:
TypeError: fetch failed
    at fetch (C:\Users\silve\Documents\web-dev\astro\astro-shopify\node_modules\undici\index.js:109:13)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async makeShopifyRequest (/src/utils/shopify.ts:38:20)
    at async Module.getProducts (/src/utils/shopify.ts:51:16)
    at async eval (C:\Users\silve\Documents\web-dev\astro\astro-shopify\src\pages\index.astro:20:20)
    at async renderPage (file:///C:/Users/silve/Documents/web-dev/astro/astro-shopify/node_modules/astro/dist/runtime/server/render/page.js:91:30)
    at async renderPage (file:///C:/Users/silve/Documents/web-dev/astro/astro-shopify/node_modules/astro/dist/core/render/core.js:81:20)
    at async renderPage (file:///C:/Users/silve/Documents/web-dev/astro/astro-shopify/node_modules/astro/dist/core/render/dev/index.js:108:10)
    at async handleRoute (file:///C:/Users/silve/Documents/web-dev/astro/astro-shopify/node_modules/astro/dist/vite-plugin-astro-server/route.js:152:20)
    at async run (file:///C:/Users/silve/Documents/web-dev/astro/astro-shopify/node_modules/astro/dist/vite-plugin-astro-server/request.js:46:14)

  Cause:
Error: getaddrinfo ENOTFOUND fulldev-storefront
    at GetAddrInfoReqWrap.onlookup [as oncomplete] (node:dns:71:26)

Error using url:

 error   Expected object, received null

Reproduction:

Clone repo
Add .env
run yarn install
run yarn dev

Hope you can help :)

Shopify images .webp

First of all, thank you for the awesome work!

I think now Shopify supports .webp resizes. In your code there is a seciton at src/components/ShopifyImage.svelte that prevent webp images to be resized.

    // If image is a webp, remove the .webp extension from the url
    // (Shopify image transformations don't work with webp)
    if (image && image.url.includes(".webp")) {
      return `${image.url.replace(
        ".webp",
        ""
      )}&width=${width}&height=${height}`;
    }

I ve tried to add some webp images into my product list and i wasnt' able to load them properly. Commenting that code everything is ok.

I hope this helps! ;)

Delete this issue

Solved, waiting to be deleted.

PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN?

in your example.env file you have :

PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN
PRIVATE_SHOPIFY_STOREFRONT_ACCESS_TOKEN

How do these map onto what shopify offers after creating and installing a custom app? I see they offer:
Admin API access token
Storefront API access token
API key
API secret key

Much thanks in advance - love the theme!

Structuring Metafields and Metaobjects

Hi, consequently I love how fast this headless Shopify solution is. It's such a great way to jumpstart into entering a market using tools that offers more features and options. One thing I don't understand though, is trying to grab both metafields and metaobjects from the API. I tried to make sense of it but always came up short.

I was wondering if you can nudge me in the right direction, and which files need to be changed?