NAV

Introduction

A collection of various snippets of CSS and other code to customise Online Stores based on the popular Ecwid.

My e-shop designer service and Theme Designer provide themes, and an easy way to tweak the look of Ecwid based stores. You may also like my Tabber app to easily add tabs to product descriptions.

This site provides additional snippets of code that complement these services, or can be used independently.

Featured products on home

Show a “featured products” category using the product browser widget.

In Ecwid, create a “featured products” category. If this needs to be hidden from the navigation, move the “featured products” category under another category that is disabled, this will hide it. Now add the featured products to the “featured products” category. Products can be in more than one category.

Set shop page and load Ecwid

On the home page, above any other Ecwid widgets you may have, add this code:

<script>
var ecwid_ProductBrowserURL = "http://www.my.shop.page/";
</script>
<script type='text/javascript' src='https://app.ecwid.com/script.js?1111111'></script>

This tells Ecwid the url of your shop page so that the product links go to that page instead of loading in the home page. Change the url to your shop page (probably a test url while in development, but remember to update it when you go live). Note this code needs to be before any other Ecwid code that may be on the home page.

On the home page, where you want the featured products to show, add this code:

<div>
<style>
/* hide the stuff at the top of the product browser that we don't want */
.ecwid-productBrowser-auth-mini,
.ecwid-productBrowser-auth-mini-horizontal,
.ecwid-productBrowser-head,
.ecwid-productBrowser-categoryPath,
.ecwid-results-topPanel{ display:none!important;}
</style>
<script type='text/javascript'>
xProductBrowser("categoriesPerRow=5","views=grid(5,5) list(10) table(20)",
  "categoryView=grid","searchView=list","style=","responsive=yes",
  "defaultCategoryId=2222222");
</script>
</div> 

This adds the product browser widget and tells it to display category 2222222. Change that number to the correct category id for your featured products category (how to get category id). The code hides all the stuff at the top of the product browser that you don’t want. The “views=grid(5,5) should show 5 products in a row if there is space.

Issues

Setting the ecwid_ProductBrowserURL should cuase Ecwid to show all products on that page, but sometimes it doesn’t seem to work, and products get shown on the same page as your featured products were listed. When this happens, the product name, and other things at the top of the Product Browser widget are hidden.

To fix this, we can add some special script.

Sample script that checks what is being displayed in the product browser, and hides/shows the applicable content.

<script>
/* function to show the product name, breadcrumbs etc. when not showing the featured products category */
Ecwid.OnPageLoaded.add(function(page){
    var pb_auth = document.getElementsByClassName("ecwid-productBrowser-auth-mini")[0];
    var pb_auth_h = document.getElementsByClassName("ecwid-productBrowser-auth-mini-horizontal")[0];
    var pb_head = document.getElementsByClassName("ecwid-productBrowser-head")[0];
    var pb_cat_path = document.getElementsByClassName("ecwid-productBrowser-categoryPath")[0];
    var pb_top_panel = document.getElementsByClassName("ecwid-results-topPanel")[0];
    var show_or_hide = 'display:block!important'; // default is to show the breadcrumbs, name etc.
    if(page.type == 'CATEGORY' && page.categoryId == 2222222){
        // 2222222 is the special featured products category, so hide the breadcrumbs, name etc.
        show_or_hide = 'display:none!important';
    }
    if(typeof(pb_auth) != 'undefined') pb_auth.setAttribute('style', show_or_hide);
    if(typeof(pb_auth_h) != 'undefined') pb_auth_h.setAttribute('style', show_or_hide);
    if(typeof(pb_head) != 'undefined') pb_head.setAttribute('style', show_or_hide);
    if(typeof(pb_cat_path) != 'undefined') pb_cat_path.setAttribute('style', show_or_hide);
    if(typeof(pb_top_panel) != 'undefined') pb_top_panel.setAttribute('style', show_or_hide);
});
</script>

If there are some elements you want to keep hidden, or always show, remove the appropriate lines from the CSS and code as required.

Product Browser Scroller

To tell Ecwid where to scroll to, add this div to define the scroll point.

<div id="ecwid_product_browser_scroller"></div>

When Ecwid changes “page” it scrolls to the top of the product browser.

On IE11, if th eproduct browser is offset from the left side, the scroll may hide the left side of the page. This only seems to be an issue on IE 11, not Chrome, Firefox, or Edge.

You can tell Ecwid where to scroll to by adding an empty div with id ecwid_product_browser_scroller.

Wordpress

For example in the Wordpress twentyfifteen theme, these lines:

</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
        <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>

could be chnaged to:

</head>

<body <?php body_class(); ?>>
<div id="ecwid_product_browser_scroller"></div>
<div id="page" class="hfeed site">
        <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>

In Wordpress, you may need to edit the theme header page to get the div in an ideal place.

