Customize Product List

Technical
1

pp
pp866×858 90.9 KB

Hi

I’m looking to customize my product list as shown in the screenshot attached.

2

Hi @ace,

Go to Custom Codes > Custom CSS and add the following CSS code to make the product list like this.

img{
  max-width: 100% !important;
}
.product-list .pl-item.small .top-tag, .product-list .pl-item.small .side-tag {
  font-size: 13px !important; /*TOP TAG SIZE*/
}
.pl-nvalue span.name {
  font-size: 14px !important;
  font-weight: 600;
}
.pl-item.small.selected{
  background: #FFFEFA !important;
  box-shadow: none !important;
  border: 3px solid #B88720 !important;
  border-radius: 0 !important;
  width: 100% !important;
  left: 0 !important;
}
.order-summary .os-row .os-price {
  min-width: fit-content !important;
}




.product-list .pl-item .pl-image {
    border: unset !important;
    padding: 0;
    margin: 0 10px 0 5px;
    border-radius: 2px;
    background: #fff;
    width: 65px;
    height: 65px;
    pointer-events: none;
    min-width: 145px !important;
    margin-right: auto;
    margin-left: 25px !important;
}
.product-list .pl-item input.pl-radio {
    left: 10px;
    bottom: 3.2em;
    position: absolute;
}.product-list .pl-item .pl-name {
    flex-direction: column-reverse;
}
.product-list .pl-item .pl-name .pl-nvalue {
    position: relative;
    margin-right: auto;
    margin-left: 2rem;
    margin-bottom: 8px;
}
.product-list .pl-item .pl-price {
    min-width: fit-content !important;
}
@media (max-width: 600px) {
  .product-list .pl-item .pl-price {
    min-width: 110px !important;
    }
}

Let us know how it goes. :slight_smile:

Best,
Mohammad @TeamFunnelish

3

Okay, I will give it a try now

4

image
image826×457 53 KB

Hi

How can I align the radio button to the top?

5

Can I have your page URL?

6

Here

https://voidhomme.funnelish.com/buy-now/limited-1728667323375757

would also like to add an image badge like this as circled in the screenshot

image
image862×213 47.9 KB

7

These updated code to align the radio button

img{
  max-width: 100% !important;
}
.product-list .pl-item.small .top-tag, .product-list .pl-item.small .side-tag {
  font-size: 13px !important; /*TOP TAG SIZE*/
}
.pl-nvalue span.name {
  font-size: 14px !important;
  font-weight: 600;
}
.pl-item.small.selected{
  background: #FFFEFA !important;
  box-shadow: none !important;
  border: 3px solid #B88720 !important;
  border-radius: 0 !important;
  width: 100% !important;
  left: 0 !important;
}
.order-summary .os-row .os-price {
  min-width: fit-content !important;
}




.product-list .pl-item .pl-image {
    border: unset !important;
    padding: 0;
    margin: 0 10px 0 5px;
    border-radius: 2px;
    background: #fff;
    width: 65px;
    height: 65px;
    pointer-events: none;
    min-width: 145px !important;
    margin-right: auto;
    margin-left: 25px !important;
}
.product-list .pl-item input.pl-radio {
    left: 10px;
    top: 1.2em;
    position: absolute;
}

.product-list .pl-item .pl-name {
    flex-direction: column-reverse;
}
.product-list .pl-item .pl-name .pl-nvalue {
    position: relative;
    margin-right: auto;
    margin-left: 2rem;
    margin-bottom: 8px;
}
.product-list .pl-item .pl-price {
    min-width: fit-content !important;
}
@media (max-width: 600px) {
  .product-list .pl-item .pl-price {
    min-width: 110px !important;
    }
}```
8

thanks, that works. I also need help on how to add the saving discount “56%” below the product title, add images for the product, and also a badge before the Best Value as shown in the screenshot

image
image841×288 60.4 KB