Turning Divi’s Shop Module into Dynamic Product Swipe Cards on Mobile

Elegant Themes

When building a landing page for specific products, whether it’s a new launch or a sale you’re preparing for, chances are high you’ll use the Shop Module at some point. Divi’s Shop Module allows you to dynamically pull products from the WooCommerce plugin and style the products using Divi’s built-in options. Now, by default, the shop module comes with a few column structures that all translate into two columns on smaller screen sizes. This means that the more products you choose to show, the more vertical scrolling is required to get to the next part of your landing page.In modern web design, an often-used technique to limit vertical scrolling and show items based on your visitors’ preference is using swipe cards. In this tutorial, we’ll show you how to turn the Divi Shop Module into dynamic product swipe cards on smaller screen sizes without using a plugin. We’ll start by preparing the different elements in our product section and use a small amount of CSS code to enable the swipe effect. This is a great way to show a wide range of products within your landing page without overwhelming your visitors. You’ll be able to download the JSON file for free as well!Go to the blog post:https://www.elegantthemes.com/blog/divi-resources/turning-divis-shop-module-into-dynamic-product-swipe-cards-on-mobileDownload the Yoga Instructor Layout Pack:https://www.elegantthemes.com/blog/divi-resources/get-a-free-stationery-shop-layout-pack-for-diviIf you don’t have Divi yet, you can learn more about this powerful theme on our website using the link below:https://www.elegantthemes.com/gallery/divi/ Want to give back to the community? Share your empowering knowledge, skills, experience, and creativity on the Elegant Themes blog by contributing:https://www.elegantthemes.com/blog/community/elegant-themes-blog-submissions