Introduction to eShop 2 – Getting to grips with design

Read Post →

In part one of our Getting to know eShop series, we walked you through the eShop backoffice administration area to give you an idea of just how easy eShop makes it to set up and manage your online shop business. An easy-to-use shop system is only half the battle for successful online business, though, so in Part Two we’re taking you through the eShop design system and showing you just what’s possible in terms of shop design.

Individual styles

Before you start making tweaks to the design of your online shop, you should first create a working copy of your current layout. You can then work with this copy so that the changes you make to the design are not applied to the storefront of your online shop where you customers can see them until you’re completely happy that you want them to go live.

You can either use your current shop layout as a starting point or select from over 100 templates available from the ePages shop system via the “Design/Templates” menu. To create a copy of your current layout to use, switch to the “Design/My Styles” menu. The first tab is the current layout of your online shop. Click on “Create backup copy” and enter a name for the copy. Then you can work as usual with the “Quick design” or the “Advanced design”.

Tip: If you are currently editing a backup copy of your layout, you’ll find this is also displayed if you switch to the storefront via the “Preview” button.

Quick design

You can also get to the “Quick design” area via the “Design” menu. “Quick design” is ideal if you want to make simple changes such as replacing an image in the page header or change the background colour, without affecting the fundamental layout of your shop. For example, you’d be able to insert a new page element in the side menu bar and position it on your website via drag and drop but you wouldn’t be able to completely deactivate the menu bar as this is only possible in “Advanced design”.

Quick design special feature: Changes are immediately adopted without having to save every time.

Advanced design options

“Advanced design” is also located under the “Design” menu, and is where to go to make larger changes to the overall design of your shop. “Advanced design” differs from the “Quick design” in that you can individually select and modify different areas of your page simply by clicking on them. The header of the editor changes according to the options that you have for the selected area. A red box indicates the area that you have selected to modify.

Your website consists of page areas that you can individually switch on and off via the header of your editor.

Try clicking on all areas of your website to get to know the individual design options for each area. The “Advanced design” section allows you to do more than just change colours, background images and replace logos or change fonts. The distance between the individual areas or the general alignment of the page (left or right justification or centered) can be specified.

Use the “Insert page element” function to add additional elements to the website. For example, you can use this to add a logo which informs your customers that your operate as certified shop with a security certificate. Or you can add a newsletter registration option directly to your home page to keep in touch with  and inform your customers. All page elements can be easily accessed and moved to other areas of your website using the Advanced Design editor.

Note: In “Advanced design”, you need to click on the disc icon to save your changes in order for them to be adopted. Don’t forget to also update the page cache if you have it activated.

Adapting the product presentation and individual pages

Would you like to change the content of individual pages in order to adapt the product presentation to your wishes? Then switch to the “Content/Categories” menu and then choose “Preview”.

The editor that appears give you numerous options for modifying the content of your website. Using the left menu column, you can switch between the individual pages  – e.g., the individual category pages – and adapt these individually. The area highlighted with grey points shows you the spot that you can enhance with texts or additional items. Click on one of these areas and the header of the editor shows you which design options are available at this location. Via the header, you can not only format text, you can also integrate elements such as videos or RSS feeds.

Check how your shop places texts and product images. The header of the editor offers you a variety of options for this. You can also adapt the type of product presentation. For example, select an interactive coverflow effect that your customers can use to browse through products of a category.

Enhanced HTML design options

In closing, we’d like to say a few words about the additional design options that are available if you’re confident with your HTML. Using the “Content/Categories” menu, switch to the “Data sheet view”. You will then see a table overview of the individual category pages. Click on an entry to get to its options.

The “Texts” submenu is located on the “General” tab. Here, you can enter content via the editor for the above activated, grey highlighted area. However, don’t the graphical editor but rather, the direct input field for “Additional text” and “Additional text (2)”. You can also use HTML code to design the corresponding area. A wide range of graphical adaptations are possible in this way. This is only recommended for technically advanced programmers.

“Quick design” is ideal if you want to replace an image in the page header or change the background colour, for example.
Like this post? Share it!

Leave a Reply