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 01-23-2017, 02:21 PM
luca sgariglia's Avatar
luca sgariglia is offline
Junior Member
 
Join Date: Jan 2017
Posts: 2
Default

Grid design


Hi there, i am trying to change the grid size on the category products like this site :
http://www.asos.com/activewear/men/c...hop|activewear
is it possible in ecwid? thanks.
  #2  
Old 01-31-2017, 07:39 PM
Antea's Avatar
Antea Antea is offline
Ecwid Team
 
Join Date: Nov 2015
Posts: 381
Default

Quote:
Originally Posted by luca sgariglia View Post
Hi there, i am trying to change the grid size on the category products like this site :
http://www.asos.com/activewear/men/c...hop|activewear
is it possible in ecwid? thanks.
Hello!
I'm Anna, Ecwid Customer Care team, thank you for the message!

Ecwid store elements can be customised with the help of CSS codes, please refer to this article for the details and instructions: https://support.ecwid.com/hc/en-us/a...e-Ecwid-design

I have checked the link you provided and developed a CSS code that will help re-design the product title and price in the grid view, so the products look the following way:



To apply this change, please:

1) go to your Ecwid Control Panel > Settings > Design 

2) click "New CSS theme" button to create your custom CSS theme

3) set the new theme's name and add the following code to the corresponding field:

Code:
.ecwid-productBrowser-productsGrid .ecwid-productBrowser-productNameLink a {
margin-left: 15px !important;
font-size: 14px !important;
}

.ecwid-productBrowser-productsGrid-productCostFragment span.ecwid-productBrowser-price-value {
    margin-left: -240px !important;
    color: black;
    font-size: 16px;
    font-weight: 800;
}

.ecwid-productBrowser-productsGrid-productCostFragment {
    margin-top: -15px !important;
  }
4) click "Activate" and save the changes.

In case you have a custom CSS theme already, you can add the code to the existing theme.

Please, note that the numeric and color values in the code can be changed, so the code can be adjusted to your own website's look.

I hope this information helps.

If you have any further questions, we will be glad to help.
Kind regards,
__________________
Anna,
Ecwid Customer Care Team

More tips and hints on Ecwid use in our Help Center

Please click Thanks if my reply helped you.
  #3  
Old 01-31-2017, 08:56 PM
luca sgariglia's Avatar
luca sgariglia luca sgariglia is offline
Junior Member
 
Join Date: Jan 2017
Posts: 2
Default grid design

hi there, i enter the code but first it doesn't look like the asos website and also broke my design....
  #4  
Old 02-12-2017, 07:35 PM
Una Q's Avatar
Una Q Una Q is offline
Ecwid Team
 
Join Date: Nov 2016
Posts: 151
Default

Hello, Luca!

Thank you for contacting us. I am sorry for the delay in answer!

Basically, the code, which is given above, changes product name and price positions in a greed view. You can alter the values in the code as you want and adapt it to your needs.

Could you please clarify what exactly went wrong with your design? Also, it would be very helpful if you provide a couple of screenshots and the link to your website, so I will be able to inspect it more thoroughly. Thank you in advance!

Best regards,
Una Q., Ecwid Support Team
 
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

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 03:57 PM.
Powered by vBulletin® Version 3.8.11. Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.