Shella theme :: How to add tabs in any place? HTML code snippet.
This article was created thanked Eduardo support request. I believe it may be helpful for other customers as well.
What is the HTML code snippet to add tabs in any place of the theme?
The theme has hundreds of options, you may check it in the user manual and video tutorials. Unfortunately, there is no theme option to add tabs in any place. Fortunately, you may add the following HTML code snippet to solve this task. Yep, you should deal with code, and it requires some basic HTML knowledge and Shopify online theme editor.
HTML code snippet for tabs
Here is an example of three tabs
<tabs-element class="tabs d-block" data-type="horizontal">
<div class="tabs__head" data-js-tabs-head="">
<div class="tabs__slider" data-js-tabs-slider="">
<div class="tabs__btn active" data-active="true" data-js-tabs-btn="">Tab #1</div>
<div class="tabs__btn" data-js-tabs-btn="">Tab #2</div>
<div class="tabs__btn" data-js-tabs-btn="">Tab #3</div>
</div>
<div class="tabs__nav tabs__nav--prev" data-js-tabs-nav-prev=""><i></i></div>
<div class="tabs__nav tabs__nav--next" data-js-tabs-nav-next=""><i></i></div>
</div>
<div class="tabs__body">
<div class="active" data-js-tabs-tab="">
<span data-js-tabs-btn-mobile="">TAB #1 <i>+</i></span>
<div class="tabs__content rte overflow-hidden" data-js-tabs-content="" style="display: block;">Content for tab #1</div>
</div>
<div data-js-tabs-tab="">
<span data-js-tabs-btn-mobile="">TAB #2 <i style="font-style: normal;text-transform: lowercase;">+</i></span>
<div class="tabs__content rte overflow-hidden" data-js-tabs-content="">Content for tab #2</div>
</div>
<div data-js-tabs-tab="">
<span data-js-tabs-btn-mobile="">TAB #3 <i> <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-188" viewbox="0 0 24 24"><g><path d="M7.158,12.206c-0.124-0.123-0.186-0.27-0.186-0.439c0-0.169,0.062-0.315,0.186-0.439c0.123-0.123,0.27-0.186,0.439-0.186h3.75v-3.75c0-0.169,0.062-0.315,0.186-0.439c0.123-0.123,0.27-0.186,0.439-0.186c0.169,0,0.315,0.063,0.439,0.186c0.123,0.124,0.186,0.271,0.186,0.439v3.75h3.75c0.169,0,0.315,0.063,0.439,0.186c0.123,0.124,0.186,0.271,0.186,0.439c0,0.17-0.063,0.316-0.186,0.439c-0.124,0.124-0.271,0.186-0.439,0.186h-3.75v3.75c0,0.17-0.063,0.316-0.186,0.439c-0.124,0.124-0.271,0.186-0.439,0.186c-0.17,0-0.316-0.062-0.439-0.186c-0.124-0.123-0.186-0.27-0.186-0.439v-3.75h-3.75C7.428,12.392,7.281,12.33,7.158,12.206z"></path></g></svg> </i></span>
<div class="tabs__content rte overflow-hidden" data-js-tabs-content="">Content for tab #3</div>
</div>
<script>// <![CDATA[
theme.AssetsLoader.require('scripts', 'tabs');
// ]]></script>
</div>
</tabs-element>
You may paste it to the content field via admin panel or paste directly to *.liquid file via online code editor. I will stick with first option. Create a new page, switch to code edit mode, paste the above code snippet you should see the following. tabs
Add content to tabs.
Replace texts "Tab #1", "Tab #2", "Tab #3" for captions
Replace texts "Content for tab #1", "Content for tab #2", "Content for tab #3" for tab content. The tab content may include the HTML code.
In my example I edited two tabs and put HTML code for table.
Remove tab
In case you want to remove tab, you should delete tow DIV tag with class tabs__btn at .tabs__head > .tabs__slider and data-js-tabs-tab attribute at .tabs__body elements.
I my example I will remove third tab and third DIV tags.
Add tab
To add tab you should add tow DIV tag with class tabs__btn at .tabs__head > .tabs__slider and data-js-tabs-tab attribute at .tabs__body elements.
You should keep the sequence of added tags. Second tabs__btn element will be linked to the second data-js-tabs-tab element.
Mobile
Tabs at mobile transform to the accordion.
You should add mobile captions inside content element data-js-tabs-tab at span tag with data-js-tabs-btn-mobile attribute.
Inside the I tag you may set the open icon.
Option #1 - Plus sign, with italic font style
<i>+</i>
Option #2 - Plus sign
<i style="font-style: normal;">+</i>
Option #3 - Plus SVG icon
<i> <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-188" viewbox="0 0 24 24"><g><path d="M7.158,12.206c-0.124-0.123-0.186-0.27-0.186-0.439c0-0.169,0.062-0.315,0.186-0.439c0.123-0.123,0.27-0.186,0.439-0.186h3.75v-3.75c0-0.169,0.062-0.315,0.186-0.439c0.123-0.123,0.27-0.186,0.439-0.186c0.169,0,0.315,0.063,0.439,0.186c0.123,0.124,0.186,0.271,0.186,0.439v3.75h3.75c0.169,0,0.315,0.063,0.439,0.186c0.123,0.124,0.186,0.271,0.186,0.439c0,0.17-0.063,0.316-0.186,0.439c-0.124,0.124-0.271,0.186-0.439,0.186h-3.75v3.75c0,0.17-0.063,0.316-0.186,0.439c-0.124,0.124-0.271,0.186-0.439,0.186c-0.17,0-0.316-0.062-0.439-0.186c-0.124-0.123-0.186-0.27-0.186-0.439v-3.75h-3.75C7.428,12.392,7.281,12.33,7.158,12.206z"></path></g></svg> </i>
Here is how it looks
How to set active tab?
In the example snippet the first tab is active by default. You may configure another tab to set active.
You should apply four changes
#1 - Add active class to the tab caption and remove it from first tab
#2 - Add data-active="true" attribute to the tab caption and remove it from first tab
#3 - Add class="active" attribute to the tab content element and remove it from first tab
#4 - Add style="display: block;" attribute the tab content and remove it from first tab
You should get the following code
How to show the accordion on the desktop?
Set the data-type="mobile" attribute for the top tabs-element tag.
That's it.
Thank you for reading.
Enjoy the Shella Shopify theme.