The file to edit is probably called header.php, but some themes may be different. It will be in the folder: wp-content/themes/your-theme-name where your-theme-name is the theme you are using.

Edit that using a text editor and add the div. E.g just after the <body> tag.

Secondary button color

To change the text, background and border color of the smaller (secondary) buttons, use this CSS:

/* normal button state: */
.ecwid .ecwid-btn--secondary {
  color: black;
  border-color: black;
  background-color: white;
}

/* hover button state: */
.ecwid .ecwid-btn--secondary:hover {
  color: red;
  border-color: red;
  background-color: gray;
}

New Horizontal Category Tabs

Looking at the new CSS rules Ecwid use for the horizontal tabs, I see that these two rules are probably what you need to override:

this rule sets text color:

.horizontal-menu-container.horizontal-desktop .horizontal-menu-item > a{
  color:#4473A4;
}

this rule sets bg color and text color for hover:

.horizontal-menu-container.horizontal-desktop .horizontal-menu-item.horizontal-menu-item--hover > a {
  background: #75ABAE;
  color: #fff
}

Responsive videos in product descriptions

The youtube embed code should be wrapped in a div with special styling e.g.

<div style="position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/KwQwQS2qdfQ"
    frameborder="0"
    allowfullscreen>
</iframe>
</div>

If you use the Ecwid video embed button, or paste the embed code into the HTML, videos are embedded at a fixed size (e.g. width 500px)

Here is a technique to have the video fill the width available and be responsive. The video will resize on smaller screens and keep the aspect ratio correct.

You will need to use the HTML editor for the product description and chnage the video embed code. To use html mode, click on the <> icon in the top right of the product description editor.

In the example, I have removed the width and height form the embed code iframe, then added style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"

This is then wrapped in a div with style="position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0;"

The 56.25% is the aspect ratio of the video (16:9 in this case - 9 / 16 = 0.5625).

The above will be responsive, fill the width of the tab, and keep the video aspect ratio correct as it re-sizes.

Centering the video

Embed a video that is centered and occupies 80% of the available width:

<div>
<div style="width:80%; margin:0 auto; position: relative; padding-bottom: 45%; padding-top: 25px; height: 0;">
<iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    src="https://www.youtube.com/embed/KwQwQS2qdfQ"
    frameborder="0"
    allowfullscreen>
</iframe>
</div>
</div>

If you want the video to be centered and not fill the width, set the containing div width to be say 80% with auto left and right margins. i.e. in the div style, add width:80%; margin:0 auto;

As the video is now only 80% of the width available, the aspect ratio needs adjusting to 45% (56.25% * 80% i.e. .5625 * .8 = .45), so change the padding-bottom to 45% Now wrap the whole thing in another div.

If you need a simpler way to do this, there is another way using JavaScript that is explained near the end of this article. It is more complicated to set up, but once done, videos may be added easily without bothering with the edits describved above. That may be a better solution for clients who may need a simpler way to add responsive videos.

Move product description right

Move the product decription above the SKU field in the right side panel

<script>
 Ecwid.OnPageLoaded.add(function(page) {
 if (page.type == "PRODUCT") { jQuery("div.ecwid-productBrowser-details-descr").insertBefore(".ecwid-productBrowser-sku");
 }
 })
 </script>

Sometimes, you want the product description to be in the top of the right side panel instead of under the main image. This can be a better layout if the description is brief, and the product image is large or deep.

This can be done using jQuery and a script that runs when the Ecwid page has been loaded.

Webydo - more control over Ecwid widgets

Webydo is a great web design platform for designers, but it is sadly limited if you want to get in and modify the generated HTML or CSS. Or add the Ecwid widgets yourself.

Webydo has an Ecwid widget which works fine if all you want to do is add the Ecwid product browser widget to your page, it has settings to control the type of display: grid list etc, and search results, number of products to list etc. but can’t set the default category id for example.

Also, if you try to use the Webydo HTML widget to add some Ecwid code, that will not work well, because Webydo wraps all html widgets in an iframe which disconnects them form the page.

Here are some alternative ways to use Ecwid on your Webydo site that get around some of these limitations. The trick is to use the Webydo Page settings where you can add code to the head, top of body, bottom of body.

Add the Ecwid product browser widget manually without using the restricted Webydo Ecwid widget.

Sample ecwid product browser widget - centred 960px wide 200px below the top of the page. ** Add to the “top of body” code for the page.**

<style>
div#my-product-browser {
    width: 960px;
    margin: 200px auto 0 auto!important;
}
</style>
<div id="my-product-browser"></div>
<div>
<script type="text/javascript" src="https://app.ecwid.com/script.js?1003&data_platform=code&data_date=2016-08-01" charset="utf-8"></script>
<script type="text/javascript">
xProductBrowser(
    "categoriesPerRow=3",
    "views=grid(3,3) list(10) table(20)",
    "categoryView=grid",
    "searchView=list",
    "id=my-product-browser");
</script>
</div>


This can be added to the page in the top of body section. Some CSS is used to position the widget in the centre and set its width. You may need to add some media queries to change the width on smaller screen sizes.

Using this approach, gives you more control over the widget, and access to some more of the settings, for examle the default category to show. more info from Ecwid

add a minicart and/or buy now button for a product in a specific place on a page

Ecwid theme CSS for the mini minicart

/******************************************************/
/* minicart - mini - only show the basket total price */
/******************************************************/

/* total */
div.ecwid-minicart-mini-total {
    text-align: center;
    margin-top: 0px;
}
div.ecwid-minicart-mini-total .ecwid-minicart-mini-total-total{
    display:block;
    font-family: Raleway, sans-serif;
    font-size:32px;
    font-weight:800;
    text-transform:uppercase;
    color: #646464;
    margin-top:-6px;
}
/* container */
div.ecwid-minicart-mini-rolloverContainer-Mini{
    width:152px;
}
/* no border */
div.ecwid-minicart-mini-rollover{
    border:none;
    background: transparent;
    padding:0;
}
/* hide shopping bag text */
a.ecwid-minicart-mini-link{
    display:none;
}
/* hide items count */
div.ecwid-minicart-mini-rollover span.ecwid-minicart-mini-overlay-count,
div.ecwid-minicart-mini-rollover span.ecwid-minicart-mini-items{
    display:none;
}
/* hide the Subtotal label */
div.ecwid-minicart-mini-total span.ecwid-minicart-mini-total-label{
    display: none;
}
/* always_show_total_in_mini_mode */
div.ecwid-minicart-mini-rolloverContainer{
    display:block;
}
/* hide the unhovered minicart - we set the option to always show the subtotal, which means the hover state is always visible */
div.ecwid-minicart-mini .ecwid-minicart-mini-link,
div.ecwid-minicart-mini .ecwid-minicart-mini-label
{
    display:none;
}

Perhaps one of your Webydo pages features a few products, and you want to add a “buy now” button for them to give users a quick way to add them to their basket. In this example we also want to show the current total cost of the order on this page.

Style the minicart and buy-now button using CSS and put that CSS into your Ecwid CSS theme.

In this case, we style the mini version of the minicart to simply show the total price of the order in the basket.


Ecwid theme CSS for the buy now icon

Ecwid theme CSS for the buy now icon

/***************/
/* buynow-icon */
/***************/

