Dynamic Product Swipe Cards on Mobile

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.