How can I add a slider to the logo section using Debut theme?

Sat1
Tourist
7 0 1

I have a number of logos on the logo section and want to add a slider so they automatically slide across at the bottom of my homepage. Can someone help? I am using Debut theme. Need the information to be in the for of 'coding for dummies' because I am not an expert on this. 

Replies 15 (15)

AkViradiya
Shopify Partner
29 1 1

Yes we will help it.

You want to add a brand logo slider right??

Anil
Sat1
Tourist
7 0 1
Yes, I have brand logos added but want slider.
AkViradiya
Shopify Partner
29 1 1

Yes, I can do it for you.

 

Anil
Sat1
Tourist
7 0 1
Can you tell me the process to get this done.Thanks.
AkViradiya
Shopify Partner
29 1 1

Create a section with brand-logo.liquid

<!-- our-brand-area start -->
<section class="our-brand-logo">
  <div class="brand-logo owl-carousel owl-theme" id="brand-logo">
    {% for block in section.blocks %}
    <div class="item">
      <div class="brand-img">
        <a href="javascript&colon;void(0)">
          <img class="img-fluid" src="{% if block.settings.brand_image %}{{ block.settings.brand_image | img_url: '120x250' }} {% else %}https://via.placeholder.com/120x250 {% endif %}" alt="{{ block.settings.brand_image.alt }}">
        </a>
      </div>
    </div>
    {% endfor %}
  </div>
</section>

<!-- our-brand-area end -->
<script>
  $('#brand-logo').owlCarousel({
    loop: true,
    rewind: true,
    margin: 0,
    nav: false,
    navText: ['<i class="fa fa-angle-left"></i>','<i class="fa fa-angle-right"></i>'],
    dots: false,
    {%- if settings.enable_rtl -%}
    rtl: true,
    {%- endif -%}
    autoplay: true, 
    sautoplayTimeout: 5000,
    autoplayHoverPause: true,
    responsive:{
      0:{
        items: 2,
        margin: 15
      },
      479:{
        items: 2,
         margin: 15
      },
      768:{
        items: 4
      },
      979:{
        items: 4
      },
      1199:{
        items: 7
      }
    }
  });
</script>
{% schema %}
{
  "name": "Brand Logo",
  "settings": [
  {
    "type": "header",
    "content": "Section Padding"
  },
  {
    "type" : "paragraph",
    "content" : "Desktop / Laptop / tablet"
  },
  {
    "type": "range",
    "id": "brand_padding_top",
    "label": "Section Padding Top",
    "min": 0,
    "max": 100,
    "step": 1,
    "unit": "px",
    "default": 60
  },
  {
    "type": "range",
    "id": "brand_padding_bottom",
    "label": "Section Padding bottom",
    "min": 0,
    "max": 100,
    "step": 1,
    "unit": "px",
    "default": 60
  },
  {
    "type" : "paragraph",
    "content" : "Mobile"
  },
  {
    "type": "range",
    "id": "brand_padding_top_xs",
    "label": "Section Padding Top",
    "min": 0,
    "max": 100,
    "step": 1,
    "unit": "px",
    "default": 40
  },
  {
    "type": "range",
    "id": "brand_padding_bottom_xs",
    "label": "Section Padding bottom",
    "min": 0,
    "max": 100,
    "step": 1,
    "unit": "px",
    "default": 40
  },
  {
    "type" : "header",
    "content" : "Background Color"
  },
  {
    "type" : "checkbox",
    "id" : "brand_check",
    "label" : "With Backgorund",
    "default" : true
  },
  {
    "type" : "color",
    "id" : "brand_bgcolor",
    "label" : "Background Color",
    "default" : "#fff"
  }
],
  "blocks":[
  {
    "type": "single_brand",
    "name": "Single Brand Logo",
    "settings": [
    {
      "type": "image_picker",
      "id": "brand_image",
      "label": "Brand Image",
      "info": "Recommended Size: 170 x 82px"
    }
    ]
  }
  ],
  "presets":[
  {
    "name": "Brand Logo",
    "category": "brand logo"
  }
  ]
}
{% endschema %}

<style>
  .our-brand-logo {
    padding-top:{{ section.settings.brand_padding_top }}px;
    padding-bottom:{{ section.settings.brand_padding_bottom }}px;
    {% if section.settings.brand_check %}
    background-color: {{ section.settings.brand_bgcolor }};
    {% endif %}
  }
  @media (max-width: 767px){
    .our-brand-logo {
      padding-top:{{ section.settings.brand_padding_top_xs }}px;
      padding-bottom:{{ section.settings.brand_padding_bottom_xs }}px;
    }
  }

  .our-brand-logo .brand-logo .brand-img{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    border: 1px solid #ebebeb;
    border-right-color: transparent;
    padding: 25px 0;
  }
  .our-brand-logo .brand-logo a img {
    opacity: 0.5;
  }
  .our-brand-logo .brand-logo a:hover img {
    opacity: 1;
  }
  .our-brand-logo .brand-logo a img,
  .our-brand-logo .brand-logo a:hover img {
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
  }
</style>
Anil
AkViradiya
Shopify Partner
29 1 1

In the theme.liquid file

{{ 'owl.carousel.min.css' | asset_url | stylesheet_tag }}
{{ 'owl.theme.default.min.css' | asset_url | stylesheet_tag }}

<script src="{{ 'owl.carousel.min.js' | asset_url }}"></script>

Download the Files below links and add to your asset.

https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

Anil
Soon
Tourist
9 0 3

Can you please clarify more this steps? i am lost here :

In the theme.liquid file

{{ 'owl.carousel.min.css' | asset_url | stylesheet_tag }}
{{ 'owl.theme.default.min.css' | asset_url | stylesheet_tag }}

<script src="{{ 'owl.carousel.min.js' | asset_url }}"></script>

Download the Files below links and add to your asset.

https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

Where to add this code?

AkViradiya
Shopify Partner
29 1 1

Download css and js file and add it in the assets folder.

Then it will work it without any problem.

 

Thanks

Anil
Soon
Tourist
9 0 3

the logos have a greyness, I need them to appear in their natural colors and Auto rotate slide without pause but must run continuously by presenting the list of logos?  

Sat1
Tourist
7 0 1

I have added this to the section, however the brand logo feature appears but the logos are added underneath each other rather than horizontal and doesn't give me the option to introduce a slider? 

AkViradiya
Shopify Partner
29 1 1

Share URL?

I will check it

Anil
Sat1
Tourist
7 0 1
resetonline.co.uk p/w weulah. Also the logos have a greyness, I need them
to appear in their natural colours and still have the link to the
brands when clicked on the icons that are displayed. See my featured logo
list, same thing but in slider format.
Soon
Tourist
9 0 3

The same things...

I have added this to the section, however the brand logo feature appears but the logos are added underneath each other rather than horizontal and doesn't give me the option to introduce a slider?

SeanDTC
Shopify Partner
2 0 0

You can now check this one: Brand Logo Slider Section 

Responsive,infinite scrolling, no limit to the number of images,controll the number of pictures displayed.

 

gr_trading
Shopify Partner
1822 143 189

Hi @Sat1 ,

 

Kindly refer to the below video how you can create new section to add logo with autoplay. Since the code is custom written hence applicable for all the themes.

 

You need to download the code and follow the steps how to integrate into the theme and you are done.

 

 

Let me know if have questions.

For any custom development WhatsApp or connect at Email ID: gr.trading15@gmail.com for quick consultation. | Shopify Free codes
To support Buy Me a Coffee