Built online shop website with static site generator 11ty eleventy ecwid

Built online shop website with static site generator 11ty eleventy ecwid

Built modern online shop with SSG Static site generator

And yeah... on this article we want to share how to built modern online shop e-commerce using static site generator with eleventy 11ty integration ecwid. For first i'm sory for my english is bad, because i'm speak on bahasa - indonesia language.
Okay on this project we want to share how to built modern online shop website using eleventy aka 11ty with ecwid , eleventy is a static site generator blast and fast for SEO, and ecwid is online shop platform you can integrate with your payment gateway too...
This project is a open source code free download gratis, so you can change any code with you needed to help you develope modern static site generator online shop.

built modern online shop with static site generator

Test on google lighthouse peform and speed !!

Make sure on your device you have download node js → because we work with it.. and we need code editor for editing source code file, so you can Visual Code Editor →.

Download and install node + visual code editor, then you can open terminal for windows OS click on win logo then type cmd, then you can run this command node -v for check your node version, and you can also run npm -v for check your npm version.

Okay before download source code and run or install on your device, for first let me explain how this online shop SSG Static site generator work.

built modern online shop with static site generator

Home page is design with landing page concept, and integration for display lastest or new products and blog article.

built modern online shop with static site generator

On navigation we have build product page, so make your customer and visitor easy for check product information. this page is automaticly displaying all your product , so you can easy work with .md file or markdown format on posts folder.

built modern online shop with static site generator

Product details is ready for displaying all features product and spesification include with integration ecwid product id, on backend you can easy for create new edit or delete .md files, on shop folder.

built modern online shop with static site generator

Chart fungsional is ready if your customer or website visitor click add to chart or buy your product, include with integration your payment gateway.

built modern online shop with static site generator

And article page list , this page will fetch all your post blog article data in here. for create new or update you can found on posts folder, then update post what you needed.

built modern online shop with static site generator

Article detail - when your web online shop visitor click on article details, so this template will displaying your article details.

built modern online shop with static site generator

Contact Page will displaying information about your shop contact detail, like phone number, email, and address.

built modern online shop with static site generator

Bonus with all source code project we have develope with 11ty eleventy static site generator. of course this is free download and open source, so you can download and customises with you needed.

Let's Get Start Now built modern online shop static site generator

Donwload Source code online shop 11ty
Github Download
Clone with terminal just run

git clone https://github.com/mesinkasir/11ty-shop.git

Contibution with donation for support our team dev make other source code for the world.

Buy me a coffee ☕️ ❤️ ✌🏻
Donate Now or Hire Our Team


If you need to online deploy for first you need register and create account on github - and you can visit our repo https://github.com/mesinkasir/11ty-shop see on top navbar - and click fork , for clone this source code project on your repo. after you have clone repo, now you need to register and create account on modern static hosting, you can register on vercel or netlify just select one to register account and use github for easy way to register, after registration success now you need to integration github repo and deploy on your static host, for do that you need to click create new project, name it with what your domain name want, then select your github repo and deploy it...
And congratulations, now you have success run your modern online shop static site generator and make your e-commerce website live.


After download source code project you can move project folder on desktop, then we need accsess this folder using terminal, so open terminal bash and run cd C:\Users\yourpcname\Desktop\11tyshop need to change yourpcname with your device name, then we need to install source code project with run npm install , if you have trouble installation, so you can run npm update , after installation success now we can run and test deploy on your local server, run npm start and open localhost:8080 on your web browser.
And congratulations.. you have successfully to install modern online shop SSG.


built modern online shop with static site generator

Okay now we need to create account and register on ecwid →

You can register and select package you needed, for free version you have max 10 products. or you can read about ecwid package, so why use this headless e-commerce ?? of course for first technoloy with use ecwid we can settup online shop or e-commerce easy, you can settup shipping, grouping your product, create a product with multiple price and variant , and you can integration with your payment gateway !! sound good right.. and we can easy for integration with all web dev framework technology, and on this source code no need wory , because very easy to integration 11ty shop with your ecwid shop, just copy and paste your product id, that's it..!! and you can run your modern online shop built with eleventy static site generator

