Frame around product collection images - theme Turbo

Store Design
,
1

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

name 2.png
name 2.png618×1239 161 KB

Thank you :slightly_smiling_face:

2

Hi @FashionDose , kindly share your store URL please.

3

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.

4

www.fashiondose.eu

5

www.fashiondose.eu

6

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 tag:

Here is result:

BSSCommerceHDL_0-1726213858829.png
BSSCommerceHDL_0-1726213858829.png1920×873 210 KB

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 :heart_eyes:

7
  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

8

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 on theme.liquid

.relative.product_image { border: 1px solid #f3f2f1 !important; border-radius: 10px !important; }

Tech_Coding_0-1726214025976.png
Tech_Coding_0-1726214025976.png1333×356 85 KB

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

9

Thank you, the code works! :folded_hands:
Is it possible for the title and price of the product to be included in the frame as well in the mobile version?

10

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
7.png1317×919 155 KB

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

11

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 tag:

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 :heart_eyes:

12

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.

13

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 on theme.liquid

@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; } }

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

14

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 tag:

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 :heart_eyes: