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. 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.

How do I insert the Webshop in my Website Builder site?

You can insert your Webshop in your Website Builder site with the Webshop component.

  1. Log in to the control panel and open Website Builder.
  2. Go to the Components tab and drag the Webshop component into your work space.
  3. Adjust the size and placement of the component to your liking:
    - Type in the exact dimensions in the green box visible when the component is selected.
    - Drag the re-size handles to the size you want.
  4. Adjust the Properties of the webshop.
  5. Click Save in the top left corner and Publish to make the image visible on your site.
You can change the look and settings of your Webshop under the properties tab of the webshop component

Properties of the webshop component

You can adjust the following properties of the webshop component:

  • Font - The font type that is used in your shop for all text. By default the font that is set for Heading 2 is selected.
  • Text color - The color of all text in your shop, except prices, buttons and labels.
  • Accent color - The color of the prices and shopping cart icon.
  • Image hover color - The color that becomes visible when you hover over an image.
  • Button - The design of your buttons: colors, corners, font, border.
  • Image style - The orientation of your image: square, landscape, portrait, actual ratio.
  • Crop images - Whether you want to crop all images to have the same size.
  • Products per row - The amount of products per row, select 2-8.
  • Products per page - The amount of products that are first loaded on your page. A button to load more images will be visible if there are more products to show.
  • Sort by - How your products should be sorted by default: alphabetical, newest, price, most popular.
  • Navigation - Select what selectors should be visible in your shop: category and/or sort by selector.
  • Label color - The color of the promotion label that is shown on your product, if you selected this in the Webshop administration.
  • Label text color - The color of the text in the promotion label.
  • Label position - The position of the promotion label on your product image.

Related articles:

Publish your Webshop
Using images in Website Builder