Inserting images, PDF files, videos and other objects

Tekst vergrotenTekst verkleinen

CMS ICONThe EasyWebshop CMS editor provides a lot of flexibility to add all kinds of objects to your website. This page summarizes the objects that can be added. Objects can be inserted in the following sections:

Reference

KISS principle
The more objects you insert, the more cluttered your website will look and the slower it will be.
Therefore, we recommend to keep your website simple.

Inserting Photos, Images and Logos

ImageCMS Image

Click on the Image icon to upload and insert an image.

  • Click the Upload link in the top menu
  • Click the Upload file button to select a file on your device

If sub folders (or sub directories) exist, you can optionally select a sub folder for uploading your image to. It's recommended to create sub folders if you have many files. You can do this by clicking the New folder icon in the file overview.

After selecting an image file, you can choose to resize it. We recommend a maximum of 800x600 pixels for fast loading, although you can upload larger photos if you want a higher resolution.

  • Click the Upload button to upload your image
  • After uploading, click the Insert icon below the image

You will also find the image in the My images overview. So you don't need to upload the image again if you want to insert the same image on another page.

On smartphones, images will be shrunk to the maximum width of the screen, regardless of the resolution. This prevents a horizontal scrollbar to appear.

Inserting Hyperlinks, Banners and Buttons

Button iconCMS Insert

  • Click the Insert icon and scroll down to Links
    • For a hyperlink, choose Hyperlink
    • For a button or call to action, choose Hyperlink button
    • for a banner, image or photo, choose Hyperlink photo
  • Enter the web address (URL), this can be an internal or external page

Optionally, you can select to open a new browser window when your visitor clicks on the link.

Uploading a PDF file or catalog

PDF LogoCMS Upload

Click on the Upload icon to upload and insert a PDF file.

  • Click the Upload link in the top menu
  • Click the Upload file button to select a file on your device
  • After uploading, click the Insert icon

Uploading copyrighted content or infected files will be rewarded with instant deletion of your webshop without prior warning.

Inserting MP3 and OGG audio files

AudioCMS Upload

Click on the Upload icon to upload and insert an MP3 or OGG audio file. MP3 is proprietary, OGG is an open and patent-free audio format.

  • Click the Upload link in the top menu
  • Click the Upload file button to select a file on your device
  • After uploading, click the Insert icon

Inserting Videos or Movies

VideoCMS Upload

Click on the Upload icon to upload and insert an MP4 video file.

  • Click the Upload link in the top menu
  • Click the Upload file button to select a file on your device
  • After uploading, click the Insert icon

Note that the file size limit is 25MB. If your video file is larger, you will have to compress it with video editing software or upload it to a video website.

Alternatively, you can insert videos from a video platform like Bitchute, PeerTube, Rumble, Vimeo and YouTube.

  • Click Insert and choose YouTube video
  • Enter the URL (copy from address bar) of your YouTube video

You can also copy and insert the HTML code for sharing the video. Below we explain how to insert HTML codes.

Inserting an Adult content warning

Adult warning icon

  • Navigate to Settings > More options > Connections
  • Scroll down to Widget
  • Choose the Adult content warning widget and confirm

You can find all documentation about widgets in the Widget connections wiki.

Inserting Animated GIFs

Animated GIFIf you are a fan of the 90s, you can add animated GIF images to your website.

  • Follow the same procedure as described above for uploading images
  • Choose to not resize the image

Resizing the image will cause it to break the GIF frames, resulting the image to be without animation.

Inserting Background music

AudioWe do not recommend using background music. Most visitors will be annoyed by background music that starts automatically. It's a bad design practice for websites.

For this reason it is not included in our software. However, it is possible and quite easy. Search for "add background music to website" in your favorite search engine for a tutorial. Below we explain how to insert HTML codes.

Inserting a Blog (with RSS feed), Forum or Guestbook

GuestbookBlog
EasyWebshop has a built in blog feature. Upon activating the blog, it will add a new page named Blog with the keyword [WEBSHOP_BLOG] on it. On your website, this keyword gets replaced by your blog.

Forum
EasyWebshop does not have a forum feature, we focus on webshop software. If you want a forum, your best option is to create the forum externally. You can then create a hyperlink to the forum.

Guestbook
EasyWebshop has a built in guestbook feature. Upon activating the guestbook, it will add a new page named Guestbook with the keyword [WEBSHOP_GUESTBOOK] on it. On your website, this keyword gets replaced by your guestbook.

Inserting a Border around text

Warning iconCMS Insert

If you want to place a border around a text, click Insert and choose Border.

You can set the border size, the color and the background color. If you want to edit these settings, your can switch to HTML-view and edit them in the source code.

Inserting a Chatbox or Shoutbox

Chat or shoutUse our live chat for this.

Inserting Columns and Tables

Columns exampleCMS Insert

Columns can be used to represent text and images side by side. On small screens the columns are shown vertically. Click Insert and choose Columns.

Tables can be inserted by clicking Insert and then Table.

Wide tables can be problematic on small screens, causing horizontal scrollbars. Therefore, we recommend the use of columns, which are responsive.

You can set the parameters of the columns and tables. If you want to edit them, your can switch to HTML-view and edit them in the source code.

Inserting a Cookie warning

