EcwidPro (v2) Quick Start Guide

Ecwid is an user-friendly e-commerce platform that helps to easily create a bold, easy to use online store and start selling anywhere online or in-person. Ideal for small and medium sized businesses. Used by hundreds of thousands merchants in 175 countries.

Ecwid is a cloud-based platform, it allows:
  • easy integration into an existing Rapidweaver project.
  • selling on your Website, Instagram, Facebook, Amazon, Google Shopping, and TikTok.
  • selling in a blog or even a mobile app.
All Ecwid storefronts are synced and managed from one control panel:
  • setup and organize your products.
  • manage sales and stock availability.
  • sell digital and tangible goods.
  • accept credit card payments.
  • manage customers and orders.
  • create and manage discounts as well as marketing campaigns
  • track and respond to orders and much more.
  • Ecwid is certified Level 1 PCI compliant.

Although the control panel allows some customizations of your store's look, it is limited, unless you use additional CSS and Ecwid Javascript API.

That's where EcwidPro comes in! We have done all the work for you, and with the use of our stacks you can easily style and control your Ecwid Store to the smallest details. You can even lock the style of the store, so that a setting in the control panel does not disrupt your design.
  • Just double click on the downloaded ‘.dmg’ (image file), once it opens, double click on the Axyn_EcwidPro stack bundle to install into Rapidweaver
  • Sample projects are included in the image file, and can be found under the ‘Projects’ folder.
Prior to upgrading from Axyn Ecwid Stacks (v1.x), please disable it from the Rapidweaver "preferences", please refer to picture on the right.
Start by dropping the Base Stack onto a page on which you plan to use anyone of the other Ecwid Stacks.

Replace the demo store ID (1003) with your Ecwid Store ID. It is located on the bottom left of your Ecwid Store Dash Board.

Your store catalog may open in a popup if you added only store extension stacks to your site page (shopping bag icon, search box, store menu or single product cards/Buy buttons), but didn't add the Store Stack to that page. .

To show content on the page instead of popups, you can either add your store catalog to the page, OR, in case you don't want to add your store catalog to this page, you can redirect customers to another page with your Store Stack, and get rid of the popups.

ADVANCED: you may have more than one Store Page per project as well as multiple stores in the same project. You can direct the results to ANY of these pages.
The Store ID is a unique number assigned to every Ecwid store account. You will need enter it into the Base Stack so it connects to your Ecwid account. The Store ID is displayed in the bottom left corner of every page of the Ecwid Control Panel.
Ecwid assigns each category its own unique ID. You can retrieve it in a couple of different ways.

Using the browser address bar:
  • Navigate to a category. The number that you can see at the end of the address bar is your category ID. Usually preceded by "c/" for example "/c/20566121"
From your Ecwid account control panel:
  • Go to Catalog Categories.
  • Select a category for which you need to get the ID.
  • Copy the ID from the browser address bar. Select the number after “id=” — that's the ID of a category.
Next, drop the Store Stack onto the page.

Please notice that the Stored ID and Store Path settings will be the same as in the Base Stack, as it is shared by all Ecwid Stacks in the same page. Shared custom settings have a blueish highlight and a blue bar on the left.

You can already preview your store without changing any of the default settings.


Product Category to Display: select this option if you want to display only one product category on this page.

Expand categories: select this option if you want to display your entire store (all categories and products) in one page.

# of items per: select the maximum number of items to display in the category page and in the search results page. If there are more items than the maximum number, a page navigation will display at the bottom so that the customer can view multiple pages.

Legacy controls: only works with earlier Ecwid Stores. If you enable these controls and there is no change in the appearance of your Ecwid Store, then your store is likely to be too new to support these legacy features.
Now that you have your store already working, it's time to style it!

The Customizer Stack now features custom settings that follow Ecwid's workflow. Additionally, many custom options can now be easily added via child stacks.

The edit main panel of the customizer is divided into 5 sections, controlling different element of the Ecwid Store.
  • Fonts: add as many local fonts as needed to give your store the typography that matches that of the website.
  • Elements: use these stacks to style particular elements or classes.
  • Buttons: use these stacks to style any or all Ecwid buttons in your website.
  • Checkout: style different areas of the cart/checkout.
  • Widgets: these child stacks are used to style the Product Stacks, the Random Product Widgets or the Pinteres Widget.
The Customizer Stack options are organized into sections that reflect the way Ecwid names different pages of the store, as well as the Ecwid dashboard.

Custom items pane is divided into six (6) sections, that controls the style or behavior of the Ecwid Store;
  • Edit Mode: option to hide the all the child stacks in edit mode. All styles and options set in the child stacks are still active while hidden.
  • SEO: in this area you can enable clean URL's, which may in turn increase your ranking.
  • Basic Options: use these basic options as a starting point to style your store. Then enable the advanced color and advanced options to customize the Ecwid to the smallest details.
  • Storefront Page: controls and styles the main store page. Style or hide the root category tiles. Choose whether to display, hide or style items such as favorite products, breadcrumbs or the footer menu.
  • Category Page: controls and styles products of a particular category. Choose what to display or to hide.
  • Product Page: controls and styles the product details, including layout and what to display.
  • Product Page Sidebar Layout: controls the layout/order of the sidebar in the product page.
A good start to begin customizing your store is to enable the the basic store colors:
  1. Enable Auto Font: especially when using a standard RW template, Ecwid will try to use the same fonts as the theme, such as the headers and paragraphs. To insure that your store uses the exact fonts that you want, please use the Font Stack within the Customizer Stack.
  2. Enable Basic Store Colors: use the basic color to do the initial customization of your store. It changes all paragraph color, the link hover, most button, and the price colors. Again, these are very general applied color options, it does not affect all elements.
  3. Enable manual background color: by default Ecwid sets the store background to transparency, so that the background colors of your website are automatically displayed. Use this setting to set the Store container to a color of your choice.
As a next step you can continue to apply more and more styles to different elements or areas of the Ecwid Store such as:
  • Advanced Color Options: here you can apply specific colors to specific elements or areas.
  • Enable Font Size Options: allow you to apply custom font sizes to specific elements or areas.
  • Base text size: set the default base font size for the entire Ecwid store to a new default size.
After playing with each setting you can use the RW preview mode to review the style changes to your store and continue customizing as necessary, without having to publish it first.

More sections will be added soon!

Stacks Image 12
© Copyright 2018-2019 - All rights reserved.

This website uses cookies. By continuing to browse the website you agree to our terms & conditions and to our privacy policy.