Shopify themes, liquid, logos, and UX
Hello I want to add a thin/thicker frame around my collection photo images.
As in the picture:
Thank you 🙂
Hi @FashionDose , kindly share your store URL please.
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>
<style>
.relative.product_image {
border-radius: 8px !important;
border: 1px solid #80808042 !important;
}
</style>
If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!
Thank you, the code works! 🙏
Is it possible for the title and price of the product to be included in the frame as well in the mobile version?
Hi @FashionDose,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head> tag:
<style>
@media only screen and (max-width: 767px) {
.product-list .one-fourth.column.medium-down--one-half {
border-radius: 8px !important;
border: 1px solid #80808042;
}
.product-list .relative.product_image {
border-radius: 0px !important;
border: unset !important;
}
}
</style>
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Thank you! This is exactly what I wanted to do, but why does the frame only appear on the home page? There is no product border on the collection page.
Hi @FashionDose, Pls try with this code:
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head> tag:
<style>
@media only screen and (max-width: 767px) {
.product-list .one-fourth.column.medium-down--one-half {
border-radius: 8px !important;
border: 1px solid #80808042;
}
.product-list .relative.product_image {
border-radius: 0px !important;
border: unset !important;
}
}
@media only screen and (min-width: 768px) {
.relative.product_image {
border-radius: 8px !important;
border: 1px solid #80808042 !important;
}
}
</style>
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767px) {
.relative.product_image {
border: 1px solid #f3f2f1 !important;
border-radius: 10px !important;
}
.one-fourth.column.medium-down--one-half {
border: 1px solid #f3f2f1 !important;
border-radius: 10px !important;
}
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Hello @FashionDose
would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
.relative.product_image {
border: 1px solid #f3f2f1 !important;
border-radius: 10px !important;
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Hi @FashionDose,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head> tag:
<style>
.relative.product_image {
border-radius: 8px !important;
border: 1px solid #80808042 !important;
}
</style>
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hello @FashionDose
Go to online store ----> themes ----> actions ----> edit code---->assets---->styles.css
add this code at the end of the file.
.one-fourth.column.medium-down--one-half.small-down--one-half.thumbnail {
border: 0.1px solid #80808042;
}
resilt
If this was helpful, hit the like button and accept the solution.
Thanks
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024