How to optimise your hero image in Shopify

When designing your Shopify store, the hero image is critical for creating a great first impression. The Turbo Theme by Out of the Sandbox offers tools to customize this effectively. Here’s how to optimize your hero image for both desktop and mobile:

1. Upload Separate Images for Desktop and Mobile
Don't rely on Shopify to automatically crop your hero image for mobile—it often results in poorly cropped images. By uploading two distinct images, one for desktop and one for mobile, you ensure that each version is perfectly optimized for the screen it’s displayed on. For desktop, a wider image works best, while mobile images should be taller to cover the entire screen without cutting off key content.

2. Text and Logo Placement
Think carefully about where text or your logo will be placed. On mobile, space is limited, so you want to avoid having important parts of the image, text, or logo overlapping or obscuring the subject of your photo. Test how text alignment looks across both versions of your hero image.

3. Utilize Turbo Theme’s Flexibility
Turbo allows you to adjust background colors, overlays, and text placement in the hero section. Customizing these features can help your hero image stand out and remain visually consistent across devices.

Step-by-Step: Cropping and Uploading in Shopify

Prepare Images in Photoshop: Crop and resize your hero images for mobile and desktop following image size guidelines (1920 x 1080 for desktop, 1080 x 1920 for mobile).

Turbo Theme Settings: Navigate to your Shopify theme settings and locate the hero image section. Upload both versions of the hero image—one for mobile and one for desktop.

Text Alignment: Customize your text alignment, ensuring readability without covering key areas of the image.
By properly preparing your images and leveraging the customization options in Turbo Theme, you’ll ensure your Shopify store looks polished, professional, and responsive across all devices.

For a more detailed walkthrough, check out our video tutorial that shows you how to do this step-by-step!