Creating blocks for the webshop

Introduction: What are blocks?

Blocks are special content components that you create in advance and can then place on your webshop. They are like ready-made building blocks for your webshop. There are three types: article blocks (for news items or info), assortment blocks (for product groups such as offers), and carousel blocks (for rotating banners with images).

Why use blocks?

You want to use blocks because:

• You can reuse complex content components on different pages
• It makes your webshop more professional and dynamic
• You can present product groups in a visually attractive way
• You can prominently show important messages or promotions
• You can easily switch what's on the front page
• It works in a structured and clear way
• Customers get a better shopping experience

Note: Blocks must first be created before you can use them on pages!

Three types of blocks

We cover all three types of blocks:

1. Article block: For news, updates, or information items
2. Assortment block: For product groups (offers, new products, etc.)
3. Carousel block: For rotating banners with images

---

Block 1: Article block

An article block is a collection of compact news items or information articles. Each article can link to a page, open a popup, or redirect to another website.

When to use?

• Show news items on the front page
• Share tips and tricks with customers
• Announce promotions or events
• Share seasonal information

Step 1: Create article block

To article blocks menu

1. Go to "Shop (New)"
2. Click on "Article blocks"
3. You see an overview of existing article blocks (may be empty)

Create new article block

1. Click on "New"
2. Fill in the settings:

Name:

• Give the block a recognizable name
• For example: "News homepage" or "Tips and tricks"
• This is for internal use

Number of articles:

• How many articles should be visible at once on the webshop?
• For example: 3 articles next to each other
• The rest customers can see by scrolling

"More" button:

• Check if customers can see more articles via a "More" button
• Leave empty if only these articles are visible

Save

1. Click on "Save"
2. The article block is now created

---

Step 2: Add articles to the block

Now you'll create the individual articles that go into this block.

Open items menu

1. Select the article block you just created
2. Click on "Items"
3. You now see the options to add articles

You have three types of articles to choose from:

---

Option A: New Page (article links to a page)

Use this if the article should link to a separate page with more information.

Create page article

1. Click on "More" → "New Page"

Fill in settings:

Title:

• The header of the article (e.g., "Tulips now 20% off!")

Text:

• A brief description of the article
• This is what customers see in the overview

Image in text (optional):

• Add an image in the text if needed
• Use the code: ![](imagename.png)
• See the earlier guide on "Influencing texts"

Visibility dates (optional):

• From date: From when is the article visible?
• To date: Until when is the article visible?
• Leave empty: Article is always visible

Example: A Valentine's promotion visible from February 1st to February 14th

Thumbnail image:

• Upload a small image that goes with the article
• This is what customers see in the overview
• For example: a photo of tulips with the tulip article

Link to page:

• Select which page the customer goes to when clicking the article
• This must be a page you previously created

Position:

• Determine the order (1 = first, 2 = second, etc.)

Save

1. Click on "Save"
2. The page article is added

---

Option B: New Popup (article opens a popup)

Use this if the article should open a popup with more information, without going to a new page.

Create popup article

1. Click on "More" → "New Popup"

Fill in settings:

Title, Text, Image, Dates, Thumbnail:

• Fill these in as with "New Page" above

Popup text:

• This is the text that appears IN the popup
• Can be more extensive than the brief description
• For example: complete explanation of the promotion with terms

Supporting images:

• Upload extra images for in the popup
• These appear when the popup opens
• Optional

Position:

• Determine the order in the block

Save

1. Click on "Save"
2. The popup article is added

What happens? When a customer clicks on the article, a popup window opens with the extra information.

---

Option C: New Redirect (article redirects to external website)

Use this if the article should link to another website (e.g., your Instagram or a supplier).

Create redirect article

1. Click on "More" → "New Redirect"

Fill in settings:

Title, Text, Image, Dates, Thumbnail:

• Fill these in as with the previous options

Link:

• Enter the full URL where the customer should go
• For example: https://www.instagram.com/yourbusiness
• Or: https://www.supplier.com/promotion

Position:

• Determine the order in the block

Save

1. Click on "Save"
2. The redirect article is added

What happens? When a customer clicks on the article, they are redirected to the external website.

---

Step 3: Add multiple articles

Repeat step 2 for each article you want in the block. You can mix different types:

• Article 1: Page (to more info)
• Article 2: Popup (quick tip)
• Article 3: Redirect (to Instagram)

Done! Your article block is now filled and ready for use.

---

Block 2: Assortment block

An assortment block shows a group of products on your webshop. Perfect for offers, new products, or seasonal items.

When to use?

• Show offers prominently
• Highlight new products
• Promote seasonal products
• Show bestsellers

Step 1: Create assortment block

To assortment blocks menu

1. Go to "Shop (New)"
2. Click on "Assortment blocks"
3. You see an overview of existing assortment blocks

