how do i change number of product displayed in a row in tabs

[Yasin]

Hi,

I created a section called "Tabs" by modifying the code. I have inserted a code snippet and would like to make the following adjustments:

1. Number of products per row:

   • Change the number of products displayed in a row on desktop from 4 to 3.
   • Change the number of products displayed in a row on mobile from 2 to 1.

2. Styling adjustments:

   • Update the grey marker on "Best Sellers" to match my brand color: #633522.
   • Change the border surrounding the image circle to match the same color (#633522).
   • Adjust the arrow styling:
     • Change the arrow color to #633522.
     • Increase the arrow size slightly for better visibility.

I appreciate your help!
For reference, I am using the Dawn theme version 8.0.1. Below is the code I am currently using for the "Tabs" section:

{%- if section.blocks.size > 0 -%}
<div class="tabs-section page-width">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="//code.jquery.com/jquery-3.6.0.js"></script>
<script src="//code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
{%- if section.settings.useslider -%}
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css">
{%- endif -%}
{%- if section.settings.title != blank -%}
<h2 class="h1">{{ section.settings.title }}</h2>
{%- endif -%}
<div id="tabs" class="tabs">
{%- assign tabContent = '' -%}
<ul>
{%- for block in section.blocks -%}
{%- assign collection = collections[block.settings.collection] -%}
<li><a href="#tabs-{{ collection.id }}">{{ collection.title }}</a></li>
{%- capture content -%}
<div id="tabs-{{ collection.id }}">
<ul class="grid product-grid grid--1-col-tablet-down grid--3-col-desktop">
{%- for product in block.settings.collection.products limit: 8 -%}
<li class="grid__item scroll-trigger animate--slide-in">
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
show_quick_add: section.settings.enable_quick_add,
section_id: section.id
%}
</li>
{%- endfor -%}
</ul>
{%- if block.settings.viewall -%}
<div class="center collection__view-all scroll-trigger animate--slide-in">
<a class="button" href="{{ block.settings.collection.url }}"> View all </a>
</div>
{%- endif -%}
</div>
{%- endcapture -%}
{%- assign tabContent = tabContent | append: content -%}
{%- endfor -%}
</ul>
{{ tabContent }}
</div>
</div>
<script>
$(function() {
{%- if section.settings.useslider -%}
function tabSlider() {
$('.tabs .product-grid.slick-initialized').slick('unslick');
$('.tabs .product-grid').slick({
dots: false,
arrows: true,
infinite: false,
speed: 300,
slidesToShow: 3,
slidesToScroll: 3,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3,
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
}
}
]
});
}
{%- endif -%}
$("#tabs").tabs({
create: function(event, ui) {
{%- if section.settings.useslider -%}
tabSlider();
{%- endif -%}
},
activate: function(event, ui) {
{%- if section.settings.useslider -%}
tabSlider();
{%- endif -%}
}
});
});
</script>
<style>
.grid--3-col-desktop {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.grid--1-col-tablet-down {
display: grid;
grid-template-columns: 1fr;
}
</style>
{%- endif -%}

[Moeed · Accepted solution]

Hey @Yasin 

Share your Store URL and Password if enabled.

Best Regards,

Moeed

[Yasin]

Hi Moeed, thanks alot.

here is the link and the password:

store url: barefoot-hiking.com

password: umaifff

[Moeed]

Hey @Yasin 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
.tabs .slick-track .grid__item {
    width: 353px !important;
}
}
.tabs.ui-tabs .ui-tabs-nav li.ui-tabs-active p {
    background: #633522 !important;
}
.tabs-img-block {
    border: 1px solid #633522 !important;
}
.tabs .slick-next::before, .tabs .slick-prev::before {
    color: #633522 !important;
    font-size: 26px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Yasin]

thank you Moeed, it is better now but something changed after i added the code, as you can see in the screen shot, the variants and the add to cart button that im used to have are gone, and as well the arrow on the left is only half shown and doesnt fully have my branding color

[Yasin]

i almost forgot, if you may, i also have one last thing in mind. is it possible to have the description as well under the price?