remove the grey outlines on my product page

Store Design
, ,
1

Hello,

I would like to remove the grey dial that surrounds my products. Do you know if this is possible?

This is my site: https://albe.online/

the password is shirobg
and I use the dawn theme

Thank you

2

Hey @albestudios

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1742378147639.png
Moeed_0-1742378147639.png1519×894 92.1 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hi @albestudios , you can follow these steps:

Step 1: Open Online Store → Themes → Edit code.

Step 2: Find component-card.css file

Step 3: Paste this code at the bottom of the file

.product-media-container.media-type-image {
 border: none !important;
}

Screenshot_8.png
Screenshot_8.png1445×885 90.7 KB

If this is helpful, please let us know by giving us a like and marking it as a solution. Thank you :heart_eyes:

4

Hello @albestudios

Go to Online store → Themes → Edit code, and locate this file /assets/section-main-product.css.

Then find this piece of code on line 1278:

.product-media-container {
  --aspect-ratio: var(--preview-ratio);
  --ratio-percent: calc(1 / var(--aspect-ratio) * 100%);
  position: relative;
  width: 100%;
  max-width: calc(100% - calc(var(--media-border-width) * 2));
}

Change it to this:

.product-media-container {
  --aspect-ratio: var(--preview-ratio);
  --ratio-percent: calc(1 / var(--aspect-ratio) * 100%);
  position: relative;
  border: none;
  width: 100%;
  max-width: calc(100% - calc(var(--media-border-width) * 2));
}

This should remove the border from the image container.

I hope this is helpful.