.my-buynow-icon .ecwid .ecwid-btn--addToBag {
    width:52px;
    height:52px;
    background-color:#ff5a46;
    background-image: url(http://the.icon.url/buy-now-icon.png);
    background-size:cover;
    border-radius: 0px;
    box-shadow: none;
    min-width: 52px;
    padding: 0;
    margin:0;
}
.my-buynow-icon .ecwid .ecwid-btn--addToBag:hover {
    background-color:#ff5a46;
    background-image: url(http://the.icon.url/buy-now-icon.png);
    background-size:cover;
    border: none;
}
.my-buynow-icon .ecwid .ecwid-btn--addToBag:focus,
.my-buynow-icon .ecwid .ecwid-btn--addToBag:focus:hover {
    background-color:#ff5a46;
    background-image: url(http://the.icon.url/buy-now-icon.png);
    background-size:cover;
    border: none;
}
.my-buynow-icon .ecwid .ecwid-btn--addToBag:active,
.my-buynow-icon .ecwid .ecwid-btn--addToBag:focus:active {
    background-color:#ff5a46;
    background-image: url(http://the.icon.url/buy-now-icon.png);
    background-size:cover;
    border: none;
} 

/* hide the text */
.my-buynow-icon .ecwid .ecwid-btn--actionOK>span{
    display:none;
}

The buy now button is a simple square icon, and in this example, we have three products on the page.


Style to position our widgets

styling to position our widgets - code for head section of the page

<style>
div.my-minicart{
    position:absolute;
    z-index:5;
    top:200px;
    left:50%; /* vertical centre */
    transform:translate(250px, 0); /* 25px to the right of centre. (use -ve for left of centre) */
}

div.my-buynow-icon{
    position:absolute;
    z-index:5;
    left:50%;
}
div.my-buynow-icon.row1{top:350px;} /* row 1 */
div.my-buynow-icon.row2{top:550px;} /* row 2 */
div.my-buynow-icon.col1{transform:translate(-300px, 0);} /* col 1 */
div.my-buynow-icon.col2{transform:translate(300px, 0);}  /* col 2 */
</style>

Now, we have to add the Ecwid widget code to the top of body for this page, and position each widget using CSS.

Position the widgets relative to the top and vertical centre line of the site. This ensures that they will not shift left and right as the screen width changes.

Change the position from absolute to fixed if you don’t want these widgets to scroll with the rest of the page.


Widget code for top of body

Ecwid widgets - code for top of body for the page

<script type="text/javascript" src="https://app.ecwid.com/script.js?1003&lang=en"></script>
<script type="text/javascript" src="https://app.ecwid.com/script.js?1003&data_platform=singleproduct" charset="utf-8"></script>

<div class="my-minicart">
   <script type="text/javascript"> xMinicart("style=","layout=Mini"); </script>
</div>

<div  class="my-buynow-icon row1 col1">
    <div class="ecwid ecwid-SingleProduct ecwid-Product"
    itemscope itemtype="http://schema.org/Product"
    data-single-product-id="1234567">
        <div customprop="addtobag"></div>
    </div>
    <script type="text/javascript">xSingleProduct()</script>
</div>

<div class="my-buynow-icon row1 col2">
    <div class="ecwid ecwid-SingleProduct ecwid-Product"
    itemscope itemtype="http://schema.org/Product"
    data-single-product-id="1234568">
        <div customprop="addtobag"></div>
    </div>
    <script type="text/javascript">xSingleProduct()</script>
</div>

<div  class="my-buynow-icon row2 col1">
    <div class="ecwid ecwid-SingleProduct ecwid-Product"
    itemscope itemtype="http://schema.org/Product"
    data-single-product-id="1234569">
        <div customprop="addtobag"></div>
    </div>
    <script type="text/javascript">xSingleProduct()</script>
</div>

This code adds the mini “minicart”, and three “buy-now” widgets.

Sign out and/or clear cart

In some cases, perhaps running Ecwid in a kiosk, or public space, you may want to sign out any user who may have signed in, and you may also want to clear the cart of any products so that the next user of the system starts form a clean slate.

Script to sign out and clear cart on order confirmation

<script type="text/javascript">
// A drop-in HTML/JS script for Ecwid to force sign-out and clear the cart after an order is placed
if (typeof(Ecwid) == 'object') {
  Ecwid.OnPageLoaded.add(function(page) {
    if ('ORDER_CONFIRMATION' == page.type) {
      var localStoragePrefix = 'PSecwid__' + Ecwid.getOwnerId() + 'PS';
      var reload=false;
      var cart = localStorage.getItem(localStoragePrefix + 'cart');
      if(cart != null){
        localStorage.removeItem(localStoragePrefix + 'cart');
        reload=true;
      }
      var isLoggedIn = (localStorage.getItem(localStoragePrefix + 'token') != null);
      if (isLoggedIn) {
        var itemsToRemove = ['token','customerid','profile'];
        for (var i = 0; i < itemsToRemove.length; i++) {
          localStorage.removeItem(localStoragePrefix + itemsToRemove[i]);
        }
        reload=true;
      }
      if(reload) window.location.reload(true);
    }
  });
}
</script>

The code here is based on a script by Makfruit from Ecwid that is on Github here

Ecwid stores its state for a particular store in browser local storage using keys that contain the store ID. The code above reads the store ID form Ecwid, when the product browser widget loads the “ORDER_CONFIRMATION” page. It then checks if a user is signed in, and if, so, clears the local storage keys associated with that users account.

If you also want to clear the cart, you need to clear the local storage key ‘PSecwid__9999999PScart’ where 9999999 is the Ecwid store ID. We only clear the cart if it is not null, and then if any local storage has been cleared, we refresh the window.


Sign out and clear cart when a “reset” or “home” page is loaded

Script to sign out and clear cart on any page load

<script type="text/javascript">
// A drop-in HTML/JS script to force Ecwid sign-out and clear the cart when the page is loaded
var storeID = '9999999'; // place your store ID here
var localStoragePrefix = 'PSecwid__' + storeID + 'PS';
var reload=false;
var cart = localStorage.getItem(localStoragePrefix + 'cart');
if(cart != null){
    localStorage.removeItem(localStoragePrefix + 'cart');
    reload=true;
}
var isLoggedIn = (localStorage.getItem(localStoragePrefix + 'token') != null);
if (isLoggedIn) {
    var itemsToRemove = ['token','customerid','profile'];
    for (var i = 0; i < itemsToRemove.length; i++) {
        localStorage.removeItem(localStoragePrefix + itemsToRemove[i]);
    }
    reload=true;
}
if(reload) window.location.reload(true);
</script>

In some situations, you may want to clear the cart and sign out on a specific page, maybe the home page, so users starting a session from there have a clean account to start from.

In this case, you may not have the product browser widget on the screen to get the shop ID from. You could add the widget and hide it, then check for the “CATEGORY” page type instead of “ORDER_CONFIRMATION”. But as you probably know what store ID is being used, you can simply hard coded it, and run the script without needing the product browser widget on the page and waiting for the Ecwid.OnPageLoaded event.