Selling on Gatsby websites with Ecwid
Gatsby is a popular framework for developers that you can use to build a fast, attractive, and SEO-friendly website. If your site is created with Gatsby — or if you’re considering using this static site generator tool — and you plan to sell products online, you can easily add Ecwid ecommerce to any page of your site with the help of Ecwid plugin. You can add a whole store, or you can add individual products in the form of Buy buttons.
Ecwid is an ecommerce platform that allows you to start your online business in a few steps. To sign up, you will only need an email address. In addition to selling on your Gatsby website, you can use a wide range of sales channels with Ecwid, including Facebook, Instagram, and marketplaces.
You can use the following instructions yourself — if you’re building the website on your own — or share them with your website developer.
Installing the plugin
Before you can start adding Ecwid to your Gatsby site, you need to install a special Ecwid plugin.
To install the plugin:
-
Open the Gatsby command line interface and add the plugin as a project dependency by running the following command:
npm install @ecwid/gatsby-plugin-ecwid
Make sure you have previously set up your development environment and created a website. - Add a plugin to your site in your gatsby-config.js file.
That's it! You have added the plugin to your Gatsby website.
Now you can add storefront or Buy buttons to any page of your static site.
Adding Ecwid ecommerce
In the plugin, there are two components available:
- ProductBrowser — the component for adding your storefront
- BuyNowButton — the component for adding Buy buttons
Adding a storefront
You can add your whole Ecwid storefront to any page of your Gatsby website using the ProductBrowser plugin component. After that, customers will be able to browse the store for all the products that you have created and enabled in your Ecwid admin.
To add a storefront:
- Choose a page on your site where you want to add the store. Find the .js file of this page and open it.
You can also create a new page for your store (e.g., src/pages/store.js). - Add the following lines to the page file:
Replace 13433173 with your actual Store ID.import {ProductBrowser} from '@ecwid/gatsby-plugin-ecwid' export default function Store() { return ( <> <ProductBrowser storeId="13433173" /> </> ) }
- Save the file.
The page with your store will be available at http://localhost:8000 (e.g., at http://localhost:8000/store).
Adding a Buy button
Buy Buttons allow you to add individual products with purchase buttons and a checkout option to your website. You can use this option if you don’t want to add a whole storefront or if you want to feature some products on other site pages (e.g., in a blog).
To add a Buy button:
- Choose a page on your site where you want to add a Buy button. Find the .js file of this page and open it.
You can also create a new page (e.g., src/pages/blog.js). - Choose a place on your page where you want a Buy button to be displayed and add the following lines to the page file:
Replace 13433173 with your actual Store ID and 102852327 with the Product ID of a product that you want to add the Buy button for.import {BuyNowButton} from '@ecwid/gatsby-plugin-ecwid' export default function Store() { return ( <> <BuyNowButton storeId="13433173" productId="102852327" isShowPrice={false} /> </> ) }
- Save the file.
The page with a Buy button will be available at http://localhost:8000 (e.g., at http://localhost:8000/blog).
Publishing your website
After you're done creating and polishing a Gatsby website — with your Ecwid store and/or Buy button(s) — locally on your computer, it’s time to publish it.
Gatsby allows you to build, preview and host your website for free on Gatsby Cloud. It will have a gatsbyjs.io domain. In case you want to use another domain, you can always connect a custom domain.
Learn more about deploying and hosting your Gatsby website →
Related articles
Ecwid for Next.js websites
Ecwid plugin for WordPress static sites generators