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

How to display one heading block at the top of the section and the other next to image?

How to display one heading block at the top of the section and the other next to image?

elotomo
Excursionist
36 0 15

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?

 

Zrzut ekranu 2025-06-18 o 08.43.39.png

Replies 11 (11)

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

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.

elotomo
Excursionist
36 0 15

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.

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

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.

elotomo
Excursionist
36 0 15
Dan-From-Ryviu
Shopify Partner
12073 2359 2539

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);
}
}

Screenshot 2025-06-18 at 14.53.10.png

- 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.

elotomo
Excursionist
36 0 15

This is the result on my end.

 

Zrzut ekranu 2025-06-18 o 10.05.12.png

Dan-From-Ryviu
Shopify Partner
12073 2359 2539

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.

Denishamakwana
Shopify Partner
1429 174 233

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.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
elotomo
Excursionist
36 0 15

mt686
Shopify Partner
146 12 21

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

  1. Go to Shopify Admin → Online Store → Themes → Actions → Edit Code
  2. Find your custom section file (probably in the "Sections" folder)
  3. Replace the existing block loop with this structure:
{%- 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.

jakeclifford
Shopify Partner
93 18 24

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

I'm Jake the Shopify Wizard! If helpful Like and Mark as an Accepted Solution
My Blog - Tips and Tricks for Shopify Horizon and AI features Horizon + AI

Struggling to solve an annoying issue? Get Help Fast