Create new assortment block

1. Click on "+ New"

Fill in settings:

Name:

• Recognizable name for internal use
• For example: "Offers homepage" or "New roses"

Title:

• This text is shown on the webshop above the block
• For example: "Special offers this week!"
• This is what customers see

Sorting:

• Choose how products are sorted
• Options: by price, by name, by date, newest first, etc.

Number of products on front page:

• How many products should be visible?
• For example: 8 products
• Rest customers can see via "More" button

Hide more button:

• Unchecked: Customers see a "More" button to view all products
• Checked: No "More" button, only these products visible

Use order days:

• On: Webshop only shows products that can be delivered on the chosen order day
• Off: Webshop shows all products regardless of whether they can be purchased

List groups (optional):

• Select from which list groups the products should come
• For example: only from "Cut flowers" or "Offers"
• You can choose multiple list groups
• Leave empty = from all list groups

Tags (optional):

• Select which tag a product must have to be shown
• For example: only products with tag "New" or "Offer"
• You can choose multiple tags

Save

1. Click on "Save"
2. The assortment block is created

Done! The block now automatically shows products based on your settings.

---

Block 3: Carousel block

A carousel block is a rotating banner with images. Often used on the front page to draw attention to promotions or seasons.

When to use?

• Large banner on the front page
• Show seasonal photos
• Rotating promotion banners
• Atmospheric images of your products

Step 1: Create carousel block

To carousel blocks menu

1. Go to "Shop (New)"
2. Click on "Carousel blocks"
3. You see an overview of existing carousel blocks

Create new carousel block

1. Click on "+ New"

Fill in settings:

Name:

• Recognizable name for internal use
• For example: "Banner homepage" or "Season carousel"

Auto-scroll:

• Checked: Images change automatically
• Unchecked: Customers must click themselves to switch

Speed:

• If auto-scroll is on: how fast do images switch?
• For example: every 5 seconds
• In milliseconds (5000 = 5 seconds)

Save

1. Click on "Save"
2. The carousel block is created

---

Step 2: Add images to carousel

Now you'll add the images that should rotate in the carousel.

Open items menu

1. Select the carousel block you just created
2. Click on "Items"

Add new image

1. Click on "+ Add Image"

Fill in settings:

Title:

• Text shown over the image
• For example: "Tulips now 20% off!"
• Optional, can be left empty

Visibility dates (optional):

• From date: From when should this image be in the carousel?
• To date: Until when should this image be visible?
• Leave empty: Image is always visible

Example: Christmas banner only visible in December

Upload photo:

1. Click on "Choose file" or the upload icon
2. Select your image
3. Upload

⚠️ IMPORTANT about dimensions:

The width and height of the carousel is determined by the first image you upload!

Tips for images:

• Use the same format for all images
• For example: all images 1200x400 pixels
• Otherwise some images will be stretched or cropped
• Crop images in a program like Paint.NET (free) or Photoshop
• Not in normal Paint, that has too few options

Example good dimensions:

• Desktop banner: 1200x400 pixels
• Mobile banner: 800x600 pixels
• Square: 800x800 pixels

Position:

• Determine the order (1 = first image, 2 = second, etc.)
• This is the order in which images are shown

Save

1. Click on "Save"
2. The image is added to the carousel

---

Step 3: Add more images

Repeat step 2 for each image that should be in the carousel.

Example carousel with 3 images:

1. Image 1: "Spring collection" (March-May)
2. Image 2: "Mother's Day promotion" (May)
3. Image 3: "General banner" (always visible)

Done! Your carousel block is filled with images.

---

Place blocks on pages

Now that you've created blocks, you need to place them on your webshop pages.

Step 1: To pages

Open page

1. Go to "(General) Page" or "Pages"
2. You see a list of pages

Choose or create page

• Click on an existing page (e.g., your front page)
• Or create a new page with "New"

Tip: Give pages clear names so you know later which page is what.

---

Step 2: Add block to page

Open items menu

1. Click on the page
2. Go to "Items"
3. You now see what's already on the page

Add block

1. Click on "More"
2. Select the type of block you want to add:
   • Article block: Choose which article block
   • Assortment block: Choose which assortment block
   • Carousel block: Choose which carousel block
3. Click on the specific block you want to add

Save

1. Don't forget to click "Save"!
2. Otherwise your work disappears
3. The block is now visible on the page

---

Step 3: Set as start page (optional)

If you want to use this page as the front page of your webshop:

Set start page

1. Go to "(General) Configurations"
2. Select your webshop configuration
3. Find the field "Start page"
4. Select the page you just created
5. Click on "Save"

Result: This page with your blocks is now the front page of your webshop.

---

Practical examples

Example 1: Front page with carousel and offers

