10Web Help Center

Hi, how can we help?

How to Build and Customize Shop Page with 10Web Builder

Copy article URL

in this article

The shop page is the central element of any eCommerce site. A visually appealing and ergonomic layout is crucial for boosting sales and improving the user experience of your customers.
WooCommerce, one of the most popular eCommerce plugins for WordPress, is pre-installed on all eCommerce websites created with the AI Builder. It generates a shop page automatically; however, this is a rather static pre-built page. This is where 10Web Builder and its template functionalities come into play.
This article will walk you through the main flows for customizing your shop page with 10Web Builder in combination with WooCommerce.

Editable shop page in 10Web Builder: how it works

As mentioned, the shop page pre-created by WooCommerce is not editable by default. This is why a workaround in the form of templates is implemented in AI Builder.
The Products Archive template is a custom archive template that is applied to the shop page (labeled as Products Archive in the WP Admin backend). It can be accessed from 10Web dashboard > AI Builder > Archive tab or directly from the WP Admin Templates menu in the archive tab.

Customizing your AI-created shop page

If you use AI Builder to generate your eCommerce store, the WooCommerce plugin will be pre-installed, and the Products Archive template will be generated by default. To access it:

  1. Go to 10Web dashboard > AI Builder > Archive tab.

    Note:

    You can also edit it directly from WP Admin > Templates menu > 10Web templates > Archive tab.

  2. Find the Products Archive template. 
  3. Click on Edit next to it and start customizing.

By default, the Products Archive template will be pre-populated with the following widgets:

  • Heading: Static title of your website. Learn more about the Heading widget here.
  • Archive title/description: Dynamic widget that fetches the title of your archive page (title of the assigned shop page in this case). Learn more about the Heading widget here.
  • Products: Dynamically fetches WooCommerce products and displays them on the page. Learn more about the Products widget here.

 

As you configure the archive page, you can add more widgets to it, expanding its functionality and informational capacity. For a list of premium eCommerce widgets available with 10Web Builder, please visit the dedicated section of our Help Center.

Creating a shop page template from scratch

If you are building your site from scratch without Generative AI, there are several additional steps to set up a customizable Products Archive template:

  1. Install the WooCommerce plugin: You can do this from the 10Web dashboard (learn more about installing plugins via 10Web dashboard here) or from the Plugins menu of your WP Admin dashboard.
  2. Complete the initial setup of your WooCommerce store: Follow the setup hints available from the WooCommerce menu of your WP Admin dashboard and add some products to prepopulate your shop.

    Note:

    The shop page will be created by WooCommerce automatically after the installation, so it is not necessary to complete all the steps of the initial setup to proceed with customizing the shop page archive.

  3. Create a shop page template:
    • Go to Templates > 10Web Templates and press “Add New Template.”
    • Choose Archive as the template type and name it as you wish (we’ll use Products Archive title in this article’s example for consistency).
    • Once created, the new template will open in the editor where you can start customizing your shop page.
    • Add any visuals and widgets you see fit for your page. Please note that to display your products in the shop, you will need to add the dynamic Products widget that will fetch products to your shop page and configure it. For the widget’s general mechanics and a detailed list of settings available, please visit this article.
  4. Apply the new template to your product archive:
    In the top right corner next to Save & Publish click the arrow down and in the resulting dropdown choose Display Conditions. Configure it as follows and save the condition:
    Include
    Product Archive
    All products

    Note:

    If you want the shop page to display only certain products filtered by tags, categories, etc., you can tweak the condition accordingly anytime.

  5. Save & Publish.

Now your shop page will comply with the design template you’ve just created and applied. You can always go back to it for additional design touches from 10Web Templates > Archive menu of WP Admin.

in this article