Catalog - Product View


Give your 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 - Product View*/
ion-view[state="catalog-product-view"] {
  z-index: 9 !important;
}
ion-view[state="catalog-product-view"] > ion-content {
  top: 0px !important;
  background-color: #efefef !important;
}
ion-view[state="catalog-product-view"] ion-content div.scroll > div.list.card:nth-child(2) {
  display: flex;
  flex-direction: column;
  margin: 0px;
  box-shadow: none;
}
ion-view[state="catalog-product-view"] ion-content div.scroll > div.list.card:nth-child(2) > div:nth-child(2) {
  order: 1;
  padding: 0px 0px 0px 0px;
  border: none;
  background-color: #efefef !important;
}
ion-view[state="catalog-product-view"] ion-content div.scroll > div.list.card:nth-child(2) > div:nth-child(1),
ion-view[state="catalog-product-view"] ion-content div.scroll > div.list.card:nth-child(2) > div:nth-child(3) {
  order: 2;
}
ion-view[state="catalog-product-view"] ion-content div.scroll > div.list.card:nth-child(2) > div:nth-child(2) > img {
  border-radius: 0px 0px 10px 10px;
}
ion-view[state="catalog-product-view"] ion-content div.scroll > div.list.card:nth-child(2) > div:nth-child(1) {
  background-color: #fff;
    border: none;
    width: 95%;
    margin: auto;
    position: relative;
    top: -20px;
    z-index: 9;
    border-radius: 10px 10px 0px 0px;
}
ion-view[state="catalog-product-view"] ion-content div.scroll > div.list.card:nth-child(2) > div:nth-child(1) > h2 {
  color: black;
    font-size: 18px;
    font-weight: bold;
}
ion-view[state="catalog-product-view"] ion-content div.scroll > div.list.card:nth-child(2) > div:nth-child(3) {
  background-color: #fff;
    border: none;
    width: 95%;
    margin: auto;
    position: relative;
    top: -22px;
    z-index: 9;
  color: #000;
  padding-left: 16px;
  font-weight: bold;
  border-radius: 0px 0px 10px 10px;
}
ion-view[state="catalog-product-view"] i.icon.ion-ios-pricetag-outline {
  display: none;
}
ion-view[state="catalog-product-view"] ion-content div.scroll > div.list.card:nth-child(3) {
  margin-top: 0px;
    box-shadow: none;
}
ion-view[state="catalog-product-view"] ion-content div.scroll > div.list.card:nth-child(3) > div.item.item-divider.item-divider-custom {
  display: none;
}
.list:last-child.card {
    margin-bottom: 40px;
border-radius: 10px 10px 10px 10px;
background-color: rgba(255, 255, 255, 1);
}
.card .item.item-custom {
    border-color: rgba(255, 255, 255, 1);
    background-color: rgba(255, 255, 255, 1);
    color: rgba(0, 0, 0, 1);
  border-radius: 10px 10px 10px 10px;
}

__________________________________________________________________________________


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.