Shopify themes, liquid, logos, and UX
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
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
Hey Thanks But, Where do I put the css code?
You can put the css code in the live editor -> settings -> custom code css at the last tab.
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
I also want to make the add to cart and buy now buttons with rounded square corners, how do I do that?
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;
}
Okay that worked but the sale thing is not rounded still
I can't find the sale label. Can you provide me screenshot where is located?
Okay Sure Here:
Here is css code for that:
.badge {
border-radius: 20px !important;
-webkit-border-radius: 20px !important;
-moz-border-radius: 20px !important;
}
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;
}
Hey There, This works but, I want it to match and be together with the image as it is looking a bit akward
Also how do I make the sale tag the red one, its size bigger as it looks small
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;
}
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025