Shopify themes, liquid, logos, and UX
Hello,
I've created a 3 tab full-width description on my product page, using the HTML section in the Products-page of Shopify.
Now I would like to separate the text in each tab into 2 separate columns (in specific places).
If you look at the picture below, I would like to have Title 21 and 22 in the second tab and 31 and 32 in the 3rd tab. But with the code that I have, they all appear in the first tab.
Any suggestions?
Thank you so much in advance!
<ul class="tabs">
<li>
<a class="active" href="#tab1">
TAB 1
</a>
</li>
<li>
<a href="#tab2" class="">
TAB 2
</a>
</li>
<li>
<a href="#tab3" class="">
TAB 3
</a>
</li>
</ul>
<!--Start tab content-->
<ul class="tabs-content">
<li class="active" id="tab1" style="display: block;">
<div>
<div class="columns">
<div class="column">
<div class="row">
<h3>TITLE 1 1</h3>
<div>Text goes here</div>
</div>
</div>
<div class="column">
<div class="row">
<h3>TITLE 1 2</h3>
<div>Text goes here</div>
</div>
</div>
<ul class="tabs-content">
<li class="active" id="tab2" style="display: block;">
<div>
<div class="columns">
<div class="column">
<div class="row">
<h3>TITLE 2 1</h3>
<div>Text goes here</div>
</div>
</div>
<div class="column">
<div class="row">
<h3>TITLE 2 2</h3>
<div>Text goes here</div>
</div>
</div>
<ul class="tabs-content">
<li class="active" id="tab3" style="display: block;">
<div>
<div class="columns">
<div class="column">
<div class="row">
<h3>TITLE 3 1</h3>
<div>Text goes here</div>
</div>
</div>
<div class="column">
<div class="row">
<h3>TITLE 3 2</h3>
<div>Text goes here</div>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024