How to Clone any Online Store with Divi and WooCommerce: Part 2 – Building the Homepage

Divi Engine

Welcome to Part 2 of our Tutorial Series that will teach you skills that will enable you to clone pretty much any online store regardless of which platform it was built on.We will be using WooCommerce along with the Divi Theme. In our second installment, we will show you how to build out the Homepage which draws inspiration from the Abercrombie & Fitch website.Join us over the next 3 weeks as we dive into creating a clone of a popular online apparel brand step-by-step.LINKSText Tutorial with CODE: https://diviengine.com/clone-any-online-store-tutorial-series-part-2-building-the-homepage/Images on Pexels: https://www.pexels.com/search/fashion/CHAPTERS00:00 Introduction01:07 Hero Section with Image Slider08:36 Snippet 1: Change Slider Animation to Fade from Right14:09 Snippet 2: Vertically Center Modules in Row Column18:06 Snippet 3: Change Button Width19:43 Snippet 4: Place Button Modules Inline Next to Each Other22:25 Adding New Products Section28:11 Snippet 5: Remove Product Bottom Margin28:49 Snippet 6: Remove Title, Rating Container, Star Rating, Price, & Old Price29:36 Snippet 7: Remove Price artifact34:17 Add Large Image Sections for Product Categories39:30 Add Location Section42:29 Check Responsiveness45:04 Conclusion