Product Carousel with Custom Badges

Product Collection Carousel with Custom Badges using SwiperJS

Log in or Sign up to ensure access to purchased code across multiple devices.

How to see the code

1. Please log in/create an account first. This is to ensure that all purchases are connected to an account and can be viewed on different devices.

2. Purchase the code using the "purchase box" on the specific page of the desired code.

3. After the purchase, please refresh the page.

Compatibility:  All  Shopify 2.0 FREE themes  ONLY  - version 14 and higher

Have you ever felt limited by static product listings on your Shopify store? SwiperJS can be your hero! Let's explore what it is and how it can transform your product displays. 

Check our demo store before purchasing. Password: made4uo

What is SwiperJS?

SwiperJS is a lightweight JavaScript library specifically designed for creating touch-enabled sliders. These sliders, also known as carousels, allow users to effortlessly swipe through content on any device. SwiperJS offers a modern and versatile approach, making it a popular choice for web developers.

What is a Product Collection Carousel with Custom Badges?

A product collection carousel is a visually engaging way to showcase a group of products on your Shopify store. Imagine a horizontal row where you can swipe through different products, similar to how you navigate through photos on your phone.

Custom badges are visual elements you can add to individual products within the carousel. These badges can highlight specific features, promotions, or new arrivals, grabbing customer attention and influencing purchasing decisions.

Here are some examples of custom badge content:

  • Sale: "50% Off!"
  • New: "New Arrival"
  • Free Shipping: "Free Shipping"

Combining SwiperJS and Custom Badges: A Powerful Duo

By integrating SwiperJS carousels with custom badges, you unlock a dynamic way to present your product collections:

  • Enhanced Browsing: Carousels provide an intuitive way to browse products, especially on touch-enabled devices. Customers can easily swipe through the carousel to discover new items.
  • Targeted Promotion: Custom badges effectively draw attention to products with special offers or new arrivals, potentially boosting sales.
  • Space Optimization: Carousels allow you to display a larger number of products within a compact area, maximizing your product page real estate.
  • Visual Appeal: The combination of interactive carousels and eye-catching badges creates a visually engaging product display, potentially leading to increased customer engagement.

    Additional Considerations:

    • Badge Design: Meticulously design your custom badges to seamlessly integrate with your store's overall aesthetic. Ensure they are clear, concise, and visually appealing to effectively capture customer attention.
    • Badge Placement: Strategically position your badges to avoid obscuring crucial product details. Consider placing them near product images, titles, or in the corners of the slides.
    • Badge Content: Craft compelling badge content that entices customers. This could include sale notifications, new arrival announcements, percentage discounts, or unique product features.
    • Product title: Make sure your product titles are not so long that they cramp up your product cards.

    Combining SwiperJS Carousels with Custom Badges

    By incorporating SwiperJS carousels with custom badges, you can unlock a powerful combination for showcasing your product collections:

    • Targeted Product Promotion: Custom badges, strategically placed within the carousel slides, act as visual cues that effectively draw attention to specific products. You can leverage them to showcase special offers, highlight new arrivals, or promote specific product categories, ultimately influencing customer behavior and driving sales.
    • Increased Engagement: The interactive nature of carousels encourages customers to explore further, potentially leading them to discover products they might not have noticed otherwise. Combined with the attention-grabbing badges, this can significantly increase customer engagement with your product collections.

    What you are buying:

    • Customizable product collection
    • Able to add multiple badges
    • Responsive to desktop, tablet and mobile
    • Able to have different image for products
    • Able to add small description to the product
    • Will not affect your website performance even we are using third party library

    What makes our code better:

    • We do not use external libraries, with that being said, our code will have no to minimal effect to your website's speed performance
    • We do not leave or add codes use to advertise for our website
    • Our code is mobile friendly

    Any issues related to the code will be fix with no additional cost, excluding code customization requests. Simply contact us with "Chat with us." We are just a button away. 

    Steps on how to add Product Collection Carousel with Custom Badges using SwiperJS

    Step #1. Open your code editor

    From you Admin page, go to Online store, then Themes. Choose the theme you want to edit, then click the three dots, then Edit code

    Step #2. Create a new section file

    In Section folder, create a new section, name it whatever you want, then replace the default code with the code below.

    Step #3. Save the changes

    Once you've added the code, save your changes to the theme code by clicking the SAVE button on the right hand upper corner.

    Step #4. Add the code to the theme.liquid

    In Layout folder, open the theme.liquid. Then find the code "{% render 'meta-tags' %}". Make a new line, and add the code below. Make sure to SAVE.

    Step #5. Create an Asset file

    Go to the Asset folder, and create a new asset file. Click "Create blank file". Set the extension to "css", and  file name "swiper", click Done. Then place the code below. Make sure to SAVE.

    Step #6. Create an Asset file

    Go to the Asset folder, and create a new asset file. Click "Create blank file". Set the extension to "js", and  file name "swiper", click Done. Then place the code below. Make sure to SAVE.

    Step #7. Customize theme

    Go to the theme editor by clicking three dots on your left hand upper corner, then Customize theme. Add a section named "Swiper collection". Make sure to SAVE once you are done customizing.

    Conclusion

    SwiperJS, coupled with custom badges, offers a compelling way to showcase product collections on your Shopify store. This combination provides an interactive and visually appealing shopping experience for your customers, ultimately leading to potential increases in sales and brand engagement.

    Copied!
    Back to blog

    Leave a comment