Remove featured product image border on mobile

Store Design

Topic summary

A user encountered white borders around featured collection product images on mobile devices and sought a solution to remove them.

Solutions Provided:

Multiple community members offered CSS-based fixes with slight variations:

  • Method 1: Add custom CSS to theme.liquid file below the <head> tag targeting .card__inner elements
  • Method 2: Insert CSS before the </body> tag in theme.liquid with border removal code
  • Method 3 (Successful): Add CSS to base.css file (Asset folder) with the code:
.card--standard .card__inner {
  border-color: transparent !important;
}

Resolution:

The issue was resolved using the base.css approach. The original poster had initially attempted adding code to theme.liquid instead of the CSS file, which explained why their first attempt failed. Screenshots were provided by helpers showing exact file locations and code placement within the Shopify theme editor.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
1

On mobile the featured collection images have a white border around the product image. How can I remove these?

https://q478a5ljt5g7ge1x-85805793561.shopifypreview.com/

2

Hey @nmn22601 ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1713484604131.jpeg
ThePrimeWeb_0-1713484604131.jpeg1253Ă—933 87.9 KB

1 Like
3

Hello @nmn22601 ,

I understand you are looking to remove the featured product image border.

You can remove the border with the help of following steps -:

  1. Go to Online Store → Themes-> Edit Code https://prnt.sc/AD-DQ6ECUvcp

  2. Open the theme.liquid file and paste the code at the bottom of the file before tag

Anshul_arora_0-1713506627055.png
Anshul_arora_0-1713506627055.png1589Ă—777 74.3 KB

.card__inner.color-background-1.gradient.ratio { border: none !important; }

Output will be like this =>

Anshul_arora_1-1713506670336.png
Anshul_arora_1-1713506670336.png585Ă—788 176 KB

I hope the solution helps you.

Please share if you have any query.

Thank you.

4

@nmn22601 , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.card--standard .card__inner {
    border-color: transparent !important;
}

If it helps you please click on the “like” button and mark this answer as a solution!

Thank you.

Kind regards,
Diego

5

Thank you that worked. I was adding that code to the base.css. How did you know to use the theme.liquid?