Ecwid for Next.js websites

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.

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:

  1. 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.
  2. 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:

  1. Choose a page on your site where you want to add the store. Find the .js file of this page in the /pages/ directory and open it with your text editor.
    To create a new page for your store, create a new file (e.g., store.js) in the /pages/ directory.
  2. Add the following lines to the page file:
    
    import {ProductBrowser} from '@ecwid/nextjs-ecwid-plugin'
    
    export default function Store() {
      return (
        <>
          <ProductBrowser
            storeId="13433173"
          />
        </>
      )
    }
    Replace 13433173 with your actual Store ID.
  3. 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:

  1. Choose a page on your site where you want to add a Buy button. Find the .js file of this page in the /pages/ directory and open it with your text editor.
    You can also create a new page (e.g., blog.js).
  2. Choose a place on your page where you want a Buy button to be displayed and add the following lines to the page file:
    
    import {BuyNowButton} from '@ecwid/nextjs-ecwid-plugin'
    
    export default function Store() {
      return (
        <>
          <BuyNowButton
            storeId="13433173"
            productId="102852327"
            isShowPrice={false}
          />
        </>
      )
    }
    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.
  3. 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

Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
0 out of 0 found this helpful
10
We use cookies and similar technologies to remember your preferences, measure effectiveness of our campaigns, and analyze depersonalized data to improve performance of our site. By choosing «Accept», you consent to the use of cookies.
Accept cookies Decline