5 Awesome Ecwid Tips for WIX Site Owners

Wix is an amazing website builder with unprecedented drag-and-drop features that can allow anyone to build a website quickly and easily. Ecwid is an incredibly powerful eCommerce solution that seamlessly integrates Wix.

Ecwid is a perfect match when added to WIX to help you build the e-commerce platform of your dreams. In this vlog post, you will find five concise videos teaching you to add your Ecwid store to WIX, improve customer experience and design your Ecwid store to match your brand.

My 5 Ecwid tips for Wix site users are to save money by using Ecwid eCommerce in Wix, add menu links to your Ecwid store, resize the mini cart widget, use the horizontal category menu in Wix, and design your store to match your brand.

#1. Save Money

Before we begin, your Ecwid e-commerce store should be integrated to your WIX site.  This is a big money saver as you won’t need a Wix eCommerce theme. The video below demonstrates how to add your store to your WIX site using the Ecwid e-commerce app from the WIX App market.

  1. Log in to your Wix account.
  2. Select the site you would like to add a store to > Click Edit site.
  3. Click Add Apps
  4. Type “Ecwid” in the search bar and select the Wix Ecwid App
  5. Click +Add to Site → +Add App
  6. Once you add the app, it will show sample products until you connect to your store. Connect your Ecwid store to sell your products on your website.
  7. If you do not have an Ecwid store yet, fill in the fields of the registration form, click ‘Create Account’ and follow the signup instructions.
  8. Grant the app permissions by clicking Accept.
  9. Your store is now connected to your Wix website!
  10. Save the changes and publish your site

#2. Add Menu Links

The tutorial video below demonstrates how to link to Ecwid store items (like categories or products) from your WIX menu to your Ecwid store. This very simple tip can help improve customer experience in your store by linking directly to products or categories. It is super easy to set up and requires only a couple of simple steps.

In your web browser (such as Safari or Google Chrome), open your published website in one tab, and your Wix Editor in another tab :

  1. In your Wix Editor
  2. Click on Menu → Manage Menu
  3. Then click on Add a link → Web Address.

This is where you will be able to add the category you to which you wish to link in your Ecwid store :

  1. In the tab containing your published website
  2. Right click on the link to the category or product you would like to link to
  3. Select “Copy Link”.

Go back to your Wix Editor

  1. Paste the first product or category you wish to link to
  2. Name the tab according to the menu item you wish to show. Make sure to click on “Current window.”
  3. Click on “Done”.

Also, make sure to have links open in the “current window” when configuring menu items or it will be confusing for customers. Imagine clicking on product categories in your site menu and having them open in new windows — such behaviour would not be user friendly.

And there you have it! You have now created a menu item in your Wix site that links to a category in your Ecwid store. This tip works may you have a free or paid WIX account. For better productivity, open your published site in one tab, and your WIX editor in another tab within the same browser.

#3. Resize the Ecwid Mini-Cart Widget

You may want to resize the mini-cart widget in WIX. You will need the code below for this tutorial.

.ecwid-minicart {
-ms-transform: scale(0.7, 0.7); /* IE 9 */
-webkit-transform: scale(0.7, 0.7); /* Safari */
transform: scale(0.7, 0.7);
}
  1. In your Ecwid Seller Control Panel → Click on Design
  2. Create a Theme or edit your current theme if you already have one. If you do not already have a theme, check out this tutorial to learn how
  3. Copy the code above and paste it to your theme
  4. Simply edit the size by changing the numbers until you find the size you are looking for
  5. Save and make sure your theme is active

If you need to resize the position of the mini cart iframe (because the cart is smaller than the frame it is in for example) you can adapt the cart to the frame with the following code

.ecwid-minicart {
position: absolute !important; 
top:0;
}

#4. Use The Horizontal Category Menu

In the tutorial video above, you will learn how to add horizontal categories to your Ecwid store in your WIX website. The process is the same if you would like to display vertical categories.

Here is the code you need to activate Horizontal Categories (CSS Code Template).

.horizontal-desktop .horizontal-menu {
position: fixed;
top: 0;
left: 0;
margin-bottom: 10px;
margin-left: 0px;
margin-right: 5px;
margin-top: 5px;
width: 560px;
}
table.ecwid-productBrowser-subcategories-mainTable {
display: none;
}
div.ecwid-productBrowser-categoryPath {
display: none;
}
.ecwid-productBrowser {
margin-top: 38px !important;
}
.ecwid-productBrowser-head {
margin-bottom: 30px !important;
}

#5. Design Your Ecwid Store in Wix

So you customized your store design in your Ecwid backend, but the changes are not showing in your Wix front-end. No worries, at the end of this video, you will know how to design your Ecwid store in Wix.

  1. In your Wix editor → Go to your store page
  2. Click anywhere on your store → Select Settings
  3. You will be able to design your store here
  4. Edit items as you would in Ecwid’s backend design panel
  5. Then Save and publish

Also, keep in mind that these changes will also only apply if you have the Standard CSS theme in your Ecwid Control Panel. If you have a custom CSS theme activated, only background colour and transparency settings will apply.

Subscribe to my Youtube channel if you would like more Ecwid tutorials, tips and tricks. Also, check out my Ecwid eCommerce Power Course to learn how to set up Ecwid to drive targeted traffic starting day one!