Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi there!
I'm using the Symmetry theme and building a custom section with multiple block types:
- heading x 2
- image
- text
I want to achieve the following layout:
- One heading block should always appear at the top of the section, above the image and all other content.
- A second heading block should remain in its default position on the right side, next to the image (as part of the main content area).
How can I change the Liquid code to extract and display the TECHNOLOGIA heading at the top, while keeping the second heading and the rest of the content in their regular place?
You can add a new Heading at the top of that section and hide the current section's heading.
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
I added a new heading at the top of that section and hid the current section’s heading. It looks like in the screenshot — however, the new heading is not placed all the way at the very top.
Could you share the link to your page? Also, ensure that you adjust the top and bottom padding of the heading section to accommodate your request.
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
You can try to add this code to Custom CSS of that section instead
@media (min-width: 749px) {
.flexible-layout { position: relative; }
h2.majortitle {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -60px);
}
}
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is the result on my end.
Did you add code to Custom CSS of that section only?
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi,
Good morning,
Welcome to the shopify ,
Please share your store URL and if your store is password protected then also provide password too.
Thank you.
Hey there!
Looking at your layout goal, you'll need to modify your section's Liquid template to separate the headings and position them differently. Here's how to tackle this:
Solution: Modify your section's Liquid file
{%- comment -%} Display first heading at top of section {%- endcomment -%} {%- for block in section.blocks -%} {%- if block.type == 'heading' and forloop.first -%} <div class="section-top-heading"> <h2>{{ block.settings.heading }}</h2> </div> {%- break -%} {%- endif -%} {%- endfor -%} <div class="main-content-area"> <div class="image-column"> {%- for block in section.blocks -%} {%- if block.type == 'image' -%} <img src="{{ block.settings.image | img_url: '600x' }}" alt=""> {%- endif -%} {%- endfor -%} </div> <div class="content-column"> {%- assign first_heading_shown = false -%} {%- for block in section.blocks -%} {%- if block.type == 'heading' -%} {%- unless first_heading_shown -%} {%- assign first_heading_shown = true -%} {%- continue -%} {%- endunless -%} <h3>{{ block.settings.heading }}</h3> {%- elsif block.type == 'text' -%} <p>{{ block.settings.text }}</p> {%- endif -%} {%- endfor -%} </div> </div>
Add some basic CSS styling:
<style> .section-top-heading { text-align: center; margin-bottom: 30px; } .main-content-area { display: flex; gap: 30px; } .image-column, .content-column { flex: 1; } </style>
This code separates your first heading to display at the top, while keeping your second heading alongside the image content.
Easier alternative: If you're planning to do more custom layouts or don't want to mess with Liquid code, I actually built an app called Easy Edits that lets you drag and drop elements around visually without any coding. You could easily move that heading to the top and rearrange your layout with just clicks and drags!
Hope this helps! Let me know if you need any clarification on the code.
Hi @elotomo,
Your best bet here is keeping the current section as it is.
You can then add a whole new "Rich text" section above it with just the heading.
Thanks,
Jake