All Collections
Website Builder
Online Store
Website Builder: Product Sections
Website Builder: Product Sections

With the help of product sections, you can easily display products or their categories on your website

Updated over a week ago

With Hostinger Website Builder, you can easily add product sections to your site by following the steps below 👇

1. Within the builder, expand the Pages and navigation panel on the left and open the page where you wish to display products. On that page, click on Add section:

2. From the sections' menu, select Online store. On the right, you'll find two types of product sections – product list and single product click on the preferred section, and it'll be inserted into your page:

Product List Section

This type of section is used to display all your products or a particular product category. By default, it shows all your products. To display products from a particular category, click on Edit section:

Select the preferred category here:

Learn more about the product list section settings:

Category

Display:

  • All products, or

  • A specific product category

Layout

Change the following:

  • Product display style

  • Columns (products per row)

  • Top/bottom padding of the section

Style

Change the following:

  • Text color

  • Section background color (color or image)

Learn more:

Pagination

Specify the number of products per page (within the product list section)

Add to bag button

Enable the Add to bag 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

Ribbons

Change the following:

  • Ribbon background color

  • Ribbon text color

You can enable ribbons in the product management area

Single Product Section

Use this type of section to display a particular product. Click on Assign product:

Assigning a particular product to a particular product section in Hostinger Website Builder

And then select a particular product to display in that section:

Assigning a particular product to a particular product section in Hostinger Website Builder

Learn more about the single product section settings:

Product

Assign a particular product to the particular product section

Layout

Change the following:

  • Text alignment

  • Gallery placement

  • Image ratio

  • Image corner radius

  • Top/bottom padding of the section

Style

Change the following:

  • Text color

  • Arrows color on images

  • Arrows color on gallery

  • Section background (color or image)

Learn more:

Button

Change the following

  • Button text

  • Button style

  • Button shape

  • Secondary button styles (normal and on hover)

  • Button size

Enable quantity picker

Allow or disallow your clients to choose product quantity by enabling or disabling the quantity picker

NOTES

  • If you update product details in the product management area, remember to update your website for these changes to appear online

  • Multiple languages are not supported in the store: products are displayed in the default store's language

    • For instance, if the default language of your store is EN, but you have additionally enabled ES, FR, DE languages on your site, the products will be displayed in English in all the website versions

Did this answer your question?