Product List (Builder Items)

Creating a custom shop page can feel like building a puzzle, but with PixeBuilder, it’s a straightforward process of stacking "blocks" together. This guide will walk you through creating a Shop Template, the main storefront where customers can explore your entire product catalog in one place.

Before we build, we need to create the canvas.

1. Open PixeBuilder: On the left-hand menu of your WordPress Dashboard, click on PixeBuilder (indicated by the red arrow in the image below).

2. Go to Templates: Click the Templates tab at the top of the screen.

3. Create New: Click the blue + Create Template button in the top right.

4. Name It: For this exercise, name your template "Demo - Shop" and save it.

Components are the "frames" of your website—the parts that usually stay the same on every page, like the top navigation (Header) and the bottom info (Footer).

In the Components popup:

• Header: Choose your preferred header from the dropdown list.
• Footer: Choose your preferred header from the dropdown list.
• Mobile/Tablet: Leave these as Default so the site automatically adjusts for phones and tablets.

The Layout settings determine how much space your content takes up on the screen.

• Page Type: Set this to Full Width. This allows your product list to breathe and use the entire horizontal space of the browser.
• Content Width: Leave this empty (default) to follow the global site settings.
• Background Colors: Keep these transparent or default to maintain a clean, professional look.

We are going to build two main sections (Containers).

Container 1: The Page Intro
This section tells the customer where they are.

• Heading: This clearly displays 'SHOP' as a title, indicating that this is the main shop page for the website.

Container 2: The Shopping Area
This is the "single room" where products are displayed.

• Product List (Shop): This is the most important element. It sits underneath the column and pulls in your actual products from WooCommerce

Once your Product List (Shop) element is in place, you can fine-tune how it looks using the sidebar settings. Here is a breakdown of the key areas:

• Layout & Alignment: Decide how many products appear in a row (usually 3 or 4).
• Featured Image Settings: You can add borders, shadows, or filters (like making images slightly brighter) to make your products "pop."
• Sale Badge Style: Customize the "SALE!" bubble that appears on discounted items.
• Item Spacing: This is crucial. Use the Padding and Margin settings to ensure there is enough white space between products so the page doesn't look cluttered.
• Pro Tip: When adjusting Item Spacing, notice the icons for Desktop, Tablet, and Mobile. You can set different spacing for each device to ensure your shop looks great on a 24-inch monitor and a 6-inch phone screen!

After building your beautiful designs, the final step is to tell WordPress exactly where to use them. This is called Assigning Templates.

This step connects your design to the "Main Shop" URL of your website. This is the central hub where your entire inventory is displayed.

1. Navigate to PixeBuilder: Click the PixeBuilder icon in your WordPress sidebar.

2. Assign Templates: Click the Templates tab, then select the Assign Templates.

3. Locate Shop (Woocommerce): Scroll down to the Archives section. Find the box specifically labeled Shop (Woocommerce).

4. Select Your Design: Click the dropdown and choose your main shop layout.