Add Free Stylish Slider Section in Your Shopify Store

Get this section added to your store absolutely free! When you integrate it into your website, you'll receive a dynamic slider image paired with related content. Additionally, you'll have the flexibility to input customized text alongside a button. This button can be configured to redirect users to any desired URL or collection page upon selection.

By accessing the admin panel and navigating to customization settings, you can explore the inner workings of this section. The necessary code and instructions for seamless implementation on your store.

Upon scrolling down, you'll notice a section labeled "Parallax." You will have input option to enter your desired heading and content. You'll also be able to attach images and define button labels. For instance, you can label the button as "Shop Now" and link it to a specific collection.

After saving the changes, you'll witness a preview of how it will appear on your website. This preview will reflect the real-time adjustments you make. As you slide through the images, you'll see your uploaded content seamlessly integrated into the section.

To access this feature for your own store, simply follow the instructions provided below. You'll find a download link in the description, allowing you to obtain the necessary code. Remember to back up your theme before making any modifications.

Create a new section within your store's backend and paste the provided code. In no time, your website will showcase this engaging section, ready for further customization to align with your brand's aesthetic.

Please follow the steps to install code on your store

1. Create a new file in section

2. Paste the liquid code provided

 {% schema %}
{
"name": "Parralax Section",
"settings": [
{
"type": "text",
"id": "parralex_heading",
"label": "Heading"
}
],
"blocks": [
{
"name": "parralex",
"type": "parralex",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Select Collection"
},
{
"type": "text",
"id": "collection_text",
"label": "Collection Name"
},
{
"type": "textarea",
"id": "collection_textarea",
"label": "Collection Descreption"
},
{
"type": "text",
"id": "button_lable",
"label": "Button Lable"
},
{
"type": "url",
"id": "collection_url",
"label": "Enter Url"
}
],
"limit": 5
}
],
"presets": [
{
"name": "Parallax Section"
}
]
}
{% endschema %}
{{ 'parralex.css' | asset_url | stylesheet_tag }}
{{ 'parralex.js' | asset_url | script_tag }}
<style>
@media only screen and (max-width: 600px) {
.swiper-container-vertical {
display: none;
}
.swiper-container {
width: 100% !important;
}
._shop_btn a {
font-size: 15px !important;
}
._caption_text {
font-size: 27px !important;
}
}
[class^='swiper-button-'] {
transition: all 0.3s ease;
}

.swiper-slide {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.swiper-container {
width: 80%;
height: 100vh;
float: left;
transition: opacity 0.6s ease, transform 0.3s ease;
}

.swiper-container.nav-slider {
width: 20%;
padding-left: 5px;
}

.swiper-container.nav-slider .swiper-slide {
cursor: pointer;
opacity: 0.4;
transition: opacity 0.3s ease;
}

.swiper-container.nav-slider .swiper-slide.swiper-slide-active {
opacity: 1;
}

.swiper-container.nav-slider .swiper-slide .content {
width: 100%;
}

.swiper-container.nav-slider .swiper-slide .content .title {
font-size: 20px;
}

.swiper-container:hover .swiper-button-prev,
.swiper-container:hover .swiper-button-next {
transform: translateX(0);
opacity: 1;
visibility: visible;
}

.swiper-container.loading {
opacity: 0;
visibility: hidden;
}

.swiper-slide {
overflow: hidden;
}

.swiper-slide .slide-bgimg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
}

.swiper-slide .entity-img {
display: none;
}

.swiper-slide .content {
position: absolute;
top: 40%;
left: 0;
width: 50%;
padding-left: 5%;
color: #fff;
}

.swiper-slide .content .title {
font-size: 2.6em;
font-weight: bold;
margin-bottom: 30px;
}

.swiper-slide .content .caption {
display: block;
font-size: 13px;
line-height: 1.4;
transform: translateX(50px);
opacity: 0;
transition: opacity 0.3s ease, transform 0.7s ease;
}

.swiper-slide .content .caption.show {
transform: translateX(0);
opacity: 1;
}

[class^='swiper-button-'] {
width: 44px;
opacity: 0;
visibility: hidden;
}

.swiper-button-prev {
transform: translateX(50px);
}

