Selling on Next.js websites with Ecwid
Next.js is a popular framework for developers that you can use to build a fast, attractive, and user-friendly website with a unique design. If your website is created with Next.js — 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 Next.js 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. Contact us if you’re a developer and need a premium Ecwid subscription for testing purposes.
Installing the plugin
Before you can start adding Ecwid ecommerce to your Next.js site, you need to install a special Ecwid plugin.
To install the plugin:
- Open your terminal and navigate into the website directory. For that, use a ‘cd’ command and the directory name, e.g., cd my-website.
Make sure you have previously set up your development environment and created the initial Next.js website structure.
-
Run the following command:
npm install @ecwid/nextjs-ecwid-plugin
That's it! You have added the plugin to your Next.js 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 Next.js 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 .jsx file of this page in the /app/ directory and open it with your text editor.
To create a new page for your store, create a new path with page.jsx file (e.g., /store/page.jsx) in the /app/ directory. - Add the following lines to the page file:
Replace 13433173 with your actual Store ID.'use client' import {ProductBrowser} from '@ecwid/nextjs-ecwid-plugin' export default function Store() { return ( <> <ProductBrowser storeId="13433173" /> </> ) }
- Save the file.
The page with your store will be available at http://localhost:3000 (e.g., at http://localhost:3000/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 .jsx file of this page in the /app/ directory and open it with your text editor.
You can also create a new page (e.g., /blog/page.jsx). - 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.'use client' import {BuyNowButton} from '@ecwid/nextjs-ecwid-plugin' 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:3000 (e.g., at http://localhost:3000/blog).
Publishing your website
After you're done creating and polishing a Next.js website — with your Ecwid store and/or Buy button(s) — locally on your computer, it’s time to publish it. This way, customers can finally access the site on the web and shop for your products. You can use any hosting provider for that.
To deploy your project, you can use a special service. Another option is to export the project as a set of html/css/js files and upload them to a server.
Related articles
Ecwid for Gatsby websites
Ecwid plugin for WordPress static sites generators