The product page is arguably the most important page on any eCommerce site as that is where you’ll be getting folks to add your products to their cart and hopefully complete the checkout process.

When we look at the Abercrombie & Fitch site we see that their product pages have a relatively clean and minimal layout with product images on the left, then a column for the product details off to the right. They also have some marketing in there to remind folks about the shipping procedures and discounts they can be eligible for, if you recall we also set up a free shipping discount if the customers order $150 or more in Part 1 of the Tutorial Series.

With a standard Divi install we can get pretty close to this layout, but something like BodyCommerce would be required to have things like the vertical gallery module and fancy variation swatches. Definitely check out BodyCommerce if you want to be fancy like that 😎

Video Tutorial

Snippet 14: Add padding to variation drop-downs

We just want to add a little more padding around the text in the drop-down so that it matches the look on the Abercrombie & Fitch site.

Woo Add to Cart Module > Advanced > Custom CSS > Dropdown Menus

Check out your spiffy product page…

Conclusion

Wow, look at you, you almost have a fully functioning eCommerce site built that strongly resembles the Abercrombie & Fitch shopping experience. The product page was one of the last critical templates for us to get built in the Clone Any Online Store series before we start polishing the details of our site.

In the next installment, we will be building out the archive pages and my account sections of our Divi site.

Definitely head to our Youtube Channel and subscribe to make sure you don’t miss a single thing because this is going to be valuable for you and your design agency!

Catch you folks next week!