Catalog / Commerce - List


Give your Product Catalog a stylish, different look!

Please be advised that we are not able to customise or adjust this CSS for you, however the input process is straight forward - please copy and paste the following code at the bottom of the Colours section (at the very bottom of that page):


__________________________________________________________________________________


/*Catalog-List*/
/*Please use Layout 2 in Catalog module setting*/
ion-view[state="catalog-category-list"] > ion-content {
  background-color: white !important;
}
ion-view[state="catalog-category-list"] > ion-content div.scroll div.l5 > div > div > div.item.item-custom.item-body {
  padding: 0px 0px 16px 0px;
    border: 2px;
  box-shadow: 0px 0px 10px #ccc;
    border-radius: 10px;
    background-color: #fff;
  margin: 5px 5px 5px 5px;
}
ion-view[state="catalog-category-list"] > ion-content div.scroll div.l5 > div > div > div.item.item-custom.item-body > div.item-image {
  border-radius: 10px 10px 0px 0px;
}
ion-view[state="catalog-category-list"] > ion-content div.scroll div.l5 > div > div > div.item.item-custom.item-body > div.item-content > h2 {
  color: #12d584;
    font-weight: bold;
  padding-left: 10px;
}
ion-view[state="catalog-category-list"] > ion-content div.scroll div.l5 > div > div > div.item.item-custom.item-body > div.item-content > p {
  color: black;
  padding-left: 10px;
    padding-right: 3px;
}
ion-view[state="catalog-category-list"] > ion-content div.scroll div.l5 > div:nth-child(1) > div:nth-child(1) > div.item.item-custom.item-body > div.item-content > p:after {
  content: "Top Sale";
    display: block;
    color: white;
    background-color: #f72111;
    position: absolute;
    width: 45%;
    right: -15px;
    text-align: center;
    padding-right: 5px;
    top: 20px;
    padding-top: 3px;
    padding-bottom: 5px;
    border-radius: 0px 5px 5px 0px;
    opacity: 0.8;
    font-weight: bold;
    transform: rotate(90deg);
}
ion-view[state="catalog-category-list"] > ion-content div.scroll div.l5 > div:nth-child(3) > div:nth-child(1) > div.item.item-custom.item-body > div.item-content > p:after {
  content: "Sponsored";
    display: block;
    color: white;
    background-color: #0c60ee;
    position: absolute;
    width: 60%;
    right: -25px;
    text-align: center;
    padding-left: 5px;
    top: 20px;
    padding-top: 3px;
    padding-bottom: 3px;
    border-radius: 0px 5px 5px 0px;
    opacity: 0.8;
    font-weight: bold;
    transform: rotate(90deg);
}


__________________________________________________________________________________


NOTES:

Elements in BOLD can be updated.

  1. Colours - you can replace the HEX codes with the required colours. You can use section tags in BOLD see what section CSS element belongs to.
  2. URLs - you can upload your images using Image Uploader within Modules > Image Uploader. Use the generated URLs and replace the current image URLs in BOLD.