Mastering Mobile Aesthetics: Restoring Rounded Product Media Corners on Shopify Horizon Themes

Hey there, fellow store owners! It's your Shopify migration expert here at Shopping Cart Mover, 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: the case of the disappearing rounded corners on product media for Shopify's Horizon family themes.

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 Frustration of Inconsistent Mobile Design

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. Inconsistent design, even something as subtle as a missing corner radius, can subtly undermine your brand's professionalism and user experience. Initial thoughts from community members like Moeed and SectionKit rightly pointed to the need for store URLs to debug, as the official Horizon theme demo doesn't show border-radius on product media by default. This confirmed that any existing radius was likely a custom addition or theme setting not fully propagating to mobile views.

The Simple Fix: A CSS Snippet to the Rescue

The good news is that the solution to this seemingly stubborn problem is surprisingly simple, requiring just a small piece of custom CSS. This code snippet ensures that your product media containers on product pages consistently apply the desired corner radius across all devices, including mobile.

The Code:

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

Step-by-Step Implementation Guide

Applying this fix is straightforward, even if you're not a coding expert. Just follow these steps:

1. Access Your Shopify Admin: Log in to your Shopify store admin panel.
2. Navigate to Themes: From the left-hand sidebar, go to Online Store > Themes.
3. Customize Your Horizon Theme: Find your active Horizon family theme (e.g., Dawn, Refresh, Sense, etc.) and click on the "Customize" button. This will open the theme editor.
4. Go to a Product Page: In the theme editor preview, navigate to any product page. You can usually do this by clicking the dropdown at the top of the editor (e.g., "Home page") and selecting "Products" then "Default product."
5. Select the Product Information Section: On the left-hand sidebar of the theme editor, locate and click on the "Product information" section. This is where the product media is typically displayed.
6. Find Custom CSS: Scroll down to the very bottom of the "Product information" section settings. You should see an option labeled "Custom CSS." Click on it to expand the input field.
7. Paste the Code: Carefully paste the CSS snippet provided above into the "Custom CSS" field.
8. Save Your Changes: Click the "Save" button in the top right corner of the theme editor.
9. Test on Mobile: Clear your browser cache (if necessary) and then view your product pages on a mobile device (or use your browser's developer tools to simulate a mobile view). You should now see the rounded corners consistently applied to your product media!

Understanding the Code: CSS Variables Explained

Let's break down why this small snippet works so effectively. Shopify's modern themes, especially the Horizon family, extensively use CSS variables (custom properties). These variables allow for greater flexibility and easier theme-wide style management.

• .product-media-container: This is the CSS class that targets the main container holding your product images and videos on the product page.
• --corner-radius: This is a custom CSS property (a variable) that Shopify themes use internally to define the corner radius for various elements.
• var(--media-radius): This refers to another custom CSS property, --media-radius, which is typically set in your theme's global settings (e.g., in Theme Settings > Style > Media radius). By default, this variable controls the radius for media elements throughout your store.

The snippet essentially tells the .product-media-container to explicitly use the value defined in --media-radius for its --corner-radius. It appears that on mobile views, some default styling or a media query might have been overriding or neglecting to apply this variable to the product media container. This custom CSS ensures that the intended radius is always inherited, regardless of the device.

Taking Control: Further Customization

What if the var(--media-radius) isn't giving you the exact look you want? You have a couple of options:

• Adjust Theme Settings: The easiest way is to go to your Theme Settings > Style (or similar section) and look for a "Media radius" or "Border radius" setting. Adjusting this value will update --media-radius globally.
• Override Directly: If you want a specific radius just for product media that differs from your global setting, you can modify the code:

  .product-media-container {
    border-radius: 10px; /* Or any other pixel value you prefer */
  }

  Using border-radius directly gives you absolute control for this specific element. You can even use different values for different corners (e.g., border-radius: 10px 20px 30px 40px;).

Why Mobile-First Design is Non-Negotiable

This small fix highlights a larger truth in e-commerce: mobile-first design is paramount. A vast majority of online shoppers now browse and purchase from their smartphones. An inconsistent or broken mobile experience can lead to:

• Reduced Trust: A store that looks unpolished on mobile might seem less professional or reliable.
• Higher Bounce Rates: Users quickly leave sites that don't display correctly or are difficult to navigate on their devices.
• Lower Conversion Rates: Any friction in the mobile shopping journey can deter a purchase.
• Negative Brand Perception: Your brand's visual identity should be consistent across all touchpoints.

Ensuring every visual detail, from product images to button styles, renders perfectly on mobile is no longer an option; it's a necessity for success.

Best Practices for Theme Customization

Whenever you're making changes to your theme's code, even small CSS tweaks, it's wise to follow these best practices:

• Backup Your Theme: Before making any significant changes, duplicate your live theme. This provides a quick rollback option if something goes wrong.
• Test Thoroughly: Always test your changes on various devices, browsers, and screen sizes to ensure everything looks and functions as expected.
• Use a Development Theme: For more extensive customizations, consider working on a separate, unpublished theme to avoid impacting your live store.
• Consider Professional Help: If you're uncomfortable with code or need more complex customizations, don't hesitate to reach out to Shopify experts or a migration specialist like us at Shopping Cart Mover. We can ensure your store is perfectly tailored and optimized.

Conclusion

The case of the missing mobile corner radius on Shopify Horizon themes is a perfect example of how a tiny detail can impact your store's overall aesthetic and user experience. Thanks to the collaborative spirit of the Shopify Community, a simple and effective CSS solution is at hand. By implementing this fix, you can ensure your product media maintains its polished, branded look across all devices, contributing to a seamless and professional shopping experience for all your customers.

At Shopping Cart Mover, we're dedicated to helping you optimize every aspect of your Shopify store, whether it's a complex platform migration or a subtle design tweak. Don't let small inconsistencies detract from your brand's potential!