Home Page Product Card **HELP**

[Pods10101]

Hello Everyone, I have a website in which on my home page, there is a product being shown and I want to center the title text and make the product image have rounded square edges. PLEASE SEE THE ATTATCHED IMAGE. Thanks!

MY STORE WEBSITE: www.gadget-pods.store

[Markit-Themes]

Hi Pods10101,

Here is css code for that:

.template-index .featured-product .productView-title {
text-align: center;
}
.template-index .productView-image.fit-unset .productView-img-container img:not(.zoomImg) {
border-radius: 40px;
}
.template-index .productView-thumbnail .productView-thumbnail-link {
background: none !important;
}
.template-index .productView-thumbnail .productView-thumbnail-link img {
border-radius: 10px;
}

Regards,

Markit-Themes

[Pods10101]

Hey Thanks But, Where do I put the css code?

[Markit-Themes]

You can put the css code in the live editor -> settings -> custom code css at the last tab.

[Pods10101]

Okay That Worked but there is one problem, you see how it says sale 35% on top of the image? I also want that to have rounded square edges

[Pods10101]

I also want to make the add to cart and buy now buttons with rounded square corners, how do I do that?

[Markit-Themes]

Here is css code for that:

.template-index .featured-product  button, .template-index .featured-product input { 
border-radius: 20px !important;
-webkit-border-radius: 20px !important;
-moz-border-radius: 20px !important; 
}

[Pods10101]

Okay that worked but the sale thing is not rounded still

[Markit-Themes]

I can't find the sale label. Can you provide me screenshot where is located?

[Pods10101]

Okay Sure Here: 

[Markit-Themes]

Here is css code for that:

.badge { 
border-radius: 20px !important;
-webkit-border-radius: 20px !important;
-moz-border-radius: 20px !important; 
}

[devcoders]

Hello @Pods10101 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css.
Add the provided code at the end of the file.

.badge.sale-badge {
border-radius: 10px !important;
-webkit-border-radius: 10px !important;
-moz-border-radius: 10px !important;
}

[Pods10101]

Hey There, This works but, I want it to match and be together with the image as it is looking a bit akward

[Pods10101]

Also how do I make the sale tag the red one, its size bigger as it looks small

[devcoders]

Hello @Pods10101 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css.
Add the provided code at the end of the file.

.productView-image .productView-img-container img:not(.zoomImg) {
border-radius: 10px;
}
.halo-productBadges .badge.sale-badge {
    background: red!important;
    font-size: 15px;
}