Adjusting webshop pages and adding content

Introduction: What is adjusting webshop pages?

Adjusting webshop pages means you can determine the content and layout of your webshop yourself. You can add texts, images, videos, product blocks, and other elements to make your webshop look exactly how you want. It's like setting up your own store: you decide what goes where.

Why adjust webshop pages?

You want to adjust your webshop because:

• You have control over what customers see
• You can create a unique and professional look
• You can place important information in the right spot
• You can highlight products the way you want
• You can prominently show special promotions or offers
• It makes your webshop personal and recognizable
• You can improve the customer experience

What can you add to pages?

You have different types of blocks and elements you can add:

Blocks:

• Article blocks: Show specific products
• Assortment blocks: Show a group of products
• Carousel blocks: Rotating product gallery

Other elements:

• Text: Explanation, welcome message, information
• Images: Photos, banners, pictures
• Videos: Embed YouTube videos
• Closing time block: Show when you're closed
• Order day block: Show ordering possibilities
• Login block: Login option for customers
• Search bar: Search products
• List groups (buttons): Navigation buttons

---

How do you add content to a page?

Step 1: To the page

Open page

1. Go to the "Shop (New)" tile
2. Click the "Pages" button
3. You now see a list of all pages
4. Click the page you want to adjust (e.g., your front page)

---

Step 2: Create section (optional)

Sections are like chapters on your page. With these you can divide your page into different parts.

Create new section/subpage

1. Click on "Section"
2. Click on "New"
3. Enter a name for the section (e.g., "Featured products" or "Welcome")

Set visibility

You can choose when this section is visible:

• Checked (✓): Section is only visible when customer is logged in
• Not checked ( ): Section is only visible when customer is NOT logged in
• Dash (-): Section is always visible (logged in or not)

Example:

• Special offers for regular customers → Check (only for logged-in customers)
• General welcome text → Dash (for everyone)

Save

1. Click "Save"
2. The section is now created

---

Step 3: Add items to section

Now you'll add the actual content (texts, images, blocks, etc.).

Open items menu

1. Select the section or subpage where you want to add something
2. Click "Items"
3. You now see the options to add content

---

Option A: Add text (with image or video)

Add new text

1. Click "New" or "+ Text"
2. A text editor opens
3. Type your text

Add image to text

If you want to add an image:

1. First upload the image to the system
2. Remember the filename (e.g., "banner.png")
3. Note: Don't use spaces in the filename!
4. Add the following code in your text:

![](banner.png)

5. Replace "banner.png" with your image's name

Example:

• You uploaded an image "welcome2025.jpg"
• In your text you type: ![](welcome2025.jpg)
• The image now appears at that spot

Add YouTube video to text

If you want to embed a YouTube video:

1. Copy the YouTube video link (e.g., https://www.youtube.com/watch?v=bCLEnJ8Mm0I)
2. Add the following code in your text:

![youtube.com](https://www.youtube.com/watch?v=bCLEnJ8Mm0I)

3. Replace the link with your own YouTube link

Example:

• You want to show a video of your nursery
• YouTube link: https://www.youtube.com/watch?v=ABC123XYZ
• In your text you type: ![youtube.com](https://www.youtube.com/watch?v=ABC123XYZ)

Save text

1. Click "Save"
2. The text is now added to your page

---

Option B: Add blocks and special elements

More options menu

1. In the Items screen click "More"
2. You now see a menu with different options

What can you add via "More":

1. A created block

• This is a block you previously created (article block, assortment block, carousel block)
• Select the block you want to add
• It appears on your page

2. New closing time block

• Automatically shows when your webshop is closed
• Customers see for example: "We're closed, come back on Monday"
• Useful for holidays or vacations

3. New order day block

• Shows ordering possibilities and delivery dates
• Customers see when they can order for which day
• Makes it clear for customers

4. Login block

• Shows a login option for customers
• Customers can log in to see their account
• Useful on the front page or in the menu

5. Search bar

• Customers can search for products
• Type product name and find it directly
• Improves user-friendliness

6. List groups (buttons)

• Navigation buttons to different categories
• For example: "Roses", "Tulips", "Lilies"
• Customers click and go to that category

Add element

1. Click the element you want to add
2. Follow any extra steps (configuration, fill in name, etc.)
3. Save
4. The element appears in the list

---

Step 4: Adjust order of elements

The order in which you add elements is also the order they appear on the webshop. You can adjust this order.

Rearrange elements

1. You now see a list with all items/blocks on your page
2. Select the element you want to move
3. You see arrows: up (↑) and down (↓)

Move:

• Arrow up (↑): Element goes one position higher (more towards top of page)
• Arrow down (↓): Element goes one position lower (more towards bottom of page)

Example order:

1. Welcome text (at top)
2. YouTube video
3. Featured products block
4. Search bar
5. Text with contact information (at bottom)

Check result

1. Reload your webshop to see how it looks
2. Adjust the order further if needed

Done! Your page is now adjusted with your own content.

---

Advanced text formatting

For more options in text (such as headings, bold text, lists, etc.) you can use Markdown.

Useful Markdown codes:

Headings:

# Big heading (Heading 1)
## Medium heading (Heading 2)
### Small heading (Heading 3)

Text formatting:

**Bold text**
*Italic text*

Lists:

- Item 1
- Item 2
- Item 3

Links:

[Click here](https://www.example.com)

More information: For extensive explanation of all Markdown options, go to: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

---

Practical examples

Example 1: Front page with welcome text and products

• Step 1: Open front page → Section → New → "Welcome"
• Step 2: Items → New → Type welcome text
• Step 3: Items → More → Add assortment block with popular products
• Step 4: Reload webshop and check
• Result: Customers see welcome text followed by featured products

Example 2: Banner with YouTube video

• Step 1: Open page → Section → Items → New
• Step 2: Type intro text
• Step 3: Add YouTube code: ![youtube.com](your-video-link)
• Step 4: Save
• Result: Customers see your video directly on the page

Example 3: Add category buttons

• Step 1: Open page → Items → More → List groups
• Step 2: Select the list groups you want to show as buttons
• Step 3: Save
• Result: Customers see buttons to different categories

Example 4: Members-only section

• Step 1: Make section "VIP offers"
• Step 2: Check (✓) for only logged-in customers
• Step 3: Add special offers
• Result: Only logged-in customers see these deals

---

Important tips

Tip 1: Plan your page structure

• Think in advance about what should go where
• Make a sketch on paper
• Work from top to bottom
• This way you avoid lots of rearranging afterwards

Tip 2: No spaces in filenames

• "banner.png" ✓ Good
• "my banner.png" ✗ Wrong
• "my-banner.png" ✓ Good
• Use hyphens (-) instead of spaces

Tip 3: Always test on mobile

• Check how your page looks on phone
• Many customers shop on mobile
• Adjust if it's not readable

Tip 4: Keep it clear

• Not too many elements on one page
• Customers should quickly find what they're looking for
• Less is often more

Tip 5: Use sections logically

• Make separate sections for different topics
• For example: "Promotions", "New products", "About us"
• This keeps your page organized

Tip 6: Preview before you save

• Reload your webshop regularly to check
• This way you immediately see if it's good
• Adjust where needed

Tip 7: Save your Markdown codes

• Make a document with frequently used codes
• Then you don't have to look them up every time
• Saves time!

Frequently asked questions

Question: In what order should I add elements?

• The order you add is the order on the page
• So adding first = top of page
• You can always adjust order later with arrows

Question: Can I delete an element later?

• Yes, select the element and click delete
• Or edit it if you want to change something
• Deleted elements are gone, so be careful

Question: Why can't I see my image?

• Check if the filename is correct (case-sensitive!)
• Check if there are no spaces in the name
• Check if the image was actually uploaded
• Refresh the webshop with Ctrl+F5

Question: Can I use HTML instead of Markdown?

• Depends on your system settings
• Markdown is usually safer and easier
• Check the documentation or ask support

Question: How many sections can I make?

• As many as you want
• But keep it clear
• Too many sections make it confusing

Question: Do YouTube shorts work too?

• Usually not, only normal YouTube videos
• Test it to be sure
• The code is the same

What to do with problems?

Problem: Image doesn't appear

• Check filename (no spaces, correct spelling)
• Check if image was uploaded
• Try uploading the image again
• Check if the extension is correct (.png, .jpg, .gif)

Problem: YouTube video doesn't load

• Check if the link is correctly copied
• Try the video in a normal browser
• The video may be private or removed
• Check if you used the correct Markdown code

Problem: Order won't change

• Refresh the page
• You may need to log in again
• Check if you clicked "Save" after changing

Problem: Block doesn't appear

• Check if the block exists (in block management)
• Refresh the webshop
• Check if the block is correctly configured

Problem: Section not visible on webshop

• Check the visibility settings (✓, , -)
• You may need to log in to see it
• Refresh your browser cache

Summary

Adjusting webshop pages is done by adding sections and items to your pages:

Basic steps:

1. Go to Shop → Pages → select the page you want to adjust
2. Click Section → New → enter name → set visibility (✓ = only logged in, - = always) → Save
3. Select section → click Items to add content

Add content (two options):

• Text/image/video: Click New → type text → for image use ![](filename.png), for YouTube video use ![youtube.com](your-video-link) → Save
• Blocks/elements: Click More → choose from: created block, closing time block, order day block, login block, search bar, or list groups (buttons) → Save

Adjust order:

• Select element → use arrows up (↑) or down (↓) to change position
• The order in the list is the order on the webshop

Important points:

• No spaces in filenames for images (use "banner.png" not "my banner.png")
• For advanced text formatting: use Markdown (headings with #, bold with **text**)
• More Markdown tips: https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
• Always test on mobile and reload regularly to check result