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 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.