Rebuilding Nike Product Page in Flatsome & WooCommerce

In this Flatsome Theme tutorial I rebuild the product page of Nike with UX Builder and UX Blocks. Covering: Variations Swatches, Custom Product Layouts, Custom Fields, Popups, Galleries.

Step-by-Step Guide

Step 1: Set Up Your Product with Variations

1. Create a New Product:

   • Go to Products > Add New in WordPress, name your product, and set it as a Variable Product.

2. Add Attributes and Variations:

   • Go to Attributes and add attributes like color (e.g., Red, Green, Blue) and size (e.g., 36, 37).
   • Set your product attributes to use Variations and enable swatches in Flatsome Settings by going to Flatsome > Advanced > WooCommerce.

3. Set Product Images:

   • Add a main product image and gallery images for each color variation.

Step 2: Enable Custom Layout with UX Blocks

1. Create a New UX Block:

   • Go to UX Blocks > Add New and name it (e.g., “Custom Product Layout”).
   • Set the UX Block as your product layout under Flatsome Theme Options > WooCommerce > Product Page > Custom Layout.

2. Customize the Product Layout:

   • Open the UX Builder and start with a blank section. Add two columns: a larger one for the gallery and a smaller one for product details.

3. Add Product Gallery:

   • In the left column, insert a Product Gallery and set it to “Stacked” to create a clean, modern look.

Step 3: Add Product Details

1. Product Title and Subtitle:

   • Insert a Product Title element, then add an HTML block for a custom subtitle like “Older Kids’ Shoes”.
   • Use custom fields to make the subtitle dynamic. Add a custom field (e.g., “Subline”) and use a shortcode to pull this field dynamically.

2. Price and Add to Cart:

   • Below the subtitle, add the Product Price and Add to Cart buttons.
   • To style the button as full-width, use CSS. Add this code in Flatsome > Advanced > Custom CSS:

.single_add_to_cart_button {
    width: 100%;
}

Step 4: Product Description & Details

1. Short Description:

   • Add a Short Description field in the product’s main settings. Display it in your layout below the price.

2. Popup Product Details:

   • Use a Lightbox feature for additional product information. Insert an HTML block with the following shortcode to create a lightbox pop-up:

[ux_lightbox id="details-popup" width="800px" padding="20px"]
[product_description]
[/ux_lightbox]

3. Product Tabs:

• • For sections like “Size and Fit” and “Delivery & Returns,” add accordions or product tabs. Use Flatsome > WooCommerce > Product Tabs to customize these.

Step 5: Add Custom Banners and Related Products

1. Custom Banners:

   • To recreate Nike’s full-width banners, insert a Full-width Banner at the bottom of your layout. Use custom fields for unique text or images per product.

2. Related Products Section:

   • Insert a Related Products section. Go to Products > Linked Products to set specific upsells or cross-sells.

Additional Tips

• CSS Adjustments: Use the Advanced CSS Editor in Flatsome for additional styling tweaks like adjusting padding and margins.
• Auto-Update Cart: Enable auto-update on quantity change under WooCommerce Settings > Cart for better user experience.
• Responsive Layout: Test on mobile to ensure all elements look clean and accessible.

By following this tutorial, you’ve built a custom product page layout in Flatsome, closely resembling the professional style of Nike’s product pages. With UX Blocks and a few custom fields, you can tailor each page to showcase products dynamically, while maintaining a uniform look that’s both clean and user-friendly.

From image galleries to detailed product tabs, you’ve set up a professional, conversion-focused layout that elevates your e-commerce experience. Experiment with custom fields, CSS styling, and Flatsome’s WooCommerce options to refine and make this layout your own. Good luck with your Flatsome projects, and remember that customizing even small details can create a memorable shopping experience for your customers! Happy designing!