Quantcast
Channel: Maca is Rambling » e-commerce
Viewing all articles
Browse latest Browse all 6

How to Create a Fully Functional Product Catalog with Ecwid

0
0

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: http://www.ecwid.com
  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 {
      display:none;
    }
    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 http://www.userlogos.org/node/16132

Viewing all articles
Browse latest Browse all 6

Latest Images

Trending Articles





Latest Images