How to move text under collection list images in pipeline theme?

Store Design
, , ,

Topic summary

A user seeks to reposition text that currently overlays collection list images on their homepage, wanting it to appear completely below the images instead.

Three CSS-based solutions were proposed:

  1. Kyle_liu’s approach: Modify the theme.css file by changing flex-flow: column; to flex-flow: column-reverse; in the .align-space-between-vertical class.

  2. DaisyVo’s solution: Add custom CSS using justify-content: flex-end !important; to reposition text. Also suggested adding white text color for better visibility against dark backgrounds.

  3. EstherBui’s method: Insert justify-content: end; into the base.css file targeting the .hero__content__wrapper.align-space-between-vertical class.

Current status: The user clarified their requirement multiple times, emphasizing they want text completely outside/under the image rather than overlaid on it. The discussion remains open as none of the proposed solutions fully address moving text entirely below the image container.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

How can I move the text from on the images to under the image for the collection list on the homepage?

I’ve included a screenshot.

Screenshot 2025-01-20 162505.png
Screenshot 2025-01-20 162505.png2217×822 440 KB

2

Hi @Mg71

Kyle_liu_0-1737429784949.png
Kyle_liu_0-1737429784949.png1405×459 962 KB

Edit theme code,in theme.css file find .align-space-between-vertical

modify flex-flow: column; to flex-flow: column-reverse;

Kyle_liu_2-1737429939584.png

3

Hi @Mg71 ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

.grid__item .collection-grid-item .hero__content__wrapper.align-space-between-vertical {
    justify-content: flex-end !important;
}

Here is the result:

DaisyVo_1-1737432986329.png
DaisyVo_1-1737432986329.png920×364 343 KB

Also, I noticed there are some parts that the text are in black, making it a bit blurry.

So if you wnat to change these text into White color, you can add the code here:

.grid__item .collection-grid-item .hero__content__wrapper.align-space-between-vertical * {
    color: white !important;
}

Please let me know if it works!

Best,

Daisy

4

Hi Mg71

You can try to follow this step
Step 1: Go to Edit code
Step 2: Find file base.css and add this code at the end of the file

.hero__content__wrapper.align-space-between-vertical {
    justify-content: end;
}

Result:

EstherBui_0-1737435174309.png
EstherBui_0-1737435174309.png456×626 256 KB

Best,
Esther

5

Is it possible to make the text fully under the image? I don’t want text on the image

6

Is it possible to make the text fully under the image? I don’t want text on the image.

7

Is it possible to make the text fully under the image? I don’t want text on the image. Thanks!