How to Center Text on Images in Shopify's Dawn Theme with BemeApps

By Tony Ng.
February 1st, 2025

How to Center Text on Images in Shopify's Dawn Theme with BemeApps

Understanding the Problem: Centering Text on Images

When customizing your Shopify store, particularly using the Dawn theme, you may encounter the challenge of centering text over images on your product pages. This issue arises due to the default styling of the theme, which might not align text as desired. The text alignment can be affected by several factors, including CSS properties, image dimensions, and the responsive design of the theme.

Why Does This Problem Occur?

The Dawn theme, like many other Shopify themes, is designed to be responsive. This means it automatically adjusts to different screen sizes and devices. However, this adaptability can sometimes cause elements like text and images to misalign, especially if the CSS is not explicitly set to center these elements. Here are some common reasons why this issue might occur:

Default CSS Settings: The default CSS settings of the Dawn theme may not center text over images.
Responsive Design Conflicts: As the theme adjusts for various devices, the text alignment might shift.
Image Dimensions: If images are not uniform in size, it can affect how text is displayed over them.

Step-by-Step Guide to Center Text on Images

To resolve this issue, you can modify the CSS of your Dawn theme. Follow these steps to center the text over images on your product pages:

Step 1: Access the Theme Editor

Log in to your Shopify Admin: Navigate to your Shopify admin dashboard.
Select Online Store: From the left-hand menu, click on "Online Store."
Choose Themes: Click on "Themes" to view your current theme.

Step 2: Edit the Theme Code

Click on Actions: Next to your active theme, click on the "Actions" dropdown.
Select Edit Code: From the dropdown menu, choose "Edit code."

Step 3: Modify the CSS File

Locate the CSS File: In the file directory on the left, find the "Assets" folder.
Open the CSS File: Depending on your theme, open base.css, style.css, or theme.css.

Add Custom CSS: Scroll to the bottom of the file and add the following CSS code:

@media screen and (min-width: 750px) {
    .image-with-text__text-item .image-with-text__content--top {
        justify-content: center !important;
    }
}

Save Your Changes: After adding the code, make sure to save the file.

Step 4: Verify the Changes

Preview Your Store: Return to your Shopify admin and click "Preview" to see the changes.
Check Responsiveness: Ensure that the text remains centered across different devices and screen sizes.

Additional Tips for Customization

Test on Multiple Devices: Always test your changes on various devices to ensure the design is responsive.
Use Consistent Image Sizes: Keep your images uniform in size to maintain a consistent look across your product pages.
Consider Using a Shopify Expert: If you’re not comfortable editing code, consider hiring a Shopify expert for assistance.