The Deno shop! Built with Deno and Fresh, powered by Shopify, and deployed to the edge with Deno Deploy.
Using SSR, islands architecture, and being deployed close to users, this shop has a perfect Lighthouse score of 100. Learn how you can build an e-commerce site with a perfect Lighthouse score.
- Clone the repository
- Set up Shopify credentials in the
.env, follows.env.example. - Start the project in local mode:
deno task start
- Create a new account or use an existing one. https://accounts.shopify.com/store-login
- Create a new app. https://<yourshopname>.myshopify.com/admin/settings/apps
- Once your app has been created, select use it. Then select "Storefront API integration" link
- Next, check Storefront API access scopes
unauthenticated_read_product_listingsaccess should be fine to get you started.- Add more scopes if you require additional permissions.
- If you encounter an error like
error code 401you 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 theStorefront APIand not theAdmin APIas 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.
Sign in to dash.deno.com, create a new project, and then link to your clone version of the repository. Please ensure add shopify secret before link:
Today’s consumers are more demanding than ever, especially when it comes to shopping online. These experiences must feel intuitive and snappy. Even a 100-millisecond delay in load time can hurt conversion rates by 7%.
Our merch store, built with Fresh and Shopify’s storefront API, is server-side rendered (SSR) with some islands of interactivity and deployed close to users on the edge. Sending only what the client needs keeps the site lean and fast, earning it a perfect Lighthouse score.
Check out our tutorial that teaches you how to build an e-commerce site with a perfect Lighthouse score.