Fixing Your Shopify Product Image Corners: The Horizon Theme Mobile Mystery Solved!

Hey there, fellow store owners! It's your Shopify migration expert here, diving into another gem from the community forums. You know, sometimes the smallest design quirks can be the most frustrating, especially when they mess with your brand's consistency. Today, we're tackling a common head-scratcher that recently popped up:

Have you ever meticulously set up your product images with beautiful, subtle rounded corners, only to notice they magically disappear when your customers view your store on their mobile phones? If you're using one of Shopify's sleek Horizon family themes, you're definitely not alone. This exact issue was recently brought to light by a community member, omoot1, and it sparked a great little discussion that ultimately led to a super straightforward fix!

The Case of the Missing Mobile Corners

Our friend omoot1 described the problem perfectly: "I use horizon and for some reason I cant see my set product radius on my product media on product page. It shows on desktop version but not mobile. I’ve used padding and tried out many things but just cant seem to see it on mobile version only?"

Sound familiar? It’s a classic case of what looks great on desktop not quite translating to mobile, which, let's be honest, is where most of your customers are shopping these days. Initial thoughts from community members like Moeed and SectionKit rightly pointed to the need for store URLs to debug. SectionKit even shared a screenshot of the official Horizon theme demo, noting that it doesn't have border-radius on product media by default:

This insight was really helpful, as it confirmed that the default behavior of Horizon themes isn't to round those corners. So, if you've added them via the customizer, something's overriding it on mobile.

The Simple Solution: A Snippet of CSS Magic

Thankfully, a community pro named tim_tairli swooped in with the exact answer we all needed. They confirmed the issue: "Yes, Horizon family themes do not round media corners on mobile." But more importantly, they provided a super effective, one-line CSS fix! This is exactly why I love our community – someone always has the perfect trick up their sleeve.

It turns out, the Horizon theme uses a CSS variable called --corner-radius for media elements. While you might set a global --media-radius in your theme settings, the product media container on mobile sometimes doesn't inherit it correctly. By explicitly telling the .product-media-container to use that variable, we force it to adopt your chosen radius across all devices.

How to Implement the Fix: Step-by-Step

Ready to get those rounded corners back on mobile? Here’s how you can add this little piece of CSS to your Shopify store:

1. Navigate to Your Theme Customizer: From your Shopify admin, go to Online Store > Themes.
2. Edit Your Current Theme: Find your active theme (likely a Horizon family theme like Dawn, Refresh, Studio, etc.) and click the Customize button.
3. Go to Product Page Settings: In the theme customizer, navigate to a Product page (you can usually select it from the dropdown menu at the top of the editor).
4. Find the Product Information Section: On the left sidebar, locate the Product information section. Click on it to expand its settings.
5. Access Custom CSS: Scroll down within the Product information settings until you find the Custom CSS field. This is where you'll paste the code.
6. Add the CSS Snippet: Copy and paste the following code exactly as it appears into the Custom CSS box:

.product-media-container {
  --corner-radius: var(--media-radius);
}

7. Save Your Changes: Don't forget to click the Save button in the top right corner of the customizer.
8. Test on Mobile: Clear your browser cache (if necessary) and check your product pages on a mobile device. Your rounded corners should now be perfectly visible!

This small adjustment ensures that your product media containers consistently apply the --media-radius value you've set in your theme's general settings, regardless of whether your customers are browsing on a desktop or a mobile device. It's a fantastic example of how a tiny bit of custom CSS can bridge the gap where theme defaults might fall short, ensuring a polished and consistent brand experience for everyone.

So, if you've been pulling your hair out over those elusive rounded corners on mobile, give this fix a try. It's quick, easy, and comes straight from the collective wisdom of the Shopify community. Huge thanks to tim_tairli for sharing this valuable insight!