How to Remove Image Borders in Shopify Dawn Theme

In the world of e-commerce, visual presentation is key. Shopify’s Dawn theme offers a clean and modern look, but sometimes the default image borders can interfere with your desired aesthetic. This guide will walk you through various methods to remove image borders in the Dawn theme, ensuring your product images shine without any distracting outlines.

Understanding Image Borders in Dawn

What Are Image Borders?

Image borders in Shopify themes are thin lines that surround product images, collection cards, and other visual elements. While they can add structure to your layout, they may not always align with your brand’s visual identity.

Why Remove Image Borders?

Removing image borders can create a more seamless and contemporary look for your online store. It allows your product images to stand out and can give your site a cleaner, more minimalist appearance.

Default Border Settings in Dawn

The Dawn theme comes with preset border settings that apply to various elements across your store. These borders are typically subtle but can be noticeable depending on your store’s color scheme and overall design.

Methods to Remove Image Borders

1. Adjusting Theme Settings (Recommended Method)

Accessing Theme Settings

To remove image borders without coding, follow these steps:

1. Log in to your Shopify admin panel
2. Navigate to “Online Store” > “Themes”
3. Find the Dawn theme and click “Customize”

Modifying Card Settings

The most straightforward way to remove borders is through the theme’s built-in settings:

1. In the theme editor, locate the “Theme settings” option
2. Look for the “Cards” section
3. Find the “Border thickness” setting
4. Set the thickness to 0

This method is highly effective and doesn’t require any coding knowledge. It’s the recommended first step for most store owners looking to remove image borders.

Adjusting Media Settings

For some images, you may need to adjust the media settings:

1. In theme settings, find the “Media” section
2. Look for the “Border” subsection
3. Set the thickness to 0

2. Custom CSS Solution

Adding Custom CSS

For those comfortable with CSS, you can add custom code to remove borders:

1. In your Shopify admin, go to “Online Store” > “Themes”
2. Click “Actions” > “Edit code”
3. Locate the assets/base.css file
4. Add the following code at the bottom of the file:

.card--outline:not(.card--soft) {
  border: 0rem solid transparent !important;
}
.product__media-list .product__modal-opener {
  border: 0rem solid transparent !important;
}

This CSS targets specific elements and removes their borders by setting them to 0 width and making them transparent.

Understanding the CSS

The first rule targets card elements, while the second targets product media elements. The !important declaration ensures these styles take precedence over any existing theme styles.

3. Theme-Specific Adjustments

Identifying Problem Areas

Sometimes, borders may persist in specific areas of your store. Common locations include:

• Collection pages
• Product detail pages
• Featured collections on the home page

Tailoring Solutions

For these cases, you may need to:

1. Inspect the element using your browser’s developer tools
2. Identify the specific CSS class or ID causing the border
3. Create a targeted CSS rule to remove the border

Troubleshooting Common Issues

Borders Still Visible

If you’ve applied the above methods and still see borders, consider:

• Clearing your browser cache
• Checking for theme updates that might affect styling
• Ensuring you’ve saved and published your theme changes

Inconsistent Results Across Pages

Sometimes, border removal may work on some pages but not others. In this case:

• Review page-specific settings in the theme editor
• Check for any custom apps or code snippets that might be overriding your changes

Mobile vs. Desktop Differences

Borders may appear differently on mobile devices. To address this:

• Use the mobile preview in the theme editor to check your changes
• Consider adding mobile-specific CSS if needed

Best Practices for Image Presentation

Maintaining Image Quality

When removing borders, ensure your product images are high-quality and have consistent dimensions to maintain a professional look.

Considering Background Colors

Without borders, pay extra attention to how your images look against the site’s background color. Adjust product photography or background settings as needed.

Testing Across Devices

Always test your border removal on various devices and browsers to ensure a consistent experience for all customers.

By following this guide, you should be able to successfully remove image borders in your Shopify store using the Dawn theme. Whether you opt for the no-code solution through theme settings or dive into custom CSS, these methods will help you achieve a clean, border-free look that lets your products take center stage.