Build an extensive online store with this advanced ecommerce widget. Ecwid is one of the most powerful and comprehensive ecommerce solutions available for Muse, providing you with a shopping cart, product categories, search capability, and a complete checkout process. Use our Ecwid Store integration widget to embed an entire store into your website, or use our included Ecwid Single Product widget to place single items into your individual product pages.
Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
Current Version: 1.8
Supported Devices: Desktop, Tablet, Phone
Release Log
1.8: Added support for clean URLs. (03/21/2018)
1.7: Added three pre-styled themes, selectable in the widget option panel (02/22/2018)
1.6: Updated default product ID's (09/28/2017)
1.5: Increased breakpoint control from 10px down to single pixels in "Hide in Breakpoint Range" settings (12/16/2016)
1.4: Minor bug fixes
1.3: Adds responsiveness and other upgrades to search bar and category tabs widgets, adds "Chameleon Skin" option which allows the Ecwid Store to automatically inherit text color from text on the same page (10/21/2016)
1.2: Fixed issue with Single Product Widget not displaying the correct data or not displaying a product at all, fixed height displaying incorrectly in Store and Single Product (03/16/2016)
1.1: Fixed category tabs not adjusting height correctly, product browser items not pushing down content, added new responsive horizontal tabs with dropdowns (03/11/2016)
1.0: Adds collapsible panel functionality and support for responsive Muse
L11.3: Added Single Product Widget, Fixed issues with sites hosted with https security certificates, misc. bug fixes and updates
Video Playlist
Setup
If you don't already have an Ecwid account, set one up at Ecwid.com.
Your Ecwid account becomes your "backend" where you manage your products, sales, customers, etc.
For more extensive details on setting up and managing an account, visit Ecwid.com and watch the tutorial video above.
For our widgets, you will need to grab the store number and product numbers from your Ecwid account area.
The widget folder in your library contains 2 separate widgets:
Ecwid Single Product Widget: This widget is ideal for selling a single product, or a few products. This option does not work with the shopping bag/cart system.
Ecwid Store: This option creates an entire store, complete with a cart system, search function, categories, etc.
Ecwid Single Product Widget
Drag the widget from the library and drop into your project in Design mode.
Place the widget where you would like your item to appear on your page.
Enter your store ID and product ID in the widget option panel. These can be found in your Ecwid account area.
This widget is fairly self-contained in terms of styling. The remaining options in the widget option panel allow you to show or hide certain features.
Note: The Single Product Widget cannot be used in addition to the Ecwid Store widget or embed code from Ecwid.
Ecwid Store
Drag the Ecwid Store widget onto the canvas in Muse Design Mode. You will notice that there are 4 separate elements appearing on the canvas:
Search Bar: This small widget allows for searching the items in your Ecwid store.
Shopping Cart: This widget tracks the items that are added to the cart system by the customer.
Category Tab: You can create categories in your Ecwid store area at Ecwid.com. Those categories will show up here.
Product Browser: This is the main area of your store where your items will be displayed.
Place each of the widget elements where you would like them to appear on the page.
Each widget will need to have the store ID entered in the option panel. Once the store ID is entered in all widgets, the store will funcction; showing all items you've created at Ecwid.com. You can preview at this point to see the default funtionality.
Search Bar
All that's needed in the Search Bar widget options is the store ID.
Shopping Cart
Enter your store ID.
Select a layout. Note that there are several display options. Some options allow for pinning to areas of the browser, others allow to be pinned to the categories tab. As you update the display type, you should see a preview in Muse Design mode.
Pinning and margin settings apear as options in the widget option panel as different display modes are selected.
Category Tab:
Enter your store ID.
Select either the horizontal or vertical tab type, and hover color.
Product Browser:
Enter your store ID.
Select a product layout: Grid, List, or Row. Each mode will display your products a little differently. Preview your page in browser to see the differences.
You will notice that row, column count, and products per page options below are enabled or disabled based on product layout selection.
The Enable Default Category allows a particular category to display by default on page load. Find the category ID in your Ecwid account.
The Chameleon Skin option is a new feature Ecwid has created that allows the color of elements in your store (such as text and links) to take on the color of similar items on your page automatically. We have integrated this feature into our widget. The effect is often subtle; and sometimes difficult to notice. While this feature is handy, it is somewhat experimental, and should not be relied on solely for styling.
The styling elements in your store, such as colors and button text are highly customizable, though require custom code. Advanced users can utilize the CSS style sheet in your Ecwid account area to edit these elements. Ecwid's support team and forum are good places to research customizing your store.