Email-Icon Created with Sketch. Group 3 Created with Sketch. Domains-SVG-Box Created with Sketch. Domains-SVG-Box Created with Sketch. Domains-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Icon-Internet Created with Sketch. Hosting-SVG-Box Created with Sketch. Icon-Internet Created with Sketch. Icon-Internet Created with Sketch. Hosting-SVG-Box Created with Sketch. Hosting-SVG-Box Created with Sketch. Trust Pilot Stars Created with Sketch. 1-5-million Created with Sketch. Control-panel-Icon Created with Sketch. WSB-Brush Created with Sketch. WSB-Brush Created with Sketch. WSB-Brush Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Email-Icon Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. Icon-ECommerce-Seperator Created with Sketch. icon-slider-next Created with Sketch. icon-slider-prev Created with Sketch. Webmail-icon Created with Sketch. heart Created with Sketch. Open-24-7 Created with Sketch. open24 Created with Sketch. 24 7 trusted Created with Sketch. Fill 1 Created with Sketch.

HTML parameters to embed the webshop

Parameters are options that define how your shop looks on your website. You can for example determine how your products are ordered and how an image is shown.

The parameters are part of the embed code of your webshop and look like this:

showCategorySelector: true imageRatio: 'square' cropImages: true productsPerPage: 15 productsPerRow: 5 sortProducts: 'name-ascending' userCanSortProducts: true embedType: 'html'

If you use Website Builder to publish your shop, you can easily change the settings there. However, if you want to embed your shop manually with the HTML code, you should use this.


What parameters can I change?

You can change the following parameters:

Show category selector
Image style
Crop product images
Products per page
Products per row
Sort products
User can sort products
Embed type

We have listed what each parameter does and how you can adjust it.


Show category selector

Shows a drop-down menu of all the categories in your webshop. It allows your visitors the option to see only products of a specific category.

Change the values to true to enable the dropdown menu or false to disable it.

Example:

showCategorySelector: true

Image style

Allows you to change the shape of your images on your shopfront.

You can choose between the following settings:

  • Show images as squares: 'square'
  • Show images in portrait mode: 'portrait'
  • Show images in landscape mode: 'landscape'
  • Show images in their original shape: 'actual'

Example:

imageRatio: 'square'

Crop product images

With this setting you determine if you want to crop your images to the shape you have chosen as image style, or if you want to fit the entire image inside a thumbnail, while still maintaining the aspect ratio.

Change the value to true, to crop images or false to fit the image in a thumbnail.

Example:

cropImages: true

Products per page

This setting determines the number of products displayed on the shop overview. It is also the number of products that are loaded when a customer clicks the "Load more..." button at the bottom of the product listing. Simply change the number, to the number of products that should be shown.

Example:

productsPerPage: 15

Products per row

With this setting you can determine how many products are displayed per row on the shop overview. The minimum is 2 products per row, the maximum is 8. Simply change the number at the end of the parameter to your preference.

Example:

productsPerRow: '4'

Sort products

Set a default order for the products you are selling. You can for example show the newest products first.

You can choose between the following settings:

  • Sort alphabetically: 'name-ascending'
  • Newest first: 'age-ascending'
  • Cheapest first: 'price-ascending'
  • Most expensive first: 'price-descending'

Example:

sortProducts: 'name-ascending'

User can sort products

With this setting you decide if you want to show a dropdown menu in your shop that allows your visitor to change the sorting of products. The sort options are the same as the sort products settings. The visitor can for example search for the newest or cheapest products.

Change the values to true to enable the drop-down menu or false to disable it.

Example:

userCanSortProducts: true

Embed type

This parameter contains internal information about your Webshop. You don't need to change this parameter yourself, it will be done automatically depending on how you publish your shop.

Example:

embedType: 'html'

Related articles:Related articles:

CSS parameters for the webshop
Getting started with your webshop