How to Create a Fully Functional Product Catalog with Ecwid

  • SumoMe

Ecwid is a free online store known for its compatibility across any existing site, its ease of use, and its speed. I have used it myself and I can say that it is indeed the easiest e-commerce implementation that I ever worked with.

There may be times that you want to have a product catalog only, that is without the actual checkout button. What if you just want to showcase your products and hide the “Buy” or “Add to Cart” buttons? As a web developer, I have encountered this problem myself and saw that it is hard to do this in most e-commerce software. However you can easily do this with Ecwid and it will also save you a lot of time coding a product catalog from scratch. Here’s how:

  1. Create an account in Ecwid by going to their website and signing up:
  2. Once signed up and you are logged in to your account, you can start populating your would-be catalog with your products by going to Control Panel > Catalog. Here you can also create different categories and product types for your items depending on how you want to organize them.
  3. Ecwid works by copying and pasting Ecwid widget codes to your website. You can access these in the Dashboard of your Ecwid account (the Dashboard link is located at the top right corner). Now, there are a couple of widgets there available to you but what you DON’T want to include there is the Bag Widget Code. Though its says there that it is recommended, you will only be using it for a catalog and you might as well leave it out.
  4. Hide stuff like “Add to Cart,” “Qty,” and sign in links by including this CSS code to your stylesheet:
    td.ecwid-productBrowser-productsTable-buy,  div.ecwid-AddToBagButton,  div.ecwid-productBrowser-details-qtyPanel, div.ecwid-minicart { display:none !important; }
    div.ecwid-productBrowser-auth {  display: none; }
    div.ecwid-productBrowser-auth {  display: none; }
    table.ecwid-Checkout-blockTitle button, div.ecwid-Checkout-PasswordBlock {
    div.ecwid-Checkout-blockTitle button.gwt-Button{
    display: none;
    html#ecwid_html body#ecwid_body div.ecwid-productBrowser-details-inStockLabel { display: none; }

And you are done!

Image credit to Ecwid and

About maca

Hello, my name is Karlo Macariola. I once dreamed to be a painter or an animator but when I typed my first line of code I immediately fell in love with programming. Today my passions are with web development and web design though sometimes I still withdraw to my first love which is drawing. DeviantArt | Twitter | Facebook
This entry was posted in Web Development & Design and tagged , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *