How can I change the image alignment (to right) of featured product on debut theme?

Store Design

Topic summary

A user seeks to align a featured product image to the right on Shopify’s Debut theme, specifically for the second featured product section, while maintaining mobile responsiveness.

Solution Provided:

  • Add custom CSS code to theme.css file via Online Store → Theme → Edit Code → Assets
  • The code uses flexbox with flex-direction: row-reverse to reposition the image
  • Initial implementation worked on desktop but caused display issues on mobile
  • The code was updated to resolve mobile compatibility problems

Outcome:
The solution successfully aligned the product image to the right on both desktop and mobile devices. Another user requested similar help for alternating image positions (right-left-right) across multiple featured products, excluding mobile. A third user also expressed interest in implementing this feature.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
1

Hi All,

Can someone please let me know how can I align the featured product image to the right as shown in the picture here?

I want to do this only for the second section.

And this change must be mobile friendly as well.

Thanks!

Screenshot-2021-01-28-at-22.30.25.jpg
Screenshot-2021-01-28-at-22.30.25.jpg1744×1054 124 KB

1 Like
2

@KevinCruze

Sorry for facing this issue, it’s my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. :blush:

Please share your site URL,
So I will check and provide a solution here.

1 Like
3

Thanks a lot for the prompt reply @KetanKumar

Here is the link, https://osticare-pro.myshopify.com/

Highly appreciate any help.

1 Like
4

@KevinCruze

Thanks for details

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
#shopify-section-1611841169ca3e3a76 .product-single {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
}
1 Like
5

Thanks @KetanKumar

It works fine on desktop but looks weird on mobile. :disappointed_face:

Can we stop this code change happening on mobile?

1 Like
6

@KevinCruze

Thanks for feedback

I have updated the code please check.

1 Like
7

Legend @KetanKumar

All works fine. Thanks heaps!

1 Like
8

@KevinCruze

it’s my pleasure to help us

9

Can you please tell us what the small code change is so the element gets right for mobile? Loved your comment by the way, AWESOME! Can you please share it with us?

1 Like
10

@Website_maken

can you please share your store url so i will guide you

1 Like
11

https://www.bolsastassen.com/products/leather-glass-cases And the the cow case one is just looking strange in mobile(it’s just a proto type name by the way haha).

thanks for your fast reply by the way. Password is style058 :heart: You are the best

12

https://www.bolsastassen.com/products/leather-glass-cases And the the cow case one is just looking strange in mobile(it’s just a proto type name by the way haha).

thanks for your fast reply by the way. Password is style058

:heart: You are the best,

greets Chris

1 Like
13

@Website_maken

i have check it work what’s issue can you please share issue images?

1 Like
14

Can you help me with the same? i want the first feattured product picture to be on the right, then the second featured product picture to be on the left, then the third to be on the right again. on the mobile i dont want these features.