• Step 1: Create carousel block with 3 seasonal photos
• Step 2: Create assortment block "Offers" with 8 products
• Step 3: Create article block "News" with 3 items
• Step 4: Add all to front page: first carousel, then offers, then news
• Result: Professional homepage with visual content

Example 2: News section with different articles

• Article 1 (Page): "New nursery" → links to page with detailed information
• Article 2 (Popup): "Tulip care tips" → opens popup with brief tips
• Article 3 (Redirect): "Follow us on Instagram" → redirects to Instagram
• Result: Diverse news items with different actions

Example 3: Seasonal assortment

• Block: "Spring flowers"
• List group: Select "Cut flowers"
• Tag: Select "Spring"
• Visibility: Only March-May
• Result: Automatically the right products in the right season

Example 4: Carousel dimensions wrong

• Problem: First image is 1200x400, second is 800x600
• Result: Second image gets stretched and looks ugly
• Solution: Crop second image to 1200x400 in Paint.NET
• Result: Both images look good

---

Important tips

Tip 1: Plan your blocks in advance

• Think first which blocks you need
• Make a list: "Carousel front page", "Offers", "News"
• Create them all before placing them on pages

Tip 2: Consistent carousel dimensions

• Measure the dimensions of your first carousel image
• Crop all other images to exactly the same dimensions
• This prevents stretched or cropped photos

Tip 3: Use clear names

• "Homepage carousel 2025" is better than "Carousel1"
• Later you'll still know what it was
• Especially handy if you have many blocks

Tip 4: Test assortment blocks

• Check if the right products are shown
• Adjust filters if it's not correct
• Test with different list groups and tags

Tip 5: Use dates for seasonal content

• Set on/off dates for seasonal articles
• Christmas banner automatically removed after Christmas
• Saves manual work

Tip 6: Don't forget to save

• Always click "Save" after changes
• Otherwise your work is gone
• Double-check before closing the screen

Frequently asked questions

Question: How many blocks can I create?

• Unlimited
• Create as many as you need
• But keep it clear

Question: Can I use the same block on multiple pages?

• Yes, absolutely!
• That's exactly the advantage of blocks
• Create once, use everywhere

Question: Can I adjust a block later?

• Yes, always
• Changes are immediately visible on all pages where the block is
• This is handy for updates

Question: Why don't I see products in my assortment block?

• Check if you've set list groups or tags
• Possibly there are no products that meet the criteria
• Adjust filters or leave them empty

Question: My carousel images are stretched, what now?

• All images must have the same dimensions
• Crop them in Paint.NET or another program
• Use exactly the same pixels (width x height)

Question: How do I remove a block from a page?

• Go to the page → Items
• Select the block
• Click delete
• The block itself remains, only the link to the page is gone

What to do with problems?

Problem: Block not visible on webshop

• Check if you've added the block to the page
• Check if you clicked "Save"
• Refresh the webshop cache
• Check if the page is set as start page

Problem: Carousel images look weird

• Check if all images have the same dimensions
• Crop them to exactly the same pixels
• Upload them again

Problem: Assortment block is empty

• Check your filters (list groups, tags)
• Possibly there are no products that meet criteria
• Remove filters to show more products
• Check if "Use order days" is causing problems

Problem: Article not visible in article block

• Check the visibility dates
• Possibly the date has already expired
• Adjust dates or leave empty for always visible

Problem: Can't find block to add to page

• Check if you saved the block after creating
• Refresh the page
• Possibly it's in another category (article/assortment/carousel)

Summary

Creating blocks for your webshop is done by first creating the blocks and then placing them on pages:

Three types of blocks:

1. Article block (news items/info):

   • Create block: Article blocks → New → name, number of articles, "More" button → Save
   • Add items: Select block → Items → choose type: New Page (links to page), New Popup (opens popup), or New Redirect (redirects to website)
   • Fill in per item: title, text, thumbnail image, dates (optional), link/popup/redirect, position → Save

2. Assortment block (product groups):

   • Create block: Assortment blocks → New → name, title (visible on shop), sorting, number of products, "More" button, order days (on/off)
   • Filters: list groups (optional) and tags (optional) determine which products are shown
   • Save → products appear automatically based on filters

3. Carousel block (rotating banner):

   • Create block: Carousel blocks → New → name, auto-scroll (on/off), speed → Save
   • Add images: Select block → Items → + Add Image → title (optional), dates (optional), upload photo
   • Important: Use exactly the same dimensions (pixels) for ALL images to prevent stretching, crop in Paint.NET
   • Repeat for each image

Place blocks on pages:

• Go to Pages → select page → Items → More → choose block type → select specific block → Save
• Optional: Set page as start page via Configurations → Start page

Note: Never forget to click "Save", otherwise your work is gone!