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.
- 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.
- 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.