{"id":811,"date":"2022-09-07T12:05:54","date_gmt":"2022-09-07T12:05:54","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2022\/09\/07\/6538352-hostinger-website-builder-product-sections\/"},"modified":"2026-08-28T04:55:12","modified_gmt":"2026-08-28T04:55:12","slug":"6538352-hostinger-ai-builder-manual-mode-product-sections","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/6538352-hostinger-ai-builder-manual-mode-product-sections\/","title":{"rendered":"Hostinger AI Builder: How to add and customize product sections in manual mode"},"content":{"rendered":"

Display products or product categories on your Hostinger AI Builder manual mode website using product sections.<\/p>

Add a product section<\/h2>
    \n
  1. Within the builder, expand the Pages and navigation <\/b>panel on the left.<\/li>\n
  2. Open the page where you wish to display products. On that page, click on Add section<\/b>:
    \n\"\"<\/li>\n
  3. From the sections’ menu, select Online store<\/b>. On the right, you’ll find two types of product sections – product list<\/a><\/b> and single product<\/a> <\/b>– <\/b>click on the preferred section, and it’ll be inserted into your page:
    \n\"\"<\/li>\n<\/ol>

    Product list section<\/h2>

    This type of section is used to display all your products or a particular product category<\/a><\/b>. By default, it shows all your products. To display products from a particular category:<\/p>

      \n
    1. Click on Edit section:
      \n\"\"
      \n<\/b><\/li>\n
    2. Select the preferred category<\/b> here:
      \n\"\"<\/li>\n<\/ol>

      Learn more about the product list section settings<\/b>:<\/p>

      \n\n\n\n\n\n\n\n\n
      \n

      Filters<\/b><\/p>\n<\/td>\n

      		\n

      Display:<\/p>\n

        \n
      • \n

        All products, or<\/p>\n<\/li>\n

      • \n

        A specific product category<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n

      \n

      Layout<\/b><\/p>\n<\/td>\n

      		\n

      Change the following:<\/p>\n

        \n
      • \n

        Product display style<\/p>\n<\/li>\n

      • \n

        Columns (products per row)<\/p>\n<\/li>\n

      • \n

        Top\/bottom padding of the section<\/p>\n<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n

      \n

      Style<\/b><\/p>\n<\/td>\n

      		\n

      Change the following:<\/p>\n

      \n

      Search<\/b><\/p>\n<\/td>\n

      		\n

      Enable product search<\/p>\n<\/td>\n<\/tr>\n

      \n

      Add to bag button<\/b><\/p>\n<\/td>\n

      		\n

      Enable the Add to bag<\/b> button, so your clients can preview a product and\/or add it to the cart without opening the product page; you can also change the button style there<\/p>\n<\/td>\n<\/tr>\n

      \n

      Ribbons<\/b><\/p>\n<\/td>\n

      		\n

      Change the following:<\/p>\n