Frame around product collection images - theme Turbo

[FashionDose]

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

Thank you 🙂

[websensepro]

Hi @FashionDose , kindly share your store URL please.

[FashionDose]

www.fashiondose.eu

[websensepro]

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!

[FashionDose]

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]

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 😍

[FashionDose]

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]

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 😍

[Tech_Coding]

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.

[Tech_Coding]

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.

[FashionDose]

www.fashiondose.eu

[Tech_Coding]

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.

[BSSCommerce-HDL]

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 😍

[Rahul_dhiman]

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