.swiper-button-next {
transform: translateX(-50px);
}
._shop_btn a {
background-color: red;
font-weight: 800;
font-family: ui-monospace;
font-size: 33px;
padding: 5px 10px 5px 10px;
border-radius: 10px;
border: none;
color: white;
text-decoration: none;
}
</style>
<div style="text-align:center; margin:10px 0 10px 0">
<h1>{{ section.settings.parralex_heading }}</h1>
</div>

<div class="swiper-container main-slider loading">
<div class="swiper-wrapper">
{% for block in section.blocks %}
<div class="swiper-slide">
<figure
class="slide-bgimg"
style="background-image:url({{ block.settings.image | image_url: width: 2048}})"
>
<img
src="{{ block.settings.image | image_url: width: 2048 }}"
class="entity-img"
>
</figure>
<div class="content">
<p class="title _caption_text">{{ block.settings.collection_text }}</p>
<span class="caption ">
{{ block.settings.collection_textarea }}
</span>
{% if block.settings.button_lable %}
<div class="_shop_btn">
<a
{% if block.settings.collection_url %}
href="{{ block.settings.collection_url }}"
{% endif %}
>
{{- block.settings.button_lable -}}
</a>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>
</div>

<!-- Thumbnail navigation -->
<div class="swiper-container nav-slider loading">
<div class="swiper-wrapper" role="navigation">
{% for block_side in section.blocks %}
<div class="swiper-slide">
<figure
class="slide-bgimg"
style="background-image:url({{ block_side.settings.image | image_url: width: 2048 }})"
>
<img
src="{{ block_side.settings.image | image_url: width: 480 }}"
>
</figure>
<div class="content">
<p class="title">{{ block_side.settings.collection_text }}</p>
</div>
</div>
{% endfor %}
</div>
</div>

<script>
// Params
let mainSliderSelector = '.main-slider',
navSliderSelector = '.nav-slider',
interleaveOffset = 0.5;

// Main Slider
let mainSliderOptions = {
loop: true,
speed: 1000,
autoplay: {
delay: 3000,
},
loopAdditionalSlides: 10,
grabCursor: true,
watchSlidesProgress: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
init: function () {
this.autoplay.stop();
},
imagesReady: function () {
this.el.classList.remove('loading');
this.autoplay.start();
},
slideChangeTransitionEnd: function () {
let swiper = this,
captions = swiper.el.querySelectorAll('.caption');
for (let i = 0; i < captions.length; ++i) {
captions[i].classList.remove('show');
}
swiper.slides[swiper.activeIndex].querySelector('.caption').classList.add('show');
},
progress: function () {
let swiper = this;
for (let i = 0; i < swiper.slides.length; i++) {
let slideProgress = swiper.slides[i].progress,
innerOffset = swiper.width * interleaveOffset,
innerTranslate = slideProgress * innerOffset;

swiper.slides[i].querySelector('.slide-bgimg').style.transform = 'translateX(' + innerTranslate + 'px)';
}
},
touchStart: function () {
let swiper = this;
for (let i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = '';
}
},
setTransition: function (speed) {
let swiper = this;
for (let i = 0; i < swiper.slides.length; i++) {
swiper.slides[i].style.transition = speed + 'ms';
swiper.slides[i].querySelector('.slide-bgimg').style.transition = speed + 'ms';
}
},
},
};
let mainSlider = new Swiper(mainSliderSelector, mainSliderOptions);

// Navigation Slider
let navSliderOptions = {
loop: true,
loopAdditionalSlides: 10,
speed: 1000,
spaceBetween: 5,
slidesPerView: 5,
centeredSlides: true,
touchRatio: 0.2,
slideToClickedSlide: true,
direction: 'vertical',
on: {
imagesReady: function () {
this.el.classList.remove('loading');
},
click: function () {
mainSlider.autoplay.stop();
},
},
};
let navSlider = new Swiper(navSliderSelector, navSliderOptions);

// Matching sliders
mainSlider.controller.control = navSlider;
navSlider.controller.control = mainSlider;
</script>

3. Upload the JS and CSS file in Assets

4. Search for Para

If you encounter any issues or have additional questions, feel free to reach out. Contact details are available below for your convenience.

Related article :