Thread: Grid design
View Single Post
  #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.