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.

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.

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

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.

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.

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

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.

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

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

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

CLOUD INSTALLATION - ONLINE DEPLOY

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.

LOCAL INSTALLATION - OFFLINE DEPLOY

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.

WORK WITH ECWID

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.

INTEGRATION API PRODUCT FROM ECWID TO ELEVENTY 11TY ONLINE SHOP SSG

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

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

PREMIUM ONLINE SHOP

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.

PRO SHOP

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
BONUS CONTENT !!
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 !!