If you're using Shopify’s Horizon theme, you might have noticed that the “Image with Text” section defaults to an image on the left and text on the right layout on desktop.
On mobile, it stacks vertically - image first, then text, which is usually ideal for readability.
But what if you want the image on the right and text on the left for desktop without changing the mobile order (i.e. image on top of the text)?
At the moment, it breaks it and looks like this on mobile:
Unfortunately, there's no setting in the theme customiser I could find to control this yet - but there is a super simple CSS fix.
The Fix: Add This CSS Snippet
To reverse the layout on desktop only while keeping the mobile stack intact, just paste the following CSS into the Custom CSS field for the section you want to flip:
@media (min-width: 768px) {
.section-content-wrapper {
flex-direction: row-reverse !important;
}
}
Where to Add the CSS
- From your Shopify admin, go to Online Store > Themes
- Click Customise on your live theme
- Click onto the section you want to reverse
- Scroll down and select Custom CSS
- Paste in the code above
- Click Save
That’s it! Your desktop layout is now flipped, and mobile remains stacked - just how you want it, so it now looks like this:
Why This Works
The Horizon theme uses Flexbox to control the layout direction on desktop and mobile. By targeting screens wider than 768px (desktop and larger tablets), this CSS reverses the row direction, swapping the positions of the image and text container.
On mobile screens narrower than 768px, the default stacking order (image first, text second) remains unchanged.
An Alternative Solution Using the AI Code Generator
Add in a custom section, add a block and then select Generate for an AI Code Generated version.
I tested a few different prompts at first to get the layout and controls I needed, but after a couple of tries, this prompt worked well. Feel free to copy and paste it into the AI Code Generator and see if it works for you too:
An image with text block that can be flipped between image left or image second, but it remains stacked correctly on mobile, Need to have control over the text padding and alignment, whilst still maintaining a 50/50 split.
The wording might not be perfect, but the key takeaway is this: be as detailed as possible in your initial prompt. The more context you give, the better the generator can deliver what you need on the first attempt.
The good news is that you can refine your output with follow-up prompts if needed. However, one important note - as of writing this, once you save changes in the theme editor, you can’t continue the follow-up prompt process. So make sure everything's dialled in before hitting that save button.
Summary
- Horizon’s “Image with Text” is left image / right text by default on desktop
- Mobile stacks vertically: image first, then text
- Use the above CSS snippet to flip desktop layout without affecting mobile
- Add CSS via Theme Settings > Custom CSS for easy editing
- Use Shopify's AI Code Generator with a detailed prompt to build custom layouts - just make sure you’ve added everything before saving!
Enjoy your newly reversed layout!
