As an online business owner, it’s crucial to have an attractive and functional website that effectively showcases your products. One of the most effective ways to do this is by using a product image slider on your home page. A product image slider can display your top products in a visually appealing way, and can help customers easily navigate through your offerings. In this guide, we’ll walk you through the steps to create a product image slider on the home page of your Shopify store, so you can engage your customers and drive more sales.
Follow Below steps
- Go to theme -> Action -> Edit Code -> Layout -> theme.liquid
- Find </head> and paste the below code just above this close head tag
<!-- CSS --> <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"> <!-- JavaScript --> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
3. Open Sections -> main-product.liquid and find the below code.
<slider-component class="slider-mobile-gutter">
<a class="skip-to-content-link button visually-hidden" href="#ProductInfo-{{ section.id }}">
{{ "accessibility.skip_to_product_info" | t }}
</a>
<ul class="product__media-list grid grid--peek list-unstyled slider slider--mobile" role="list">
{%- assign variant_images = product.images | where: 'attached_to_variant?', true | map: 'src' -%}
{%- if product.selected_or_first_available_variant.featured_media != null -%}
{%- assign media = product.selected_or_first_available_variant.featured_media -%}
<li class="product__media-item grid__item slider__slide{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
{% render 'product-thumbnail', media: media, position: 'featured', loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true %}
</li>
{%- endif -%}
{%- for media in product.media -%}
{%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
<li class="product__media-item grid__item slider__slide{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
{% render 'product-thumbnail', media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true %}
</li>
{%- endunless -%}
{%- endfor -%}
</ul>
<div class="slider-buttons no-js-hidden{% if product.media.size < 2 %} small-hide{% endif %}">
<button type="button" class="slider-button slider-button--prev" name="previous" aria-label="{{ 'accessibility.previous_slide' | t }}">{% render 'icon-caret' %}</button>
<div class="slider-counter caption">
<span class="slider-counter--current">1</span>
<span aria-hidden="true"> / </span>
<span class="visually-hidden">{{ 'accessibility.of' | t }}</span>
<span class="slider-counter--total">{% if section.settings.hide_variants %}{{ product.media.size | minus: variant_images.size | plus: 1 }}{% else %}{{ product.media.size }}{% endif %}</span>
</div>
<button type="button" class="slider-button slider-button--next" name="next" aria-label="{{ 'accessibility.next_slide' | t }}">{% render 'icon-caret' %}</button>
</div>
</slider-component> 4. Replace the above code with the below code.
{% if product.images != null %}
<div class="carousel product__image-slider" role="document" aria-label="{{ 'products.modal.label' | t }}" tabindex="0">
{%- for media in product.media -%}
<div class="carousel-cell">
{% if media.media_type == "video" %}
{{ media | media_tag: image_size: "720x", autoplay: true, loop: loop, controls: true, preload: "none", autoplay: true, height: "100%", width: "100%" }}
{% else %}
<img data-flickity-lazyload-srcset="
{{ media | img_url: '1440x' }} 1440w,
{{ media | img_url: '1080x' }} 1080w,
{{ media | img_url: '720x' }} 767w,
{{ media | img_url: '480x' }} 480w"
sizes="(min-width: 480px) 1440px, 1080px, 767px, 480px"
data-flickity-lazyload-src="{{ media | img_url: 'master' }}"
alt="{{ media.alt | escape }}"
border="0"
data-media-id="{{ media.id }}" />
{% endif %}
</div>
{%- endfor -%}
<!--- Coded by bluish.io --->
</div>
{% if product.images.size > 1 %}
<div class="carousel product__image-thumbnail">
{%- for media in product.media -%}
<div class="carousel-cell">
<img data-flickity-lazyload-srcset="
{{ media | img_url: '1440x' }} 1440w,
{{ media | img_url: '1080x' }} 1080w,
{{ media | img_url: '720x' }} 767w,
{{ media | img_url: '480x' }} 480w"
sizes="(min-width: 480px) 1440px, 1080px, 767px, 480px"
data-flickity-lazyload-src="{{ media | img_url: 'master' }}"
alt="{{ media.alt | escape }}"
border="0"
data-media-id="{{ media_id }}" />
</div>
{%- endfor -%}
<!--- Coded by ramzanmalik.in --->
</div>
{% endif %}
{% else %}
{{ 'product-1' | placeholder_svg_tag }}
{% endif %} 5. Find {% schema %} in the same main-product.liquid file and paste below code just above {% schema %}
<script>
var elem = document.querySelector('.carousel.product__image-slider');
var flkty = new Flickity( elem, {
contain: true,
imagesLoaded: true,
lazyLoad: 1,
wrapAround: true,
pageDots: false,
{% if product.images.size < 2 %}
prevNextButtons: false,
{% endif %}
adaptiveHeight: true
});
var elemThumbnail = document.querySelector('.carousel.product__image-thumbnail');
var flktyB = new Flickity( elemThumbnail, {
asNavFor: '.carousel.product__image-slider',
contain: true,
imagesLoaded: true,
lazyLoad: 4,
pageDots: false,
prevNextButtons: false
});
</script> 6. Go to Assets -> base.css and paste the below code at last.
.product__image-slider {
width: 100%;
}
.product__image-slider .carousel-cell {
width: 100%;
height: auto;
margin: 0 5px
}
.product__image-slider .carousel-cell img {
width: 100%;
height: 100%;
}
.grid__item .product__image-slider {
margin-bottom: 2rem;
}
.product__image-slider .flickity-viewport {
transition: height 0.2s;
}
.flickity-button:disabled {
display: none;
}
.product__image-thumbnail .carousel-cell {
width: 20%;
margin-right: 10px;
}
.product__image-thumbnail .carousel-cell img {
width: 100%;
height: 100%;
}
@media screen and (min-width: 990px) {
.product:not(.product--no-media):not(.featured-product) .product__media-wrapper {
max-width: 50% !important;
width: calc(50% - 1rem / 2) !important;
}
.product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
max-width: 50% !important;
width: calc(50% - 1rem / 2) !important;
}
} 7. Go to Assets -> global.js and find below the code
constructor() {
super();
this.addEventListener('change', this.onVariantChange);
} 8. Replace the above code with the below code.
constructor() {
super();
this.initLoad();
this.addEventListener('change', this.onVariantChange);
}
initLoad(){
this.updateOptions();
this.updateMasterId();
this.updateMedia();
} 9. Find the below code in the same global.js file.
updateMedia() {
if (!this.currentVariant) return;
if (!this.currentVariant.featured_media) return;
const newMedia = document.querySelector(
`[data-media-id="${this.dataset.section}-${this.currentVariant.featured_media.id}"]`
);
if (!newMedia) return;
const modalContent = document.querySelector(`#ProductModal-${this.dataset.section} .product-media-modal__content`);
const newMediaModal = modalContent.querySelector( `[data-media-id="${this.currentVariant.featured_media.id}"]`);
const parent = newMedia.parentElement;
if (parent.firstChild == newMedia) return;
modalContent.prepend(newMediaModal);
parent.prepend(newMedia);
this.stickyHeader = this.stickyHeader || document.querySelector('sticky-header');
if(this.stickyHeader) {
this.stickyHeader.dispatchEvent(new Event('preventHeaderReveal'));
}
window.setTimeout(() => { parent.querySelector('li.product__media-item').scrollIntoView({behavior: "smooth"}); });
} 10. Replace the above code with the below code.
updateMedia() {
if (!this.currentVariant) return;
if (!this.currentVariant.featured_media) return;
var current_media_id = this.currentVariant.featured_media.id;
// For product page with flickity
if (document.querySelector('.product__image-slider')) {
var media_len = document.querySelector('.product__image-slider .flickity-slider').childElementCount;
var media_id_array = [];
for (let i = 0; i < media_len; i++) {
media_id_array.push(parseInt(document.querySelector('.product__image-slider').querySelectorAll("img")[i].getAttribute('data-media-id')));
}
flkty.select(media_id_array.indexOf(current_media_id));
}
// For featured products on homepage without flickity
else if (document.querySelector('.product__media-list')) {
var featured_product_media_len = document.querySelector('.product__media-list').childElementCount;
for (let i = 0; i < featured_product_media_len; i++) {
var child = document.querySelector('.product__media-list').children[i];
if (child.getAttribute('data-media-id').indexOf(current_media_id) > 0) {
child.style.display = "block";
} else {
child.style.display = "none";
}
}
}
} Bonus: Some design tips for creating an effective Shopify home page:
- Keep it simple and uncluttered: A cluttered home page can be overwhelming and confusing for visitors. Keep your design clean and simple, and make sure it’s easy to navigate.
- Use high-quality images: Your home page is the first thing visitors will see, so it’s important to make a good impression. Use high-quality images that showcase your products and reflect your brand.
- Highlight your unique selling points: Use your home page to showcase what makes your brand and products unique. This could be your pricing, free shipping, high-quality materials, or anything else that sets you apart from the competition.
- Use clear and concise copy: Make sure your copy is easy to read and understand. Use short paragraphs and bullet points to highlight your key selling points.
- Use a strong call to action: Your home page should include a clear and compelling call to action, such as “Shop Now” or “Sign Up for Our Newsletter”. Make sure it’s prominently displayed and easy to find.
- Make it mobile-friendly: With more and more people using their phones to shop online, it’s important to ensure that your home page is optimized for mobile devices.
- Test and iterate: Finally, don’t be afraid to experiment with different designs and layouts. Use analytics and user feedback to continually improve your home page and drive more sales.
If you need any support don’t worry to contact me. Learn more about me
