Tabbed Products on homepage

Solved
Highlighted
Tourist
7 0 1

Hello.

 

On my homepage - https://freshsoaps.co.uk I have a 3 tabbed product display.

 

I want to show 3 products per tab, but when I put 3 into the system there is a gap (for forth product). 

 

Annotation 2020-06-05 110504.png

Is there a way of just showing 3 products evenly across the tabbed area, It looks okay on a tablet & mobile, but on a PC screen, it shows the empty gap. I prefer 3 products evenly across the page, and if needed another 3 underneath etc. 

 

Hope all this makes sense!!!

 

Here is the HTML code on homepage:

 

{% if settings.products_tab_show == true %}

<div role="tabpanel" class="homepage-tabs homepage-section">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#tab-1" aria-controls="tab-1" role="tab" data-toggle="tab" class="btn-fancy">{{ settings.products_tab_1_title | default: "TAB 1" }}</a></li>
<li role="presentation"><a href="#tab-2" aria-controls="tab-2" role="tab" data-toggle="tab" class="btn-fancy">{{ settings.products_tab_2_title | default: "TAB 2" }}</a></li>
<li role="presentation"><a href="#tab-3" aria-controls="tab-3" role="tab" data-toggle="tab" class="btn-fancy">{{ settings.products_tab_3_title | default: "TAB 3" }}</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="tab-1">
<div class="row">
{% assign tab1_products = collections.[[settings.products_tab_1_collection]].products | default: collections.all.products %}
{% for product in tab1_products limit:settings.products_tab_count %}
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">{% include 'product-grid-item' %}</div>
{% endfor %}
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab-2">
<div class="row">
{% assign tab2_products = collections.[[settings.products_tab_2_collection]].products | default: collections.all.products %}
{% for product in tab2_products limit:settings.products_tab_count %}
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">{% include 'product-grid-item' %}</div>
{% endfor %}
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab-3">
<div class="row">
{% assign tab3_products = collections.[[settings.products_tab_3_collection]].products | default: collections.all.products %}
{% for product in tab3_products limit:settings.products_tab_count %}
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">{% include 'product-grid-item' %}</div>
{% endfor %}
</div>
</div>
</div>
</div>

{% endif %}

 

Thank you.

 

Lee

 

1 Like
Highlighted

This is an accepted solution.

Hello @FreshSoaps,

Please replace

<div class="col-lg-3 col-md-3 col-sm-4 col-xs-6">{% include 'product-grid-item' %}</div>

with

<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">{% include 'product-grid-item' %}</div>
Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
4466 670 1396

Thanks 
please update this code

{% if settings.products_tab_show == true %}

<div role="tabpanel" class="homepage-tabs homepage-section">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#tab-1" aria-controls="tab-1" role="tab" data-toggle="tab" class="btn-fancy">{{ settings.products_tab_1_title | default: "TAB 1" }}</a></li>
<li role="presentation"><a href="#tab-2" aria-controls="tab-2" role="tab" data-toggle="tab" class="btn-fancy">{{ settings.products_tab_2_title | default: "TAB 2" }}</a></li>
<li role="presentation"><a href="#tab-3" aria-controls="tab-3" role="tab" data-toggle="tab" class="btn-fancy">{{ settings.products_tab_3_title | default: "TAB 3" }}</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="tab-1">
<div class="row">
{% assign tab1_products = collections.[[settings.products_tab_1_collection]].products | default: collections.all.products %}
{% for product in tab1_products limit:settings.products_tab_count %}
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">{% include 'product-grid-item' %}</div>
{% endfor %}
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab-2">
<div class="row">
{% assign tab2_products = collections.[[settings.products_tab_2_collection]].products | default: collections.all.products %}
{% for product in tab2_products limit:settings.products_tab_count %}
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">{% include 'product-grid-item' %}</div>
{% endfor %}
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab-3">
<div class="row">
{% assign tab3_products = collections.[[settings.products_tab_3_collection]].products | default: collections.all.products %}
{% for product in tab3_products limit:settings.products_tab_count %}
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">{% include 'product-grid-item' %}</div>
{% endfor %}
</div>
</div>
</div>
</div>

{% endif %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Expert | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Highlighted
Tourist
7 0 1

THAT'S GREAT - IT WORKS FINE NOW, THANKS AGAIN!!! 

0 Likes