Okay now you need to login on ecwid dashboard then you can setting all configuration like shop name, shop address, invoice receipt digital ,shipping,and select payment gateway you have, and the last create your product on catalog menu.


After you have finishing settup and create product on ecwid headless onlineshop dashboard , now we can back on source code project, for first you can create new product on 11ty shop, open shop folder on source code project , then you can see all example product with .md file in here, for create new you can create new file and name it with your link url product and use .md file format, because we just work with markdown format. you can insert title, description, and features product, for product id we need to fecth api data from ecwid, so for do that, you can open ecwid dashboard and click on product, then you can see on link url will displaying your product id, just copy and paste to product_id fontformater markdown.
example product link : https://my.ecwid.com/store/xxxxxx#product:mode=edit&id=xxxxxxxxx&return=products id=xxx is your product id

Example format

title: Your product title in here
description: Your product description
cover: link your image cover product
features: Input detail features and spesification
product in here
product_id: copy product id from ecwid in here
date: 2022-11-24
- this is my tag
- this is my tag1
- this is my tag2
layout: layouts/shop.njk

Write your detail information about your product in here...

And yess.. very easy right !! with this source code project , now you can built modern headless online shop website with static site generator for fast and powerfull SEO solutions


If you need built online shop website fast and easy and can fetch description and all image product on ecwid headless online shop, so you can order our premium template.

built modern online shop with static site generator


built modern online shop with static site generator

Premium Online Shop 11ty

All project we build using eleventy 11ty you can download it free too...
Mobile11ty build android and website
Bootstrap11ty powerfull blog SEO
Text11ty for blogger
Thisis11ty wordpress thesis inspired
New modern cool11ty
Mesin kasir terbaru →
All source code project free download gratis →
Oke we hope this project help you for build modern website and blog using static site generator, and happy codding !!

Text Notes Update

Temukan aplikasi toko,aplikasi restoran,aplikasi bengkel, aplikasi sekolah, aplikasi invoice , aplikasi akuntansi , aplikasi ekspedisi disini.

Bang Resto Aplikasi Restoran
Aplikasi restoran cafe rumah makan sangat lengkap include website integrasi ,waitrers, kitchen ,kasir, admin, qr code menu digital , whatsapp online order dalam satu app.

Pembuatan Website Cepat dan SEO
Saatnya kini kembangkan website super cepat tanpa database dengan dukungan SEO di dalam nya.

Typography Hockey Computindo
Mesin Kasir , aplikasi kasir , aplikasi toko, aplikasi restoran, aplikasi bengkel, aplikasi sekolah, pembuatan website terbaru.

Lava Aplikasi Toko Grosir dan Eceran.
Kebutuhan untuk penjualan eceran grosir maka menggunakan aplikasi toko lavaapp adalah pilihan terbaik untuk toko minimarket bisnis usaha mu.

Mesin Kasir
Mesin Kasir terbaru untuk toko minimarket dan mesin kasir restoran cafe rumah makan.

Mesin Kasir Restoran
Restoran cafe rumah makan wajib menggunakan mesin kasir ini, lengkap aplikasi software program restoran waiters kitchen kasir admin all in one.

Mesin Kasir Toko
Sempurna dengan barcode system dan touchscreen metode untuk mesin kasir toko minimarket retail shop.

Pembuatan website modern terbaru
Buat web modern bersama kami dengan react, next, remix, gatsby , angular, svelte , blazor wasm untuk solusi terbarik pengembangan site mu.

Mr.RestoPos Aplikasi Restoran
Aplikasi restoran cafe rumah makan super lengkap dengan kemampuan waiters , kitchen display, kasir dan admin dalam satu app integrasi website resto cafe rumah makan.

Explore Notes

Product & Services

Dukungan produk dan layanan kami untuk membantu memajukan bisnis usaha mu.

mesin kasir online

Mesin Kasir

Pilihan mesin kasir terbaik dengan hardware pilihan.

modern website


Pengembangan website modern technology.

aplikasi kasir toko restoran


Aplikasi kerja untuk menunjang bisnis usaha mu.