Cookie warning

  • Navigate to Settings > More options > Connections
  • Scroll down to Widget
  • Choose the Cookie warning widget and confirm

You can find all documentation about widgets in the Widget connections wiki.

Inserting Customer feedback and Reviews

Chat or shoutYou can use our customer feedback and reviews for this.

Inserting Web forms

XML-HTMLOn the contact page there is a web form with spam protection. Messages sent through this form will be sent to your email.

  • Use form fields for additional checkout and contact form fields and additional web forms
  • Use parameters for extra form fields for products

Inserting Maps with POIs

WorldA map is present by default on your info page when the Display company info or personal data on the website is active at shop settings. You can deactivate this map and replace it with another map if the default is incorrect or insufficient.

It's also possible to insert personalized maps with Points Of Interests (POIs).

  • A map with locations of pickup points
  • A map with locations of your stores

Maps can be created with:

If you have a web address (URL):

CMS Insert

  • Click the Insert icon and scroll down to Page content
  • Click Show map
  • Paste the URL and click Insert

CMS insert

If you have a HTML code:

CMS HTML

  • Click the HTML icon to switch to HTML view
  • Paste the HTML code at the location where you want the map

Inserting Photo galleries and Slideshows

Photo galleryThere is a slideshow feature available, but there is no photo gallery.

  • You can use one or multiple slideshows as a photo gallery
  • You can fill a category with products without price and purchase button and use this as a photo gallery
  • You can insert photos directly
  • You can insert an external photo gallery script on a new page

Inserting Print buttons

PrintCMS Insert

  • Click Insert, scroll down to Links and choose Print for a print icon or Print button for a print button.

Inserting an External search box

DuckDuckGo icon

  • Navigate to Settings > More options > Connections
  • Scroll down to Widget
  • Choose the DuckDuckGo widget and confirm

You can find all documentation about widgets in the Widget connections wiki.

Inserting a Robots.txt or XML sitemap

XMLA robots.txt file and XML sitemap are automatically generated for you. You can find them by typing your domain name followed by /robots.txt and /sitemap.xml.

It's also possible to upload your own files, as .txt and .xml files can be uploaded, but it's not possible replace the default robots.txt and sitemap.xml.

Inserting Like Buttons and Social plugins

Social networkYou can use social networks for this.

We don't recommend installing external social plugins on your website by embedding HTML code. Often these codes contain trackers that are harmful to the privacy of your visitors. Use the social networks interface instead, which provides links to your pages on social networks without trackers.

Inserting an additional Visitor counter

AnalyticsEasyWebshop has the Easy Analytics application that you can find at Dashboard > Visitor analysis.

Additionally you can install an external visitor counter.

Inserting a Live webcam

WebcamGet the HTML code from your webcam stream provider. Below we explain how to insert HTML codes.

Inserting HTML, CSS and JavaScript codes

XML - HTMLCMS HTML

Click the Edit HTML icon or Insert > Edit HTML. The text editor now switches to HTML view.

You can add, edit and delete HTML, CSS and JavaScript codes. You can also copy and paste codes from internal or external sources. Copying HTML code from other pages will preserve the layout or markup.

HTML
HTML (HyperText Markup Language) is the standard markup language used to create web pages and web applications. It uses <tags> in lowercase to define the structure of a web page. Because it's an easy to learn and simple language, most HTML codes can be freely changed by non technical persons.
CSS
CSS (Cascading Style Sheets) is a style sheet language used to control the layout, colors, fonts, and other visual aspects of a web page. The CSS code goes between <style> and </style> tags and is also easy to learn and edit.
JavaScript
JavaScript is a scripting language used to create interactive and dynamic web pages. It is a client-side language, which means that it is executed by the web browser on the client-side, rather than on the server-side. The code goes between <script> and </script> tags.

JavaScript is a powerful language which is unfortunately often misused by incompetent web developers. This results in bad websites with annoying ads, popups, trackers, high CPU consumption and slow load times.

EasyWebshop users have full control over their web pages, but with control comes responsibility. Please use this feature with care.

External scripting can create conflicts and errors with existing code in the webshop. This can result in functionality no longer working, such as the shopping cart and checkout. It can also cause warnings with security certificates.

External scripting can contact external sources, phone home and track your visitors. This can be harmful to the privacy of your visitors. If you must implement privacy violating code, update your privacy statement accordingly.

External scripting can make the website slower when scripting is loaded from a slow server. Therefore, limit JavaScript that connects to external sources.

We are constantly improving EasyWebshop since its launch in 2009. With all new updates, we assure that everything stays backwards compatible. Be aware that for custom scripting, future updates may break compatibility with your code. Therefore, you may have to update your code after an EasyWebshop update.

For external scripts, our help desk cannot offer support. Always contact the script provider for technical support.

A collection of scripts which allow you to customize your webshop and add exotic features can be found at the EasyWebshop scripts:

EasyWebshop scripts

CMS HTML

Click the HTML-icon again to return to editor view.

When saving while in HTML-view, the code will not go through the CMS HTML sanitizer. There is a risk that the code will mess up the web page, but it gives more freedom to insert code yourself.

Next page: Editing images and applying watermarks

Starter Wiki



Frequently Asked Questions Contact

Terms and conditions Privacy Statement 2009 ‑ 2024 EasyWebshop