How to alternate text position in multicolumn images?

Shopify Discussion

Topic summary

Goal: alternate caption placement in a Shopify multicolumn image section so item 1 has caption below, item 2 above, item 3 below, etc.

  • An initial CSS suggestion (using flex with column-reverse on the multicolumn card container) moved all captions to the top globally, not in an alternating pattern.

  • Another guidance proposed editing base.css to create three columns for product descriptions. This addresses product description layout and does not solve alternating captions in the multicolumn images section.

  • The requester clarified the desired alternating pattern and shared screenshots illustrating the look.

  • A store URL was provided. A follow-up request asked for the exact page link where the change is needed.

  • No working solution for alternating captions has been provided yet; the current CSS suggestion doesn’t meet the alternating requirement.

  • Status: open. Next step is sharing the specific page URL so tailored CSS/structure can be proposed.

  • Note: Images/screenshots are central to understanding the desired layout. Terms: CSS (styling language), flexbox/column-reverse (methods to control element order) are relevant to the proposed approaches.

Summarized with AI on January 28. AI used: gpt-5.
1

How to change position of text in multicolumn images so that it will be alternating top and bottom

GerardJess1_0-1681715434018.png
GerardJess1_0-1681715434018.png1425×793 195 KB

2

@GerardJess1 add below css into your css file:

.multicolumn-card.content-container {
    display: flex;
    flex-direction: column-reverse;
}
3

Hello @GerardJess1 ,

You can try to follow this:

  • Go to Online Store → Theme → Actions → Edit code

Screen Shot 2023-04-10 at 11.13.01.png
Screen Shot 2023-04-10 at 11.13.01.png1433×764 109 KB

  • Go to Assets folder → base.css → add the following code at the bottom:
.product-single__description, .product-single__description p {
  columns: 3;
  column-gap: 20px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

Note that you can change the size of column gap, fonts or the size as you want.

  • Save and preview

Hope this can help you out. Let us know if you need any further support.

OneCommerce team.

1 Like
4

It will just move all the text on top- but can we do it in an alternate manner 1st photo caption below
2nd photo caption on top
3rd photo caption below?

5

GerardJess1_0-1681961951982.png
GerardJess1_0-1681961951982.png1443×656 127 KB

This look is what I’m referring to. If this will be possible :grinning_face_with_smiling_eyes:

6

GerardJess1_1-1681961986376.png
GerardJess1_1-1681961986376.png1443×656 127 KB

This is the kind of look that I am aiming for

7

@GerardJess1 Can you share ur store url?

8

Black Tie Watch Co.™ | Premium Watches & Accessories for Men

9

@GerardJess1 can you share link of that page where you want to do like that ?