Shopify themes, liquid, logos, and UX
Hello, I have built a page with nav and sections. I want only one section to appear according to the button clicked by the user. Is there a way to do this? Do I need to code for the nav to live inside the page and have if statements for each button to display the {% section 'product_orders' %} ? Or is it best to develope a page for each one and just have the link on the nav take you to the page?
Thank you in advance!
Nav Code:
<div id='sticky-anchor'>
<div id='sticky'>
<p class="quickNav">{{ section.settings.header }}</p>
<p id="test"></p>
<hr>
{% for block in section.blocks %}
<a id="pageLink" onclick="showHelp({{ forloop.index }})" href={{block.settings.sectionPageLink}}>
{{ block.settings.button }}
<i id="navArrow{{ forloop.index }}" class="fad fa-chevron-right navArrow" style="float: right"></i>
</a>
{% endfor %}
<div class='helpSupportContainer'>
<span class='helpIcon'><i class="far fa-envelope fa-3x"></i></span>
<h3 class='helpTitle'><a href="mailto:service@thehydrojug.com">Email</a></h3>
<p>For larger issues please email us <a href="mailto:service@thehydrojug.com">HERE</a></p>
</div>
</div>
</div>
Section code:
{% if section.settings.header != '' %}
<div id='body'>
<div id='helpContainer'>
<h1 class="sectionHeader">{{ section.settings.header }}</h1>
<hr style="height: 5px; background-color: #000; margin: 12px 21px 12px 180px;">
{% for block in section.blocks %}
<div class='tile largeTile borderLabel'>
<label>{{ block.settings.container_header }}</label>
<p>{{ block.settings.container_text }}</p>
{% if block.settings.title != blank %}
<h3 class='tileTitle' style="margin-top: 10px;">{{ block.settings.title }}</h3>
{% endif %}
</div>
{% endfor %}
</div>
</div>
{% endif %}
{% schema %}
{
"name": "Orders",
"class": "Body Section",
"settings": [
{
"type": "text",
"id" : "header",
"label": "Header"
}
],
"blocks": [
{
"type": "section",
"name": "Page Section",
"settings": [
{
"type": "text",
"id": "container_header",
"label": "Container Header"
},
{
"type": "richtext",
"id": "container_text",
"label": "Container Text"
}
]
}
]
}
{% endschema %}
Bump, if anyone has any ideas? I appreciate it.
Thank you!
bump. Did I explain this well enough?
Thank you
Is there a way to do this with render perhaps? I'm unsure on how render works
Thank you
Or in the page template can I have some javascript function, to have an event listener work like a toggle with an index to make other divs in separate sections show or hide?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024