Re: Frame around product collection images - theme Turbo

Frame around product collection images - theme Turbo

FashionDose
Tourist
9 0 6

Hello I want to add a thin/thicker frame around my collection photo images.
As in the picture:
name 2.png

Thank you 🙂

Replies 13 (13)

websensepro
Shopify Partner
1272 144 160

Hi @FashionDose , kindly share your store URL please.

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial
FashionDose
Tourist
9 0 6
websensepro
Shopify Partner
1272 144 160

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!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial
FashionDose
Tourist
9 0 6

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?

BSSCommerce-HDL
Shopify Partner
2305 833 904

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

FashionDose
Tourist
9 0 6

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.

BSSCommerce-HDL
Shopify Partner
2305 833 904

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

Tech_Coding
Shopify Partner
378 105 89

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.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

Tech_Coding
Shopify Partner
378 105 89

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.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.
FashionDose
Tourist
9 0 6
Tech_Coding
Shopify Partner
378 105 89

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>

Tech_Coding_0-1726214025976.png

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Shopify UI Developer
Your Coffee Tips adds a little sweetness to my day.

BSSCommerce-HDL
Shopify Partner
2305 833 904

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: 

BSSCommerceHDL_0-1726213858829.png

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

Rahul_dhiman
Shopify Partner
606 119 121

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

If this was helpful, hit the like button and accept the solution.
Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me [email protected] - Skype: live:dhiman.639
Checkout Some Free Sections Here
Mobile:- +91 62390-46167