HOW Do I Hide / Show "Image with Text sections" based on content page name OR similar?

[RegGFX]

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.

[Guleria]

Hello @RegGFX 

  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.  

Regards
Guleria

[RegGFX]

I think I see what you are saying, however, trouble Visualization. 

Do you have any screenshots steps of this approach if I may ask? 

[Guleria]

Please check

[Tech_Coding]

Hello @RegGFX 

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.

[RegGFX]

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 

Thanks and will test two pages first. 

Very Kind Regards...

[Tech_Coding]

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!

Kind regards,
Saloni Jain

[RegGFX]

Hello, 

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.

I think we are very close... thanks

Thoughts? 

[Tech_Coding]

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.

[RegGFX]

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

[Tech_Coding]

As i understand your problem this is the last solution of mine you to try this one also:

   document.addEventListener('DOMContentLoaded', () => {
    const pageName = document.body.getAttribute('data-page');
    const sections = document.querySelectorAll('.image-with-text-section');

    // Define pages where the section should be hidden
       const pagesToHide = ['about us', 'return policy', 'contact', 'faq', 'page5', 'page6', 'page7', 'page8'];

           sections.forEach(section => {
           if (pagesToHide.includes(pageName.toLowerCase())) {
                 section.style.display = 'none'; // Hide the section
           } else {
                section.style.display = 'block'; // Show the section
           }
    });
});

if this not work then remove it 
Best Regards

Tech_Coding

[RegGFX]

Hi yes, I understand this code also... is there a script injection app or </> Custom Liquid  App to inject your suggestion on the content area?

[RegGFX]

Hi thank you with your patience with me... 

So I added a section </> liquid code app to the content pages and I'm going to try some simple conditional statements. 

And see if we have any success

[DaisyVo]

Hi @RegGFX 

It seems the page name you're referring to is page.title. You can verify this in the following screenshot: https://prnt.sc/Lt3YlgAxeFaW.

If you're familiar with Liquid and can create eight different "Image with Text" sections, the following code might work in this case:

{% if page.title == "mypage-one" %}
  {% section "Image with Text section-one" %}
{% elsif page.title == "mypage-two" %}
  {% section "Image with Text section-two" %}
{% endif %}

You can add more pages by extending the conditions like this:

{% elsif page.title == "mypage-number" %}
  {% section "Image with Text section-number" %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[RegGFX]

Where would the code be placed because placing in theme.liquid

The content is indeed reading from Page 

but I am not locating page.liquid 

The syntax shared I understand... but where to place the conditionals other than theme.liquid. Have not located a page.liquid 

Please advise... 

Thanks...

[DaisyVo]

Hi @RegGFX 

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.

[RegGFX]

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

Diagram of what I'm trying to do.

https://www.dropbox.com/scl/fi/vtmmw6a1l9vnpi9amsnxa/DynamicHideShow-Diagram.png?rlkey=wgspdlurvujkd...

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.

Does this help explain?

[RegGFX]

Hi, did the diagram work for you?

I am considering all suggestions...

Working on the one suggestion from oscprofessional but open to more if you have a thought... thanks ... 

[oscprofessional]

Hi @RegGFX ,

1. Create a template >Select Template type 'page' >liquid >name it 'custom-page'
2. Then add below code in your custom-page.liquid file
3. Assign this template to your page created for example mypage-one, mypage-two, mypage-three

{% if page.handle == "mypage-one" %}
  <div class="image-with-text">
    <!-- Content for mypage-one -->
    <img src="{{ 'image-one.jpg' | asset_url }}" alt="Image for mypage-one">
    <p>Your text for mypage-one</p>
  </div>
{% elsif page.handle == "mypage-two" %}
  <div class="image-with-text">
    <!-- Content for mypage-two -->
    <img src="{{ 'image-two.jpg' | asset_url }}" alt="Image for mypage-two">
    <p>Your text for mypage-two</p>
  </div>
{% elsif page.handle == "mypage-three" %}
  <div class="image-with-text">
    <!-- Content for mypage-three -->
    <img src="{{ 'image-three.jpg' | asset_url }}" alt="Image for mypage-three">
    <p>Your text for mypage-three</p>
  </div>
{% else %}
  <div class="image-with-text">
    <!-- Default content -->
    <img src="{{ 'default-image.jpg' | asset_url }}" alt="Default Image">
    <p>Default text</p>
  </div>
{% endif %}

[RegGFX]

Very close... really appreciate this... Here is a diagram that shows what I tried... 

https://www.dropbox.com/scl/fi/vtmmw6a1l9vnpi9amsnxa/DynamicHideShow-Diagram.png?rlkey=wgspdlurvujkd...

I am basically just trying to not create 8 templates with their own "Image Image Text" section - Lol

So the above approach should still work correct?

R.

[RegGFX]

Working on your suggestion tonight... will let you know as soon as I can... thanks for this suggestion

[RegGFX]

Hi oscprofessional

Thank you for sticking with me on making a dynamic template with Image-Text sections... I think we are close as I implemented the code but do not see the results looking for... see below

May I email you direct?

So i followed steps 1 -3 pretty simple

Except the theme had to be named theme.custom-page.liquid

And what that did was duplicated the default with the new name of theme.custom-page.liquid, so still good

The next issue is placement of the code.

1) I placed within the duplicated theme.custom-page as follows and it is not displaying at all. Is my placement wrong?

<code>

<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
{% if page.handle == 'health-and-wellness' %}
<!-- DYNAMIC TEST CODE HERE -->
<div class="image-with-text">
<!-- Content for mypage-one -->
<img
src="{{ 'https://cdn.shopify.com/s/files/1/0679/4657/8060/files/lab-mockup-ourmission.png?v=1734988483' | asset_url }}"
alt="Image for mypage-one"
>
<p>Your text for mypage-one</p>
</div>

{% else %}
<div class="image-with-text">
<!-- Default content -->
<img
src="{{ 'https://cdn.shopify.com/s/files/1/0679/4657/8060/files/default-image.png?v=1735771199' | asset_url }}"
alt="Default Image"
>
<p>Default text</p>
</div>
{% endif %}
<!-- END DYNAMIC TEST CODE HERE -->
{{ content_for_layout }}
</main>

</code>

I feel the conditional statement is correct... but yet I am missing something still.. Please advise... if I can email you direct... that would be even better. Thanks so much for assistance... I've made many CMSs dynamic sections in my time to save the need for excessive templates files, however Shopify seems to be a little tricky with this attempt... Again, please advise or if, I should email you direct as the above did not work. Apparently, my placement of the liquid code in the new template.custom-page.liquid is not registering correctly with the handle of the page name?

Kindly

R.