Shopify themes, liquid, logos, and UX
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):
That doesn't address my issue at all
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):
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.
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;
}
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:
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
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?
If you zoom in too much, of course, the layout will break—there's really no way to prevent that! 😅
If my code helped solve your problem, please give us a like and mark it as the solution.
Thank you! 🥰✨
Best,
Daisy
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 </body>
<style>
.section-template--18647897604308__image_with_text_halves_Me8QpC-padding . image-with-text-halves__grid{
flex-direction: row-reverse !important;
}
.section-template--18647897604308__image_with_text_halves_Me8QpC-padding . image-with-text-halves__grid .image-with-text-halves__media-item::before{
position: relative !important;
}
.section-template--18647897604308__image_with_text_halves_Me8QpC-padding . image-with-text-halves__grid .image-with-text-halves__media-item::before{
content: "PATRUCIA MARGRO",
top: -50px;
position: absolute !important;
left: 50%;
font-weight: bold;
color: black;
}
</style>
Hope my solution will help you resolve the issue.
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
I tried doing that and it didn't do anything!
Thank you !
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025