Remove featured product image border on mobile

nmn22601 · ‎04-18-2024

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

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

ThePrimeWeb · ‎04-18-2024

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.card--standard .card__inner {
    border: none !important;
}
</style>

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

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎04-18-2024

Hey @nmn22601,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.card--standard .card__inner {
    border: none !important;
}
</style>

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

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

nmn22601 · ‎04-19-2024

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

Anshul_arora · ‎04-19-2024

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 </body> tag

<style>

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

</style>

Output will be like this =>

I hope the solution helps you.

Please share if you have any query.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

diego_ezfy · ‎04-19-2024

@nmn22601 @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

◦ Replace apps with copy/paste code snippets and save money.
◦ Follow my blog & youtube for coding tutorials | Let's work together - click here to hire me!

Remove featured product image border on mobile