Moving Product Title Above Product Image [Mobile Only]

Technical Q&A

Topic summary

A user seeks to reposition the product title above the product image on mobile devices for the Focal theme by Maestrooo. Currently, the title appears below the image, requiring users to scroll down to view it.

Proposed Solutions:

  • One respondent provided custom CSS code to be added to the theme.css file, targeting mobile screens with max-width 740px using absolute positioning
  • Another suggested duplicating the product title in the template—one version for mobile (above image) and one for desktop (original position)
  • A third recommended using PageFly, a drag-and-drop page builder app, to avoid custom coding and manage mobile/desktop layouts separately

Additional Questions:

  • A user with the Flex theme asked for similar guidance
  • Another noted that theme.scss.liquid doesn’t exist in Studio 10.0.0 and asked where to add the code

The discussion remains open with multiple approaches offered but no confirmed resolution from the original poster.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
2

@apesurvival

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
@media screen and (max-width: 740px){
.product.product--thumbnails-left {
    position: relative;
    padding-top: 80px;
}
h1.product-meta__title.heading.h3 {
    position: absolute;
    top: 0;
}
}
3 Likes