A Shopify store owner wants to reposition custom text (‘Ruimte voor 25+ LP’s’) to appear directly below the product title on mobile devices. Currently, the text displays correctly on desktop but appears below the product image on mobile.
Key Issue:
The custom liquid block is positioned correctly in the product template editor but doesn’t render in the desired location on mobile
Desktop and mobile versions use different code fragments, causing the positioning discrepancy
Proposed Solutions:
Manually add the text code directly into the theme files (main-product.liquid, product-template.liquid, or product.liquid) below the product__title element
Use CSS ordering with flexbox (already attempted but insufficient)
Current Status:
The issue remains unresolved. Multiple responders indicated that solving this requires direct theme code intervention beyond what custom liquid blocks can achieve. The store owner prefers a custom liquid solution to allow per-product text customization, but this may not be feasible. Recommendation is to hire a developer for proper implementation.
Summarized with AI on November 1.
AI used: claude-sonnet-4-5-20250929.
I would like the text ‘Ruimte voor 25+ LP’s’ to be just below the title on the mobile version. However, placing this below the title on the productpage doesn’t work. How do I make sure that this is below the title?
<!-- Voeg deze link toe in je theme.liquid als je Poppins nog niet hebt geladen -->
{% comment %}
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap" rel="stylesheet">
{% endcomment %}
<style>
@media screen and (max-width: 768px) {
.product-media-container {
display: flex;
flex-direction: column;
}
.poppins-text-container {
order: -1; /* Dit plaatst de tekst boven de afbeelding */
}
}
.poppins-text {
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 16px;
margin: 1px 0;
}
</style>
<!-- Wrapper div om de product media en tekst -->
<div class="product-media-container">
<!-- Voeg deze div toe rond je bestaande product media/afbeelding -->
{% comment %}
<div class="product-media">
{{ product.featured_media | img_url: 'master' | img_tag }}
</div>
{% endcomment %}
<div class="poppins-text-container">
<div class="poppins-text">
Ruimte voor 25+ LP's
</div>
</div>
</div>
Because the title code for mobile and desktop are 2 different codes, the phenomenon you reported on mobile occurs.
https://prnt.sc/Ahx0yB6uWRJt You need to find this code in the theme code, it can be in the main-product.liquid or product-template.liquid or product.liquid file, depending on the theme you are using.
You add this code to the code below the product__title
See if you can do it yourself, then I’ll edit it further.
This takes some time and understanding, if you don’t have knowledge of theme code, unfortunately you will have to find a paid developer
I tried on Origin theme and saw on mobile, product title is below the image
I don’t know in your store, how did you edit it
Please show the image so I know and help you
I would like the the custom liquid to be between the title and the price. However on the mobile version the custom liquid is below the picture. The custom liquid is the text: ‘Ruimte voor 25+ LP’s’. I would like this text to be below the title. I have put this in the producttemplate cause the custom liquid ‘Aangepaste Liquid’ is below the title, however it doesn’t show on the mobile version.
It seems two different fragments of code are used for desktop and mobile. Unfortunately, without looking into the code, I’m not able to give you a solution here. Your best option is to hire a developer to investigate the problem. Let me know if you need help with that.
