Edit Image with text

Store Design
1

In field Image with Text, how can I set up image on the left side, text on the right side?

please help with the coding in this liquid file

Screenshot at Jun 20 17-42-20.png
Screenshot at Jun 20 17-42-20.png2854×1200 133 KB

Screenshot at Jun 21 23-24-34.png
Screenshot at Jun 21 23-24-34.png2530×1148 413 KB

2
  • You can set the image to be first or second without having to edit the code.

BSSTekLabs_0-1718987434821.png
BSSTekLabs_0-1718987434821.png1835×845 93.3 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
3

Hi @jsngn

I dont that needs a liquid code. Would you mind to share your store URL? With the image with text section? Thanks!

4

Hello @jsngn
https://youtu.be/0CFaDEyQfH4

see this video you can do this by your self.

5

Hi @BSS-TekLabs and @niraj_patel this is my liquid file

https://pastebin.pl/view/69049822

My themes doesn’t have feature Image on left or right side :disappointed_face:

Screenshot at Jun 22 09-20-33.png
Screenshot at Jun 22 09-20-33.png2544×1502 241 KB

6

Hi @Made4uo-Ribe

Thank you, this is the URL https://www.frleather.com/pages/order-tracking

7
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the css-section-image-with-text.css file (or theme.css, styles.css, base.css, main.css).

  • Then add the following code at the end of the file and press ‘Save’ to save it.

.wpbingo-section--image-text .image-text {
 flex-direction: row-reverse !important;
}
  • Here is the result you will achieve:

BSSTekLabs_0-1719030384386.png
BSSTekLabs_0-1719030384386.png1883×880 72.9 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
8

thanks. if I have 2 section for image with text

the 1st I want image on the left

the 2nd I want image on the right

is this way will work?

9

To place an image left and text right, check if your theme includes an “Image with Text” section; most support layout alignment settings. If not, minor theme customization may be required.

Before editing code, duplicate your theme and test in preview. If you’re creating new visuals for the section, tools like Pikes AI can help generate consistent product images in a simplified way.