Webshop Building

Still with us, Ready to setup Shop? Let's start introducing some commerce into the mix ! On todays menu setting up points of sale in your project.

As for every build we start with a fresh copy of the Flamewerk Template.

For everybody new, you are one blog post away of learning to build Flamewerk apps read our setup of NodeJS, Yarn, Github and VS code. [

Flamewerk: Nuxt3 Startup Theme

🔥 Build Modern Webapps for Free Forever with one easy config, Deploy in less then 5min on any cloudprovider. Create a website, application, shop or community with super documentation and our community.

Flamewerk

](https://flamewerk.com/news/setup-installation) More documentation can be found at https://flamewerk.com/docs/setup

Okay that out of the way let's start.

For our e-commerce integration we will use Snipcart to povide us with a shopping cart. Signup for a free API key to start recieving payments. [

Add a Shopping Cart to Any Website in Minutes

Add a shopping cart to your site in minutes. Works with any site builder, CMS, and framework. 20 000+ merchants trust our e-commerce solution for their website. Join them!

Snipcart

](https://snipcart.com/) Today's focus is on the project.js file and products.js file. Make sure you have the following project.js settings defined.

layout: 'web',            // (default, web, app )

headertype: 'Maximum',    // Options: Tiny, Maximum, Application

footertype: 'Ecommerce',  // Options: Tiny, Minimal, Maximum, Ecommerce

shop: true,              // Enable Ecommerce

shopcurrency: 'eur',      // Default Currenty ( Should be an object)

snipcartid: 'CopyApiKeyHere', // Snipcart API

Setting up shop#

Example of a page: content/en/shop.md

---
title: 'Webshop'
description: 'meta description of the page'
---

:BlockShopProductsCategory{type="Product" category="New" max=4 title="Fresh Products" icon="👑" subtitle="Newest product releases and most popular items."} 

:BlockShopProductsShippingblock

Customizing a product in the Project.js inventory List:

      {
        id: 1,
        identity: "1",
        type: "Product", //Options Product, Digital, Subscription
        category: "New",
        title: "Hoody with zipper",
        description: "Simple Black with logo",
        stock: "low", //Options: Low & Out By default products are stocked
        price: {
          usd: 40,
          eur: 35,
        },
        image: "https://production.flamewerk.com/stock/product1.jpg",
        imagelocal: "/stock/product1.jpg",
        features: [
          "100% Extra hacker power",
          "Can be used as a Emo/Hardcore hoody",
          "Makes you look badass",
        ],
      },

That's it for the basics around adding products and a storefront to your project ! See you tomorrow for our final build example.