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>
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.