Hostinger

With <a href="https://www.hostinger.com/website-builder" rel="nofollow noopener noreferrer" target="_blank">Hostinger Website Builder</a>, 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 – <a href="#h_83c752d845">product list</a> and <a href="#h_ad08fce565">single product</a> – click on the preferred section, and it'll be inserted into your page:

This type of section is used to display all your products or a particular <a href="https://support.hostinger.com/en/articles/6538359-website-builder-how-to-create-product-categories">product category</a>. 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:

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:

If you update product details in the <a href="https://support.hostinger.com/en/articles/6538340-website-builder-how-to-access-the-online-store-settings">product management area</a>, remember to <a href="https://support.hostinger.com/en/articles/6435697-website-builder-updating-a-website">update your website</a> 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

- If you update product details in the <a href="https://support.hostinger.com/en/articles/6538340-website-builder-how-to-access-the-online-store-settings">product management area</a>, remember to <a href="https://support.hostinger.com/en/articles/6435697-website-builder-updating-a-website">update your website</a> 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

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

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: How to Change Text Color in the Online Store How to Customize Text Style in the Online Store
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

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: How to Change Text Color in the Online Store How to Customize Text Style in the Online Store
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

Product List Section

Single Product Section