Shopify themes, liquid, logos, and UX
Return management just got easier! We’ve launched Customer Self-Serve Returns to all Shopify merchants. Click here to learn more!
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.
Yes we will help it.
You want to add a brand logo slider right??
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: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>
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
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?
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?
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?
Download css and js file and add it in the assets folder.
Then it will work it without any problem.
Thanks
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?
User | RANK |
---|---|
135 | |
91 | |
77 | |
68 | |
43 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022