Part 2: Building the Product Page

We are getting closer to being almost done with the “build” part of the Clone Any Online Store tutorial series after finishing our footers in the last installment. We left one of the most important pieces of the puzzle for last, the Product Page. We will be using the Divi Theme Builder once again to create a template that will be used for all the products on our site and it is going to look great!

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

Table of Contents

Difficulty

Intermediate

Time

25 Minutes

Clone Any Online Store Tutorial Series: Part 2 – Building the Product Page

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!