Products and services modules

Products and services modules help you add product-related information to your website in a structured way and provide visitors a convenient overview of what you're offering. Find these modules under the category Products and services in the Add module overlay.

0_-Products-and-services-modules.jpg

  Use Global Data on your modules

It's highly recommended that you feed your business information from Global Data into these modules as it ensures that your company information is consistently applied throughout your website. Updating your information centrally in Global Data means you don't have to go through your entire website each time you change a piece of information such as a price list - you only have to update the information once. Read more about Global Data here.

 

Payment icons

Use the Payment icons module to show visitors what payment methods you accept in your physical or online store.

1_-Payment-icons.jpg

Hover the module and click on Content or Design on the dropdown to edit your Payment icons module. 

 

Content

Click on Add icon to add a payment icon to your list and click again on the icon to expand the icon selection for the specific element. The icon list consists of the following payment method icons:

  • Android
  • Apple
  • Bank
  • CC-Amex
  • CC-Diners-club
  • CC-Discover
  • CC-Jcb
  • CC-Mastercard
  • CC-Paypal
  • CC-Stripe 
  • CC-Visa
  • Credit Card
  • Credit Card Alt
  • Google wallet
  • Money 
  • Paypal

2__icons.png

CC stands for credit card and indicates that the icon includes a credit card. Please note that there are two Paypal icons - a credit card and a "regular" icon. 

  Use payment icons from Global Data

You have the option to display payment icons from Global Data instead of manually adding them on the module. Use Global Data content by toggling the function Use Global Data source.


Design

The Design section is where you change the icon, background, border and spacing of your Payment icons module. For more specific styling options, click on More local design options. Toggle each specific element to expand the design options. For a detailed walkthrough of all styling parameters, please refer to our dedicated styling guide.

 

PayPal button

Use the PayPal button module to include a button on your website that's connected directly to your PayPal account. This enables you to direct visitors to a PayPal payment page from anywhere on your website.

3_-PayPal-button.jpg

Hover the module and click on Content or Design on the dropdown to edit your PayPal button module. 

 

Content

Connect your PayPal account to the module by including either your PayPal email or merchant ID in the field PayPal email address or Merchant ID. You have the option to include a name/title in Product/donation name which will appear on the order summary page on PayPal.

The PayPal button contains the following three presets which will also determine the text that appears on the button: 

  • Buy now
  • Pay now
  • Donate

Select which currency you want the price to be displayed in from the currencydropdown menu and then input the desired payment and shipment amounts you want to charge.  

  What are payment amount and shipping amount?

Payment amount is the amount you charge for the product or service you are selling. This amount will figure as the product/service price on PayPal. If you also charge for shipping on top of the product/service price, input the shipping price in the Shipping amount field. If you don't charge for shipping, leave the field blank. 


Design

The Design section is where you change the background, border and spacing of your PayPal button module. Tick Enable large button if you want your PayPal button enlarged.

4_-Design.jpg

 

Price list

Use the Price list module to provide your visitors a structured overview of the prices of your products or services.

5_-Price-list.jpg

Hover the module and click on Content or Design on the dropdown to edit your Price list module. 

 

Content

You have two options when adding content to your Price list module. You can either use a price list you have previously created in Global Data by enabling Use Global Data source, or manually add a list directly on the module. 

When manually adding a price list on the module, click on Add element and click again on the newly added element to expand the following options:

  • Image: add an image from either your hard drive or from the File Library in the Editor. The image will appear immediately above the element title.
  • Number: add a number if you want to display a numbered price list. 
  • Title: add a title for the product/service. 
  • Price: add a price to your product/service (remember to add a currency symbol or code, e.g. EUR or USD). 
  • Description: this field gives you the option to add a short description to your product/service. The description will be included under the element title.

6_-Content.jpg

Once you have added all elements, add a title for the price list in the Title field. Manage the order of your elements by dragging a specific element to the desired position on the list. 

 

Design

The Design section is where you change background, border and spacing of your Price list module. For more specific styling options, click on More local design options. Toggle each specific element to expand the design options. For a detailed walkthrough of all styling parameters, please refer to our dedicated styling guide.

 

Offers

Use the Offers module to display an offer to your visitors with a start and end date. The Offers module is a great way of making a specific offer or deal stand out on your website. Be aware that you're only able to include one offer in a module at a time.

7_-Offers.jpg

Hover the module and click on Content or Design on the dropdown to edit your Offers module. 

 

Content

You have two options when adding content to your Offers module. You can either display an offer you have previously created in Global Data by toggling Use Global Data source, or manually add an offer directly on the module. When using an offer from Global Data, select the specific offer you want displayed from the dropdown menu. 

8_-Content.jpg

When manually adding an offer on the module, you can include the following information:

  • Offer title: briefly describe what your offer is about. 
  • Offer text: provide details about the offer by including a short description text.
  • Price: include the price of your offer (remember to add a currency symbol or code, e.g. EUR or USD). 
  • Start date and end date: select the date and time the offer begins and ends.
  • Button text: add a text on the button.
  • Link type: choose where visitors should be directed to when clicking the button. You can choose between external URL, internal page, email and file. 

  Button link behavior 

It's recommended that you enable the setting Open link in new tab if your button points to an external page, email or file. This is to ensure that visitors don't leave your website entirely when clicking the button.

 

Design

The Design section is where you change background, border and spacing of your Offers module. For more specific styling options, click on More local design options. Toggle each specific element to expand the design options. For a detailed walkthrough of all styling parameters, please refer to our dedicated styling guide.

 

Review

Use the Review module to display comments or reviews from customers. This will help build credibility and trust with new visitors. 

9__review.png

Hover the module and click on Content or Design on the dropdown to edit your Review module.

 

Content

You have two options when adding content to your Review module. You can either display a review you have previously created in Global Data by enabling Use Global Data source, or manually add a review directly on the module. When using a review from Global Data, select the specific review you want to display from the dropdown menu. You can only include one review in a module at a time. 

When manually adding a review on the module, you can include the following information:

  • Review title: include a short headline or statement from your reviewer.
  • Review text: add the review text here.
  • Rating: select the amount of stars that the reviewer has awarded you, ranging from 1-5 where 1 is the lowest and 5 the highest. 

    10__rating.png

  • Reviewer: include the name of the reviewer. 
  • Date of submission: add the date of creation of the review. 

 

Design

The Design section is where you change background, border and spacing of your Review module. For more specific styling options, click on More local design options. Toggle each specific element to expand the design options. For a detailed walkthrough of all styling parameters, please refer to our dedicated styling guide.

 

Settings

You have the option to choose whether you want to show rating (stars) and review text on your module. The two options are by default selected - to remove one or both options, tick the checkbox for the option you want removed.

Was this article helpful?
0 out of 0 found this helpful