Shopify themes, liquid, logos, and UX
Hello community,
I am using Molla v2 Theme, and I want to use a slider provided from Molla theme, and use it on a collection page.
On my main homepage, I use the slider via the "Section" when Customizing my Theme. This works well:
However, I also want to use the same slider on my collection pages. As the input for the slider will depend on each collection, I cannot implement the slider via the "Section" as for the first slider. So what I need to do is to implement the slider manually into the .liquid file of the collection via html / liquid. So far it has worked well, but I am missing the "Left" and "Right" Arrows and the "Dots" at the bottom. As can be seen in the image below:
What is strange is that I have exactly the same HTML elements for both sliders.
HTML for first slider:
<div class="swiper-container-fuild position-relative nav-default nav-style-default nav-mode-primary">
<div class="swiper-container brands-slide style-default" data-breakpoints='{"0":{"slidesPerView":2,"spaceBetween":0},"480":{"slidesPerView":3,"spaceBetween":0},"768":{"slidesPerView":4,"spaceBetween":0},"992":{"slidesPerView":5,"spaceBetween":0},"1200":{"slidesPerView":7,"spaceBetween":0}}' data-autoplay="true" data-slides-per-view="7" data-dots="true" data-nav="true" data-prev-el=".sw-btn-prev-template--18868852588892__fd2d4470-460a-45dc-98fd-cc2a53f3e980" data-next-el=".sw-btn-next-template--18868852588892__fd2d4470-460a-45dc-98fd-cc2a53f3e980" data-pagination=".swiper-pagination-template--18868852588892__fd2d4470-460a-45dc-98fd-cc2a53f3e980">
<div class="swiper-wrapper"><div class="swiper-slide image__brand">
<a class="icon__brand" href="/collections/chanel" aria-label="BOLSINO"><img width="1280" height="720" class="lazyload" data-src="//bolsino.com/cdn/shop/files/chanel_{width}x.png?v=1672768417" data-widths="[160, 240, 320]" data-aspectratio="1.7777777777777777" data-sizes="auto" alt="" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
test
</div><div class="swiper-slide image__brand">
<a class="icon__brand" href="/collections/alexander-mcqueen" aria-label="BOLSINO"><img width="1280" height="720" class="lazyload" data-src="//bolsino.com/cdn/shop/files/alexandermcqueen_{width}x.png?v=1672768320" data-widths="[160, 240, 320]" data-aspectratio="1.7777777777777777" data-sizes="auto" alt="" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="1280" height="720" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
test
</div><div class="swiper-slide image__brand">
<a class="icon__brand" href="/collections/hermes-bags" aria-label="BOLSINO"><img width="4096" height="4096" class="lazyload" data-src="//bolsino.com/cdn/shop/files/hermes-logo-0_{width}x.png?v=1684023765" data-widths="[160, 240, 320]" data-aspectratio="1.0" data-sizes="auto" alt="" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="4096" height="4096" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
test
</div><div class="swiper-slide image__brand">
<a class="icon__brand" href="/collections/jil-sander-bags" aria-label="BOLSINO"><img width="2400" height="2400" class="lazyload" data-src="//bolsino.com/cdn/shop/files/jilsander_{width}x.png?v=1672769126" data-widths="[160, 240, 320]" data-aspectratio="1.0" data-sizes="auto" alt="" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="2400" height="2400" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
test
</div><div class="swiper-slide image__brand">
<a class="icon__brand" href="/collections/dolce-gabbana-bags" aria-label="BOLSINO"><img width="500" height="500" class="lazyload" data-src="//bolsino.com/cdn/shop/files/3968722373ac70ec5d9e7cb038a21ac4_{width}x.jpg?v=1684059722" data-widths="[160, 240, 320]" data-aspectratio="1.0" data-sizes="auto" alt="" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
test
</div><div class="swiper-slide image__brand">
<a class="icon__brand" href="/collections/chloe-handbags" aria-label="BOLSINO"><img width="277" height="280" class="lazyload" data-src="//bolsino.com/cdn/shop/files/f95d668691d4905867c8da0226a96e9d_{width}x.jpg?v=1684059772" data-widths="[160, 240, 320]" data-aspectratio="0.9892857142857143" data-sizes="auto" alt="" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="277" height="280" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
test
</div><div class="swiper-slide image__brand">
<a class="icon__brand" href="/collections/bottega-veneta-bags" aria-label="BOLSINO"><img width="464" height="348" class="lazyload" data-src="//bolsino.com/cdn/shop/files/n201908061644523830175_{width}x.webp?v=1684059800" data-widths="[160, 240, 320]" data-aspectratio="1.3333333333333333" data-sizes="auto" alt="" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="464" height="348" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
test
</div><div class="swiper-slide image__brand">
<a class="icon__brand" href="/collections/balenciaga" aria-label="BOLSINO"><img width="300" height="300" class="lazyload" data-src="//bolsino.com/cdn/shop/files/o.51_{width}x.jpg?v=1684059830" data-widths="[160, 240, 320]" data-aspectratio="1.0" data-sizes="auto" alt="" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
test
</div></div><div class="swiper-pagination swiper-pagination-primary swiper-pagination-outside swiper-pagination-template--18868852588892__fd2d4470-460a-45dc-98fd-cc2a53f3e980"></div></div><div class="swiper-buttons position-absolute">
<div class="content-buttons position-relative">
<div class="swiper-button-prev sw-btn-prev-template--18868852588892__fd2d4470-460a-45dc-98fd-cc2a53f3e980 fkt-2x fkt-va"></div>
<div class="swiper-button-next sw-btn-next-template--18868852588892__fd2d4470-460a-45dc-98fd-cc2a53f3e980 fkt-2x fkt-va"></div>
</div>
</div></div>
</div>
HTML for second slider:
<div class="swiper-container-fuild position-relative nav-default nav-style-default nav-mode-primary swiper-container-has-nav swiper-container-has-dot swiper-pagination-outside">
<div class="swiper-container brands-slide style-default" data-breakpoints='{"0":{"slidesPerView":2,"spaceBetween":0},"480":{"slidesPerView":2,"spaceBetween":0},"768":{"slidesPerView":3,"spaceBetween":0},"992":{"slidesPerView":4,"spaceBetween":0},"1200":{"slidesPerView":5,"spaceBetween":0}}' data-autoplay="true" data-slides-per-view="5" data-dots="true" data-nav="true" data-prev-el=".sw-btn-prev-template--18868852588892__fd2d4470-460a-45dc-98fd-cc2a53f3e980" data-next-el=".sw-btn-next-template--18868852588892__fd2d4470-460a-45dc-98fd-cc2a53f3e980" data-pagination=".swiper-pagination-template--18868852588892__fd2d4470-460a-45dc-98fd-cc2a53f3e980">
<div class="swiper-wrapper">
<div class="swiper-slide image__brand">
<div class="item-- position-relative">
<a class="icon__brand__category" href="../collections/Boy-Bag" aria-label="BOLSINO">
<img class="lazyload model_image" data-src="//bolsino.com/cdn/shop/files/Boy-Bag.jpg?v=1696531063" data-widths="[160, 240, 240]" data-aspectratio="1" data-sizes="auto" alt="alt text" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
<!--<div class="text-content position-absolute wait-for-css">-->
<h3 class="banner-title">Chanel</h3>
<p class="banner-stitle">Boy Bag</p>
<!-- <a href="#" class="banner-link" aria-label="SHOP NOW ">SHOP NOW <i class="fkt-arrow-right"></i></a> -->
<!-- </div>-->
</div>
</div>
<div class="swiper-slide image__brand">
<div class="item-- position-relative">
<a class="icon__brand__category" href="../collections/Classic-Flap" aria-label="BOLSINO">
<img class="lazyload model_image" data-src="//bolsino.com/cdn/shop/files/Classic-Flap.jpg?v=1696531063" data-widths="[160, 240, 240]" data-aspectratio="1" data-sizes="auto" alt="alt text" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
<!--<div class="text-content position-absolute wait-for-css">-->
<h3 class="banner-title">Chanel</h3>
<p class="banner-stitle">Classic Flap</p>
<!-- <a href="#" class="banner-link" aria-label="SHOP NOW ">SHOP NOW <i class="fkt-arrow-right"></i></a> -->
<!-- </div>-->
</div>
</div>
<div class="swiper-slide image__brand">
<div class="item-- position-relative">
<a class="icon__brand__category" href="../collections/Crush" aria-label="BOLSINO">
<img class="lazyload model_image" data-src="//bolsino.com/cdn/shop/files/Crush.jpg?v=1696531063" data-widths="[160, 240, 240]" data-aspectratio="1" data-sizes="auto" alt="alt text" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
<!--<div class="text-content position-absolute wait-for-css">-->
<h3 class="banner-title">Chanel</h3>
<p class="banner-stitle">Crush</p>
<!-- <a href="#" class="banner-link" aria-label="SHOP NOW ">SHOP NOW <i class="fkt-arrow-right"></i></a> -->
<!-- </div>-->
</div>
</div>
<div class="swiper-slide image__brand">
<div class="item-- position-relative">
<a class="icon__brand__category" href="../collections/Diana" aria-label="BOLSINO">
<img class="lazyload model_image" data-src="//bolsino.com/cdn/shop/files/Diana.jpg?v=1696531063" data-widths="[160, 240, 240]" data-aspectratio="1" data-sizes="auto" alt="alt text" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
<!--<div class="text-content position-absolute wait-for-css">-->
<h3 class="banner-title">Chanel</h3>
<p class="banner-stitle">Diana</p>
<!-- <a href="#" class="banner-link" aria-label="SHOP NOW ">SHOP NOW <i class="fkt-arrow-right"></i></a> -->
<!-- </div>-->
</div>
</div>
<div class="swiper-slide image__brand">
<div class="item-- position-relative">
<a class="icon__brand__category" href="../collections/Drawstring" aria-label="BOLSINO">
<img class="lazyload model_image" data-src="//bolsino.com/cdn/shop/files/Drawstring.jpg?v=1696531063" data-widths="[160, 240, 240]" data-aspectratio="1" data-sizes="auto" alt="alt text" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
<!--<div class="text-content position-absolute wait-for-css">-->
<h3 class="banner-title">Chanel</h3>
<p class="banner-stitle">Drawstring</p>
<!-- <a href="#" class="banner-link" aria-label="SHOP NOW ">SHOP NOW <i class="fkt-arrow-right"></i></a> -->
<!-- </div>-->
</div>
</div>
<div class="swiper-slide image__brand">
<div class="item-- position-relative">
<a class="icon__brand__category" href="../collections/Kelly" aria-label="BOLSINO">
<img class="lazyload model_image" data-src="//bolsino.com/cdn/shop/files/Kelly.jpg?v=1685295339" data-widths="[160, 240, 240]" data-aspectratio="1" data-sizes="auto" alt="alt text" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
<!--<div class="text-content position-absolute wait-for-css">-->
<h3 class="banner-title">Chanel</h3>
<p class="banner-stitle">Kelly</p>
<!-- <a href="#" class="banner-link" aria-label="SHOP NOW ">SHOP NOW <i class="fkt-arrow-right"></i></a> -->
<!-- </div>-->
</div>
</div>
<div class="swiper-slide image__brand">
<div class="item-- position-relative">
<a class="icon__brand__category" href="../collections/Knot" aria-label="BOLSINO">
<img class="lazyload model_image" data-src="//bolsino.com/cdn/shop/files/Knot.jpg?v=1696531062" data-widths="[160, 240, 240]" data-aspectratio="1" data-sizes="auto" alt="alt text" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
<!--<div class="text-content position-absolute wait-for-css">-->
<h3 class="banner-title">Chanel</h3>
<p class="banner-stitle">Knot</p>
<!-- <a href="#" class="banner-link" aria-label="SHOP NOW ">SHOP NOW <i class="fkt-arrow-right"></i></a> -->
<!-- </div>-->
</div>
</div>
<div class="swiper-slide image__brand">
<div class="item-- position-relative">
<a class="icon__brand__category" href="../collections/Mini-Flap" aria-label="BOLSINO">
<img class="lazyload model_image" data-src="//bolsino.com/cdn/shop/files/Mini-Flap.jpg?v=1696531063" data-widths="[160, 240, 240]" data-aspectratio="1" data-sizes="auto" alt="alt text" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
<!--<div class="text-content position-absolute wait-for-css">-->
<h3 class="banner-title">Chanel</h3>
<p class="banner-stitle">Mini Flap</p>
<!-- <a href="#" class="banner-link" aria-label="SHOP NOW ">SHOP NOW <i class="fkt-arrow-right"></i></a> -->
<!-- </div>-->
</div>
</div>
<div class="swiper-slide image__brand">
<div class="item-- position-relative">
<a class="icon__brand__category" href="../collections/Mini-Kelly" aria-label="BOLSINO">
<img class="lazyload model_image" data-src="//bolsino.com/cdn/shop/files/Mini-Kelly.jpg?v=1696531063" data-widths="[160, 240, 240]" data-aspectratio="1" data-sizes="auto" alt="alt text" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
<!--<div class="text-content position-absolute wait-for-css">-->
<h3 class="banner-title">Chanel</h3>
<p class="banner-stitle">Mini Kelly</p>
<!-- <a href="#" class="banner-link" aria-label="SHOP NOW ">SHOP NOW <i class="fkt-arrow-right"></i></a> -->
<!-- </div>-->
</div>
</div>
<div class="swiper-slide image__brand">
<div class="item-- position-relative">
<a class="icon__brand__category" href="../collections/Monaco" aria-label="BOLSINO">
<img class="lazyload model_image" data-src="//bolsino.com/cdn/shop/files/Monaco.jpg?v=1696531063" data-widths="[160, 240, 240]" data-aspectratio="1" data-sizes="auto" alt="alt text" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
<!--<div class="text-content position-absolute wait-for-css">-->
<h3 class="banner-title">Chanel</h3>
<p class="banner-stitle">Monaco</p>
<!-- <a href="#" class="banner-link" aria-label="SHOP NOW ">SHOP NOW <i class="fkt-arrow-right"></i></a> -->
<!-- </div>-->
</div>
</div>
<div class="swiper-slide image__brand">
<div class="item-- position-relative">
<a class="icon__brand__category" href="../collections/NA" aria-label="BOLSINO">
<img class="lazyload model_image" data-src="//bolsino.com/cdn/shop/files/NA.jpg?v=1696531063" data-widths="[160, 240, 240]" data-aspectratio="1" data-sizes="auto" alt="alt text" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
<!--<div class="text-content position-absolute wait-for-css">-->
<h3 class="banner-title">Chanel</h3>
<p class="banner-stitle">NA</p>
<!-- <a href="#" class="banner-link" aria-label="SHOP NOW ">SHOP NOW <i class="fkt-arrow-right"></i></a> -->
<!-- </div>-->
</div>
</div>
<div class="swiper-slide image__brand">
<div class="item-- position-relative">
<a class="icon__brand__category" href="../collections/Timeless" aria-label="BOLSINO">
<img class="lazyload model_image" data-src="//bolsino.com/cdn/shop/files/Timeless.jpg?v=1696531063" data-widths="[160, 240, 240]" data-aspectratio="1" data-sizes="auto" alt="alt text" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
<!--<div class="text-content position-absolute wait-for-css">-->
<h3 class="banner-title">Chanel</h3>
<p class="banner-stitle">Timeless</p>
<!-- <a href="#" class="banner-link" aria-label="SHOP NOW ">SHOP NOW <i class="fkt-arrow-right"></i></a> -->
<!-- </div>-->
</div>
</div>
<div class="swiper-slide image__brand">
<div class="item-- position-relative">
<a class="icon__brand__category" href="../collections/Travel" aria-label="BOLSINO">
<img class="lazyload model_image" data-src="//bolsino.com/cdn/shop/files/Travel.jpg?v=1696531063" data-widths="[160, 240, 240]" data-aspectratio="1" data-sizes="auto" alt="alt text" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
<!--<div class="text-content position-absolute wait-for-css">-->
<h3 class="banner-title">Chanel</h3>
<p class="banner-stitle">Travel</p>
<!-- <a href="#" class="banner-link" aria-label="SHOP NOW ">SHOP NOW <i class="fkt-arrow-right"></i></a> -->
<!-- </div>-->
</div>
</div>
<div class="swiper-slide image__brand">
<div class="item-- position-relative">
<a class="icon__brand__category" href="../collections/WOC" aria-label="BOLSINO">
<img class="lazyload model_image" data-src="//bolsino.com/cdn/shop/files/WOC.jpg?v=1696531063" data-widths="[160, 240, 240]" data-aspectratio="1" data-sizes="auto" alt="alt text" src='data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100% 100%"><rect style="fill:transparent" width="100%" height="100%"/></svg>'>
</a>
<!--<div class="text-content position-absolute wait-for-css">-->
<h3 class="banner-title">Chanel</h3>
<p class="banner-stitle">WOC</p>
<!-- <a href="#" class="banner-link" aria-label="SHOP NOW ">SHOP NOW <i class="fkt-arrow-right"></i></a> -->
<!-- </div>-->
</div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-primary swiper-pagination-outside swiper-pagination-template--18868852588892__fd2d4470-460a-45dc-98fd-cc2a53f3e980"></div>
</div>
<div class="swiper-buttons position-absolute">
<div class="content-buttons position-relative">
<div class="swiper-button-prev sw-btn-prev-template--18868852588892__fd2d4470-460a-45dc-98fd-cc2a53f3e980 fkt-2x fkt-va"></div>
<div class="swiper-button-next sw-btn-next-template--18868852588892__fd2d4470-460a-45dc-98fd-cc2a53f3e980 fkt-2x fkt-va"></div>
</div>
</div>
</div>
So why is it that the arrows and dots are not appearing in my second slider on the collection page?
If you need more info, please DM me.
Many thanks in advance !
Hello @ptrsmnl
Please make sure your collection page has script code related to .swiper-container-founded
Swiper needsscript code to start
How can I make sure it has the necessary script? I assume the necessary script is in place on the main homepage as there it works ...
I need to have a foundation of code, so I can write it to you, but the solution next time will be different:
<script>
var mySwiper = new Swiper('.swiper-container-fuild', {
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
loop : true,
})
</script>
Can I provide you with the two pages of my website, so you could have a look please ?
sure please email: xxmui@outlook.com
I have sent you a mail with the details.
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025