How can i add a Logo Slider Section using Kalles Theme?

[Elailll]

Hello,

I want to add this Logo Slider Section to home page.

https://codepen.io/tanna261990/pen/oNWNVGY

Where need to add the HTML, CSS, and JS file ?

I’m using the Kalles theme.

Thanks.

[Shadab_dev]

You can create a new section and add all the code inside that section. You can take reference from the other sections built from your theme code editor.

Make sure to add a preset, this way you can add your section on any page you want and also choose where to show it by dragging and dropping.

[Elailll]

Can you explain more please?

where to create a new section? in edit code?

And where should I put the code? There are 3 different codes
HTML, CSS and JS.

Thanks

[Shadab_dev]

Yes click edit code, create a new section name it anything you want. Then add the code.

So for html just add it above the code that you get the first time you create a section.

For css add a tag your css code above the html.

For js add your code within a script tag and place it at the very bottom or below html.

Now the code that you got at the very start from Shopify make sure you add the name of the section to name field and the presets field within the schema. This will allow you to add the section from the customizer.

Look at other sections made for reference.

[TheUntechnickle]

Hey @Elailll ,

I’ve got the solution for adding that logo slider to your Kalles theme homepage! I’ve broken everything down into simple steps so you can implement it easily.

First, you’ll need to create a new section file:

1. Head to your Shopify admin > Online Store > Themes
2. Click the “Actions” dropdown on your Kalles theme and select “Edit code”
3. Look for the “Sections” folder and click “Add a new section”
4. Name it “logo-slider.liquid” and paste in this code:

<div class="container">
   <h2>Logos <b>Slider</b></h2>
   <hr>
   <section class="logos-slider slider">
      {% for block in section.blocks %}
        <div class="slide">
          <img src="{{ block.settings.logo_image | img_url: 'master' }}" alt="{{ block.settings.logo_alt }}">
        </div>
      {% endfor %}
   </section>
   <hr>
</div>

{% schema %}
{
  "name": "Logo Slider",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Logos Slider"
    }
  ],
  "blocks": [
    {
      "type": "logo",
      "name": "Logo",
      "settings": [
        {
          "type": "image_picker",
          "id": "logo_image",
          "label": "Logo Image"
        },
        {
          "type": "text",
          "id": "logo_alt",
          "label": "Image Alt Text",
          "default": "Brand Logo"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Logo Slider",
      "category": "Custom Content",
      "blocks": [
        {
          "type": "logo"
        },
        {
          "type": "logo"
        },
        {
          "type": "logo"
        },
        {
          "type": "logo"
        }
      ]
    }
  ]
}
{% endschema %}

Next, let’s add the CSS:

1. Go to the Assets folder in your theme editor
2. Click “Add a new asset”
3. Name it “logo-slider.css” and paste this CSS:

.logo-slider-section h2 {
  text-align: center;
  padding: 20px;
  text-transform: uppercase; 
}

.logo-slider-section b { 
  color: red;
}

/* Slider */
.logos-slider .slick-slide {
  margin: 0px 20px;
}

.logos-slider .slick-slide img {
  width: 100%;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

Now for the Javascript:

1. Create another asset file named “logo-slider.js” with this code:

$(document).ready(function(){
  $('.logos-slider').slick({
    slidesToShow: 4,
    slidesToScroll: 1,
    autoplay: true,
    autoplaySpeed: 1500,
    arrows: false,
    dots: false,
    pauseOnHover: false,
    responsive: [{
      breakpoint: 768,
      settings: {
        slidesToShow: 3
      }
    }, {
      breakpoint: 520,
      settings: {
        slidesToShow: 2
      }
    }]
  });
});

Finally, we need to link everything together:

1. Open the “theme.liquid” file (it’s in the Layout folder)
2. Find the closing tag and add this right before it:

{% if template contains 'index' %}
  {{ 'logo-slider.css' | asset_url | stylesheet_tag }}
  {% if settings.use_jquery %}
    <!-- jQuery is likely already included in Kalles theme -->
  {% else %}
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
  {% endif %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js" defer></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">
  <script src="{{ 'logo-slider.js' | asset_url }}" defer></script>
{% endif %}

Last step - add the section to your homepage:

1. Go to Shopify admin > Online Store > Themes
2. Click “Customize” on your Kalles theme
3. Make sure you’re editing the homepage
4. Click “Add section”
5. Find and select “Logo Slider”
6. Upload your logo images through the editor
7. Save your changes and you’re done!

Let me know if you need any help implementing this!

Cheers,
Shubham | Untechnickle

[Elailll]

I did it but it’s not good
Why is it vertical and not horizontal?

I want it to be like this.

[TheUntechnickle]

There might be some theme CSS conflicting with this code! Would it be possible for you to share your collaborator code over email or DM? We’ll send you the store access request and fix this!

Looking forward to hearing from you,
Shubham | Untechnickle