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