Product List Section
Single Product Section
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 any website template by following the steps below 👇

1. Within the website builder, expand the Pages and navigation panel on the left and open the page where you'd like to display products. On that page, click the button 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, thus, to display products from a particular category, click 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 could preview a product and/or add it to the cart without opening the product page

You can also change its style here

Ribbons

Change the following:

  • Ribbon background color

  • Ribbon text color

You can add ribbons in the product management area

Single Product Section

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

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

Learn more about the single product section settings:

Product

Assign a specific product to the 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 the changes to appear online

  • Multiple languages are not supported in the store, i.e., products can only be displayed in the default website's language

Did this answer your question?