Change position of custom liquid

Change position of custom liquid

VinUp
Excursionist
46 0 12

Hello,

 

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? 

 

VinUp_0-1738582439888.png

 

My webshop is www.vinup.nl

 

This is the code for the custom liquid. 

<!-- 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>

 

Replies 8 (8)

htmlBurger
Shopify Partner
83 7 20

Hello @VinUp 

I just checked the store and I saw that the text is right below the title. Can you confirm if everything is fixed here or do you still need help? 

Found this helpful? Like and accept as solution to help others too!
htmlBurger – Founded in 2007, Shopify experts for 10+ years.
Custom themes, UI/UX design, ongoing maintenance & support.
Let's talk: ecom@htmlburger.com
VinUp
Excursionist
46 0 12

Hi @htmlBurger ,

 

Sorry but i would like the text to be below the title on the mobile version. 

htmlBurger
Shopify Partner
83 7 20

Hey @VinUp 

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.

Found this helpful? Like and accept as solution to help others too!
htmlBurger – Founded in 2007, Shopify experts for 10+ years.
Custom themes, UI/UX design, ongoing maintenance & support.
Let's talk: ecom@htmlburger.com

DaisyVo
Shopify Partner
3794 412 499

Hi @VinUp 

Because the title code for mobile and desktop are 2 different codes, the phenomenon you reported on mobile occurs.


1. 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.

2.  You add this code to the code below the product__title

<div class="poppins-text-container custom-mobile">
    <div class="poppins-text">
      Ruimte voor 25+ LP's
    </div>
  </div>

  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

Hope everything goes well for you

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
VinUp
Excursionist
46 0 12

Hi @DaisyVo ,

 

I want to be able to change this text per product. Would it then be helpful to use the main-product.liquid? I would prefer a custom liquid if possible

DaisyVo
Shopify Partner
3794 412 499

Hi @VinUp 

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

 

DaisyVo_0-1738586603403.png

 

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
VinUp
Excursionist
46 0 12

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. 

 

VinUp_1-1738587394084.png

 

DaisyVo
Shopify Partner
3794 412 499

Hi @VinUp 

 

Probably need to do some code intervention like the first option I gave
Unfortunately can only help you so far

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution