How can I center text within an image using custom liquid?

English Shopify Shopify Discussion
1

Hi everyone,

I’ve a question about a custom liquid I implemented in my store.

Unfortunately I haven’t been able to center the text in the middle of the image I uploaded through the custom liquid. Let me show you what I mean by posting images:

Eline12_0-1699554571464.png

I’d like to have the text “4.5 / 5 sterren op Trustpilot” centering in the middle of the image. Like this (without the black line ofcourse, just a quick edit through paint):

Eline12_1-1699554932981.png

My website link = https://tlysocvwxwkl4jp7-76486705476.shopifypreview.com

Thank you in advance.

Kind regards,

Eline

2

which page you added this?

3

It’s on this page.

4

Hi @Eline12

  1. Go to Theme->Edit code, find file name “base.css” and add this code:
span.tp-text {
    position: absolute;
}

@media only screen and (max-width: 768px)
   span.tp-text {
      top: 3px;
   }

}

The result will be as the following image:

  • PC:

view (66).png
view (66).png1920×925 166 KB

  • Mobile:

view (67).png
view (67).png1861×918 177 KB

Hope it helps @Eline12 !

1 Like
5

Thanks a lot. That’s a very good solution.

Have a nice day!