Customise Product List

Technical
1

Hello, I would like to customise the product list (I mean the left and right columns) to add more words so I can have something similar to the product list of the attached image. I need to add CSS code, but what exactly ?

Kind regards,

Pierrick

Screenshot 2022-07-18 at 18.03.13
Screenshot 2022-07-18 at 18.03.131122×898 91.6 KB

2

Hi @Pierrick,

Please head to Custom Codes > Custom CSS and paste the following CSS code:

/*** products list customisation  ***/
.product-list .pl-item {
   border: unset;
}
.pl-inner * {
  font-weight: normal;
    font-size: 18px;
    line-height: 20px;
}
.highlight span.pl-pvalue * {
    font-weight: 900 !important;
}
.product-list .pl-item .pl-inner:hover {
    background: unset;
}
 .product-list .pl-item .pl-inner {
  padding: 5px;
}
.product-list .pl-item.highlight {
 box-shadow: unset; 
 background: #ffc500 !important;
 margin: unset;
 padding: unset;
 border-radius: 5px;
 overflow: visible;
 }
.product-list .pl-item.highlight .pl-inner {
   padding: 12px !important;
}
.pl-item.highlight .pl-nvalue .name::before {
   content: 'BEST SELLER ';
   font-weight: bolder;
}
.pl-item.highlight::before {
   content: url(https://img.funnelish.com/3986/20255/1643478711-svgviewer-output%20%281%29.svg);
    width: 40px;
    position: absolute;
    top: calc(50% - 20px);
    right: calc(100% - 4px);
}
.product-list .pl-item .pl-price {
      min-width: fit-content;
}
/*** radios/ checks ***/
/*
input.pl-radio {
    position: absolute;
}
*/
.pl-radio::before {
    content: " ";
    display: inline-block;
    vertical-align: text-bottom;
    min-width: 18px;
    min-height: 18px;
    border: 2px #172969 solid !important;
    border-radius: 100%;
    transition: background-color 200ms ease-out;
    background: #FFF;
}
.pl-radio:checked::before {
    background: #172969;
    background-image: url(https://img.funnelish.com/3986/20255/1643484141-svgviewer-output%20%283%29.svg);
    width: 18px;
    content: '';
    transition: 100ms cubic-bezier(0, 0, 0.3, 1);
    background-repeat: no-repeat;
    background-size: 13px;
    background-position: center;
}


span.pl-nvalue {
    display: flex !important;
    gap: 10px;
    align-items: center;
}

Let us know how that goes,

Kind regards,
Funnelish™ Team.

1 Like
3

Hello,

Thank you very much.

The issue is when I add words on the left column, the works are extending? Is it possible to enter a new line (break the line) ?

Kind regards,

Pierrick

4

Hi @Pierrick :waving_hand: welcome back!

In Funnelish v2 you don’t really need to fight with CSS for this.
You can create your own product list design directly in the editor.

Just drag & drop elements, make the layout you want (left / right columns, more text, extra lines etc).
Then you bind each block to product data (name, price, image, description).

This way text can go in multiple lines, and you have full control on style.

Much easier than forcing CSS on the old product list.