Add a heading above text with image in Dawn?

Store Design
1

I’m working on the About page of this website: https://maison-rouge-ny.myshopify.com/pages/about

PW: thifis

I’m trying to add a heading above the image, I’m using a custom liquid section that I just duplicated from the “text with image” section in that theme. I want to end up having the design look like this (bonus points if you can help me figure out how to flip the columns as well):

Screenshot 2024-11-19 143713.png
Screenshot 2024-11-19 143713.png1441×760 223 KB

3 Likes
2

That doesn’t address my issue at all

3

I’m working on the About page of this website: https://maison-rouge-ny.myshopify.com/pages/about

PW: thifis

I’m trying to add a heading above the image, I’m using a custom liquid section that I just duplicated from the “text with image” section in that theme. I want to end up having the design look like this (bonus points if you can help me figure out how to flip the columns as well):

Screenshot 2024-11-19 143713.png
Screenshot 2024-11-19 143713.png1441×760 223 KB

4

Can you clarify where I find the image in the liquid? I can’t figure out where the image is to add the header above it.

5

Hi @jasminsharp97

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
div#shopify-section-template--18647897604308__image_with_text_halves_Me8QpC .image-with-text-halves__grid.grid {
    flex-direction: row-reverse !important;
}
div#shopify-section-template--18647897604308__image_with_text_halves_Me8QpC .image-with-text-halves__grid.grid > .image-with-text-halves__media-item {
    position: relative !important;
}
div#shopify-section-template--18647897604308__image_with_text_halves_Me8QpC .image-with-text-halves__grid.grid > .image-with-text-halves__media-item::before {
    content: "TEXT HEADING";
    position: absolute !important;
    left: 50%;
    top: -40px;
    transform: translateX(-50%);
    font-weight: bold;
}

Here is the result: https://prnt.sc/fY_4Wmfq3Gl_

I hope this helps

Best,

Daisy

6

This is Richard from PageFly - Shopify Page Builder App

Hi @jasminsharp97 Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

7

I tried doing that and it didn’t do anything!

8

That worked part of the way, but for some reason only half of the text is showing. I adjusted some of the text settings and I think that broke something. I also need more space between the content and the image, like in the example. See what it looks like now:

Screenshot 2024-11-19 195204.png
Screenshot 2024-11-19 195204.png2458×955 365 KB

9

Hi @jasminsharp97

If you want to have more space you can adjust the top code here https://prnt.sc/qqbGCGsbKPwA

And could you please share with me the screenshot you added into the CSS custom so I can take a look if you added it correctly

Best,

Daisy

10

Thanks! Adjusting the top code fixed the spacing issue. I realized I could see the whole heading when I zoomed out farther, it’s just getting cut off when I zoom in. How do I prevent the text from disappearing if I zoom in too far?

11

Thank you !

12

Hi @jasminsharp97

If you zoom in too much, of course, the layout will break—there’s really no way to prevent that! :sweat_smile:

If my code helped solve your problem, please give us a like and mark it as the solution.

Thank you! ? :sparkles:

Best,

Daisy