How to Move Product Title Above Image on Mobile in Shopify Debut

Introduction

In the world of e-commerce, mobile optimization is crucial for providing a seamless shopping experience. One common challenge Shopify store owners face is positioning the product title above the product image on mobile devices. This article will guide you through the process of making this adjustment in the Shopify Debut theme, ensuring your product pages are more user-friendly on smaller screens.

Understanding the Problem

Why Product Title Placement Matters

When browsing products on mobile devices, users often have to scroll down to see the product title if it’s placed below the image. This can lead to a poor user experience and potentially impact conversion rates. By moving the title above the image, you make it immediately visible to shoppers, helping them quickly identify the product they’re viewing.

Default Behavior in Debut Theme

The Debut theme, like many Shopify themes, typically displays the product title below the image on mobile devices. While this layout works well for desktop views, it’s not ideal for the limited screen space on smartphones and tablets.

The Goal: Improved Mobile User Experience

Our objective is to modify the theme code to display the product title above the image on mobile devices while maintaining the original desktop layout. This change will enhance readability and improve the overall mobile shopping experience.

Step-by-Step Solution

1. Accessing the Theme Files

To begin, you’ll need to access your theme files:

1. Log in to your Shopify admin panel
2. Navigate to “Online Store” > “Themes”
3. Find your active theme and click “Actions” > “Edit code”

2. Modifying the Product Template

The most effective solution involves editing the product template file:

1. In the theme editor, locate and open the Sections folder
2. Find and click on the product-template.liquid file

3. Adding Mobile-Specific Classes

Within the product-template.liquid file, you’ll need to make the following changes:

1. Find the existing product title code, which typically looks like this:

<h1 class="product-single__title">{{ product.title }}</h1>

2. Modify this line by adding a desk_hide class:

<h1 class="product-single__title desk_hide">{{ product.title }}</h1>

3. Next, copy the modified title code and paste it just after the product-single__photos class div. Change the class to mobile_hide:

<h1 class="product-single__title mobile_hide">{{ product.title }}</h1>

4. Adding Custom CSS

To ensure proper styling and visibility, you’ll need to add some custom CSS:

1. Open the theme.scss file in the Assets folder
2. Add the following CSS at the bottom of the file:

@media only screen and (max-width: 749px) {
  .desk_hide {
    display: none;
  }
  .mobile_hide {
    display: block;
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
  }
}
@media only screen and (min-width: 750px) {
  .desk_hide {
    display: block;
  }
  .mobile_hide {
    display: none;
  }
}

This CSS ensures that the appropriate title is displayed on mobile and desktop views, and sets a smaller font size for mobile devices.

Troubleshooting Common Issues

Double Titles on Mobile

If you encounter two product titles on your mobile view (one above and one below the image), double-check that you’ve correctly added the desk_hide and mobile_hide classes to the appropriate elements.

Missing Desktop Title

If the product title disappears on desktop, ensure that the CSS media queries are correctly defined and that the desk_hide class is displaying properly for larger screen sizes.

Adjusting Font Size

To further customize the mobile title’s appearance, you can modify the font-size property in the CSS. For example, to make it smaller, you could change:

font-size: 20px;

to:

font-size: 18px;

Adjust this value as needed to fit your design preferences.

Additional Considerations

Compatibility with Other Theme Customizations

If you’ve made other customizations to your product pages, ensure that this modification doesn’t conflict with existing code. Always test thoroughly after making changes.

Impact on SEO

Moving the product title in the HTML structure shouldn’t negatively impact SEO, as search engines can still easily identify the main product title. However, it’s always a good practice to monitor your search rankings after making structural changes to your site.

Performance Optimization

While this modification is relatively lightweight, always consider the overall performance of your mobile site. Ensure that images are properly optimized and that you’re not adding unnecessary code that could slow down page load times.

By following these steps, you should be able to successfully move your product title above the image on mobile devices in the Shopify Debut theme. This simple change can significantly improve the user experience for mobile shoppers, potentially leading to increased engagement and conversions on your e-commerce store.