A Shopify store owner wants to display different “Image with Text” sections on 8 content pages using a single page template, rather than creating 8 separate templates. The goal is to show/hide specific sections dynamically based on the active page name.
Proposed Solutions:
Liquid conditionals: Use {% if page.handle == 'page-name' %} statements to render different sections based on page handle
Metafields approach: Create page-specific metafields for images that sections can fetch dynamically
CSS/JavaScript targeting: Hide/show sections using div IDs, though this proved problematic as IDs change when sections are repositioned
Key Challenges:
Cannot rename “Image with Text” sections in the Shopify UI, only access auto-generated div IDs
Uncertainty about where to place Liquid code (theme.liquid vs page.liquid)
Initial implementation attempts with conditional code in custom-page.liquid template not displaying correctly
Using Dawn theme (free version)
Current Status:
The discussion remains ongoing. The original poster is actively testing the custom template approach with conditional Liquid statements but hasn’t achieved working results yet. Multiple helpers are providing guidance, with oscprofessional’s template-based solution being the most recent focus.
Summarized with AI on November 2.
AI used: claude-sonnet-4-5-20250929.
Hello,
I need a conditional statement to display only a specific “Image with Text section” per specific content page while just using just one page template.
Example… I have 8 pages all using one template type. But there are 8 different “Image with Text sections” for the 8pages different page names, example
If content page is “mypage-one” then use the mypage-one “Image with Text for section One” ONLY.
or
If content mypage-two is selected then I want the conditional code statement to say show “Image with Text section-two” and HIDE “Image with Text section-ONE” for mypage-two and so on for the remaining 8 pages. Otherwise, I will need to make a template type for each of the 8 pages which does not seem very efficient.
Hope this make sense? Is there an App that would make this easier?
Basically, I am looking for best way to use ONE content page template for 8 pages each with dynamic “Image with Text sections” that can hide/show based on active page.
Thanks in Advance for any tips, videos or apps on this.
You can create a metafield image for pages and assign that image in section “Image with Text sections”
In this way all pages have the option to upload a different image and section “Image with Text sections” will fetch them with dynamic source.
There is no app available for this thing but if you want you can try a page builder like Gempages.
You can achieve this using Shopify’s Liquid template language with conditional logic. Here’s how you can implement it:
Steps:
Create Unique Sections for Each Page
In the Sections folder, create sections for each “Image with Text” you need. For example:
image-with-text-one.liquid
image-with-text-two.liquid…up to 8 sections.
Modify the Template to Include Conditional Logic
In your Templates folder, open the relevant template file for your pages (e.g., page.liquid).
Add the following conditional logic to display specific sections based on the page’s handle:
liquid code:
{% if page.handle == ‘mypage-one’ %}
{% section ‘image-with-text-one’ %}
{% elsif page.handle == ‘mypage-two’ %}
{% section ‘image-with-text-two’ %}
{% elsif page.handle == ‘mypage-three’ %}
{% section ‘image-with-text-three’ %}
{% elsif page.handle == ‘mypage-four’ %}
{% section ‘image-with-text-four’ %}
{% elsif page.handle == ‘mypage-five’ %}
{% section ‘image-with-text-five’ %}
{% elsif page.handle == ‘mypage-six’ %}
{% section ‘image-with-text-six’ %}
{% elsif page.handle == ‘mypage-seven’ %}
{% section ‘image-with-text-seven’ %}
{% elsif page.handle == ‘mypage-eight’ %}
{% section ‘image-with-text-eight’ %}
{% endif %}
Assign the Same Template to All 8 Pages
In the Shopify admin, ensure that all 8 pages use the same template file, e.g., page.
Customize Each Section Individually
In the Sections editor (customizer), edit the content of each image-with-text section to match the page it’s associated with.
my reply helpful? Click Like to let me know! your question answered? Mark it as an Accepted Solution.
I believe this is exactly what I was looking for, I am going to give it a try in the liquid code section of my template AFTER I have named everything appropriately
Thank you for your kind words! I’m glad the solution aligns with what you’re looking for. Please don’t hesitate to reach out if you have any questions or run into any issues during the implementation—I’ll be happy to help.
Wishing you the best of luck with your testing, and I hope everything works perfectly!
Well I assumed that I could rename the “image-with-text” sections as I create them in the UI.. but apparently you cannot do this. Unless I am missing a step… Anyway… What I am able to do is locate the div ids to those sections
As a test i created TWO Pages with text sections. All i have are the Div IDs
first one is:
div id=“shopify-section-template–17930553983116__image_with_text_EFeLGq”
The second section is:
div id=“shopify-section-template–17930553983116__image_with_text_f9aGEE”
Since I cannot apparently rename the image_with_text panels it seems I can only locate the div ids
How can I use the syntax correctly you have listed above in code samples with the div ids to dynamically hide show instead of
image_with_text-one, or image_with_text-two like I had hope… Before I make the next 8 … need assistance how I can target the IDs since I cannot rename them.
Hello @RegGFX
if you have Id for all then we can do this:
/* Hide all sections by default */ #shopify-section-template–17930553983116__image_with_text_EFeLGq, #shopify-section-template–17930553983116__image_with_text_f9aGEE {
display: none;
}
/* Show the first section for ‘mypage-one’ */
body[data-page-handle=“mypage-one”] #shopify-section-template–17930553983116__image_with_text_EFeLGq {
display: block;
}
/* Show the second section for ‘mypage-two’ */
body[data-page-handle=“mypage-two”] #shopify-section-template–17930553983116__image_with_text_f9aGEE {
display: block;
} my reply helpful? Click Like to let me know! your question answered? Mark it as an Accepted Solution.
Well, after some tests… that really should have worked… but the additional code was not dynamic enough… the id suffixes seem to change if a content person moves them around.
so close…
but still need a way to hide show Image with Text sections based on page title or page name for a dynamic single template.
Open to suggestions… most grateful for the input thus far…
Create a template >Select Template type ‘page’ >liquid >name it ‘custom-page’
Then add below code in your custom-page.liquid file
Assign this template to your page created for example mypage-one, mypage-two, mypage-three
{% if page.handle == "mypage-one" %}
Your text for mypage-one
{% elsif page.handle == "mypage-two" %}
Your text for mypage-two
{% elsif page.handle == "mypage-three" %}
Your text for mypage-three
{% else %}
Default text
{% endif %}
Could you please share the link to your store and take a screenshot of the product template in the theme customization section, specifically the “Image with Text” area you wish to modify? This will help us better understand your request.
Here is a diagram of what I am trying to do… URL → https://drinkliquidfuel.store/pages/health-and-wellness (I had to hide the one of the sections because the page is Live and shared with another template of /Our-Story which needs the Our Story Image - With Text header
The theme I am using was originally a template called DAWN (free version) we modified only colors.
Basically, just trying to make a hide show of “image-with-text” sections. That’s really all..
FAIL: targeting the CSS
FAIL: Using Custom Liquid for that page
These can be done easily with Headers and conditional statements in liquid.. but have yet to find anyone doing this with the Dawn template.
