MusePen Ecwid Widget Collection for Adobe Muse

Musepen Ecwid Widget collection for Muse

There are a lot of Adobe Muse users how would like to create a website in Adobe Muse that give the real ecommerce experience like amazon.com, flipkart.com etc but it was difficult to do as Adobe Muse only work with HTM, CSS, and JS.

Ecwid is an amazing e-commence platform that seamlessly integrates with your existing Adobe Muse website. Site visitor will get the convenience of checking out and browsing your products safely right from your site, and yes there is no Ifram or redirection used to show your cart in Muse. Simply drag-in-drop the various widgets to page and start doing you ecommerce business in Adobe Muse.

How to create a store in Adobe Muse

  • Create a store on http://www.ecwid.com. Add your Producs, payments etc.
  • With the help of our MusePen Ecwid Widget Collection add your store to your Adobe Muse Site.

In Musepen Ecwid Widget Collection you get following widgets to include in your Page

  • Product Browser Widget
  • Search Box Widget
  • Cart Widget
  • Horizontal Category Widget
  • Vertical Category Widget

Building A Store in Ecwid

In the further part of this page we will explain you how to use these widgets. Before you use these widgets you need to create a store and need to add your products at ecwid.com. Like below will help you understand on how to build a store in ecwid.com

How to Build a Store in Ecwid.com

Download and Install the Widget in Adobe Muse

Once you are done Creating your store at ecwid.com then download our widget from the link below.

Once you have the Musepen_Ecwid_Collection.mulib downloaded from the link above double click on it to add it to Muse Library. Once Added it will look like this.

installed Ecwid collection

 

To use these widgets you just need to drag and drop them in the page and need to customize it as per your need. Now we will explain each widget in the collection and how to use it.

MusePen Ecwid Product Browser Widget

This is the most important Widget in this ecwid collection. This is like a stage where everything happens. Products, categories, product details, check out process, registration etc  are shown here. Look at the various snapshots below

To add this to your Page Drag and Drop Product Browser Widget to the Page and open its Options Panel to Customize it.

  • MusePen Ecwid Product Browser Options Panel

    MusePen Ecwid Product Browser Options Panel

    Store ID : Enter your Store ID in this option so that the widget can connect to your store and show the details of your store.

  • Categories Per Row: By selecting this number you can decide how many categories are shown per row.
  • Products Per Column: Defines number of products in a column
    • Products Per Row: Defines number of products in a Row
  • Number Of Products In List Page : Defines number of products on one List page
  • Number of Products in Table Page : Defines number of products on one table page.
  • Default Category View : Defines the default view for products in categories. Possible values: list, grid, table
  • Default Search View : Defines the default view for search results. Possible values: list, grid, table.

MusePen Ecwid Search Box Widget

This widget allows you to add a search box in your page. When a visitor search any thing in the search box results are shown in the Product Browser Widget. In case product Browser Widget is not placed then results will be shown in a Pop Up window.

You can Format the  search field and Search Box with the help of this widget

search field and Search box

Lets talk about the MusePen Ecwid Search Box Options Panel.

MusePen Ecwid Search Box Options Panel

MusePen Ecwid Search Box Options Panel

  • Store ID:
  • Search Field Formatting
    • Width : Defines the width of Search Field.
    • Height : Defines the height of Search Field.
    • Border Width : Defines the Border Width of Search Field.
    • Border Color : Defines the color of the Border of Search Field.
    • Background Color : Defines the background color in  Search Field.
    • Font Size : Defines the font size of text entered in the Search Field.
    • Font Color : Defines the font color of text entered in the Search Field.
  • Search Button Formatting
    • Width : Defines the width of Search Box.
    • Height : Defines the Height of Search Box.
    • Border Width : Defines the Border Width of Search Box.
    • Border Color : Defines the Border color of Search Box.
    • Add Image : In case you want to add a custom image for this search box you can use this option to select the image from windows explorer or from Finder.

 

MusePen Ecwid Horizontal Category Widget

This widget allows you to add a horizontal category in your page as shown below

Horizontal Category showcase

Horizontal Category showcase

This widget only need to add store Id in the options panel and it will show all the categories of you page horizontally as shown in the screenshot above. This is a responsive widget so it will adjust itself as per the size given by you.

MusePen Ecwid Vertical Category Widget

This widget allows you to add a vertical categories in your page as shown below

vertical category widget

vertical category widget

You just need to add store Id in the options panel and it will show all the categories of you page vertically as shown in the screenshot above. This is a responsive widget so it will adjust itself as per the size given by you.

MusePen Ecwid Cart Widget

This widget allows you to add a fixed cart or shopping bag in your page as shown below.

Shopping bag

You just need to add store Id in the options panel and it will show all the shopping bag or cart as shown in the screenshot above. The moment any visitor add a product to card you will observe that the count in the shopping bag has increased.

 

You can place these items any where in your Adobe Muse Page. This gives you the ability to design your Store page as per your need. Please click on the link below if you wish to download this widget collection.

download Musepen Ecwid Widget Collection