Product tabs optimized for mobile

Solved

Hi guys!

 

I just used a tutorial on how to add tabs to my product pages, worked great! ( https://community.shopify.com/c/Shopify-Design/Adding-tabs-on-product-page-simple-entry/td-p/430363 )

 

Now on mobile it looks a bit messy, so I was hoping to add some code so the tabs are stacked like on below:

Screenshot 2019-11-06 at 12.21.15.png

 

Looking forward to hearing from you!

0 Likes
Trailblazer
140 11 15

Hi @Infratech_Digit,

Did you add zoom CSS styles on your theme? Can you share your store URL with us? Happy to have a look and fix this issue for you.

Let's make the best store!
Contact us at: thepremierstores@gmail.com
0 Likes

Hi! thanks for your reply!

 

I don't think this has been added, what is it exactly? 

 

this is the url: https://www.fyeyewear.com/

 

Thank you so much!

0 Likes

Success.

Trailblazer
140 11 15

Add this at the bottom of your CSS file.

@media (max-width: 767px){
  .shg-c ul.tabs li{
    width: 100%;
  }
  .shg-c ul.tabs li a.active{
    top: 0;
  }
}
Let's make the best store!
Contact us at: thepremierstores@gmail.com
0 Likes
Shopify Expert
2652 60 649

Not quite an accordion -- you would need to change HTML to convert to accordion on mobile and is more complex overall, but would still  look better:

Add this to the  CSS portion of the code:

ul.tabs.vertical> li {
    width: 100%;
}

And this to the Javascript part ( insert above the " }, false );" line:

var totalWidth = 0;
$('.tabs > li').each(function(i, el) {
    totalWidth += $(el).outerWidth();
});

$(window).resize(function() {
    var $tabs = $('.tabs');
    if ($tabs.width() > totalWidth)
        $tabs.removeClass('vertical');
    else
        $tabs.addClass('vertical');
})

Would convert to something like this as soon as tab headers do not fit on one line:

Untitled.jpeg

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
1 Like

Thanks guys, it's looking all good on mobile now!

0 Likes