The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.
 
 
Thread Tools Display Modes
  #1  
Old 04-21-2015, 03:26 PM
Andrew Cawood's Avatar
Andrew Cawood is offline
Junior Member
 
Join Date: Apr 2015
Posts: 2
Question

Wrap text when displayying single item using HTML


I am using the single-item HTML code to display some "Recommended Products" on my site home page.
I would like to display 4 products alongside one another (when viewed on a desktop/laptop.)
I am finding that the "title" is not wrapping, so items with long names cause it to only display 2 items per line instead of 4. ( See my homepage, just above the "Training" section : http://companywise.co.za/ )

What do I need to add to the HTML to wrap the title field - I have tried various tweaks but nothing seems to work.

Current code for the first two items is:
Code:
<div style="float:left; margin: 20px;" class="ecwid ecwid-SingleProduct ecwid-Product ecwid-Product-37545202" itemscope itemtype="http://schema.org/Product" data-single-product-id="37545202"> <div itemprop="picture"></div><div class="ecwid-title" itemprop="title"></div> <div itemtype="http://schema.org/Offer" itemscope itemprop="offers"><div class="ecwid-productBrowser-price ecwid-price" itemprop="price"></div></div> <div itemprop="options"></div> <div itemprop="addtobag"></div> </div> <script type="text/javascript" src="http://app.eshop.co.za/script.js?4282146" charset="utf-8"></script> <script type="text/javascript">xSingleProduct()</script> 
<div style="float:left; margin: 20px;" class="ecwid ecwid-SingleProduct ecwid-Product ecwid-Product-37545217" itemscope itemtype="http://schema.org/Product" data-single-product-id="37545217"> <div itemprop="picture"></div></a> <div class="ecwid-title" itemprop="title"></div> <div itemtype="http://schema.org/Offer" itemscope itemprop="offers"><div class="ecwid-productBrowser-price ecwid-price" itemprop="price"></div></div> <div itemprop="options"></div> <div itemprop="addtobag"></div> </div> <script type="text/javascript" src="http://app.eshop.co.za/script.js?4282146" charset="utf-8"></script> <script type="text/javascript">xSingleProduct()</script>
Many thanks,
Andrew
  #2  
Old 04-21-2015, 05:55 PM
Rick G's Avatar
Rick G Rick G is offline
Ecwid Team
 
Join Date: Jun 2014
Posts: 1,271
Default

Quote:
Originally Posted by Andrew Cawood View Post
I am using the single-item HTML code to display some "Recommended Products" on my site home page.
I would like to display 4 products alongside one another (when viewed on a desktop/laptop.)
I am finding that the "title" is not wrapping, so items with long names cause it to only display 2 items per line instead of 4. ( See my homepage, just above the "Training" section : http://companywise.co.za/ )

What do I need to add to the HTML to wrap the title field - I have tried various tweaks but nothing seems to work.

Current code for the first two items is:
Code:
<div style="float:left; margin: 20px;" class="ecwid ecwid-SingleProduct ecwid-Product ecwid-Product-37545202" itemscope itemtype="http://schema.org/Product" data-single-product-id="37545202"> <div itemprop="picture"></div><div class="ecwid-title" itemprop="title"></div> <div itemtype="http://schema.org/Offer" itemscope itemprop="offers"><div class="ecwid-productBrowser-price ecwid-price" itemprop="price"></div></div> <div itemprop="options"></div> <div itemprop="addtobag"></div> </div> <script type="text/javascript" src="http://app.eshop.co.za/script.js?4282146" charset="utf-8"></script> <script type="text/javascript">xSingleProduct()</script> 
<div style="float:left; margin: 20px;" class="ecwid ecwid-SingleProduct ecwid-Product ecwid-Product-37545217" itemscope itemtype="http://schema.org/Product" data-single-product-id="37545217"> <div itemprop="picture"></div></a> <div class="ecwid-title" itemprop="title"></div> <div itemtype="http://schema.org/Offer" itemscope itemprop="offers"><div class="ecwid-productBrowser-price ecwid-price" itemprop="price"></div></div> <div itemprop="options"></div> <div itemprop="addtobag"></div> </div> <script type="text/javascript" src="http://app.eshop.co.za/script.js?4282146" charset="utf-8"></script> <script type="text/javascript">xSingleProduct()</script>
Many thanks,
Andrew
Hi Andrew,

Thank you for contacting us.

I see that you wish to display four products in your website here: http://companywise.co.za/

This can be achieved by two methods:

1. Specify the width of all embedded products at once using CSS:
Code:
.ecwid-SingleProduct {
	width: 210px;
	text-align: center !important;
}
You will need to add this code at the end of your Custom CSS theme in Ecwid control panel > System settings > Design.

2. Or you can set the width of each embedded product separately, by specifying it in the integration code itself in the style property:
Code:
<div style="width: 210px; float:left; margin: 20px;" class="ecwid ecwid-SingleProduct ecwid-Product ecwid-Product-37545202" itemscope itemtype="http://schema.org/Product" data-single-product-id="37545202"> <div itemprop="picture"></div><div class="ecwid-title" itemprop="title"></div> <div itemtype="http://schema.org/Offer" itemscope itemprop="offers"><div class="ecwid-productBrowser-price ecwid-price" itemprop="price"></div></div> <div itemprop="options"></div> <div itemprop="addtobag"></div> </div> <script type="text/javascript" src="http://app.eshop.co.za/script.js?4282146" charset="utf-8"></script> <script type="text/javascript">xSingleProduct()</script>
As a result, your products will look like this: http://take.ms/5li0z
Thank you.
__________________
Ecwid API and App Market Team
Ecwid Developer Website
  #3  
Old 04-22-2015, 01:12 PM
Andrew Cawood's Avatar
Andrew Cawood Andrew Cawood is offline
Junior Member
 
Join Date: Apr 2015
Posts: 2
Default

Great, thanks, used the 2nd suggestion and it does what I want.
Regards,
Andrew
 
The information in this thread might be outdated
If the solution did not help, please, check our Help Portal or contact Ecwid Team.

Tags
wrap text

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:01 AM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.