Support for

w3shop - How-To Guides

Simon Tranter
by Simon Tranter 3 years ago
 
This help article contains links to guides that help you make the most of your w3shop system. An outline of the ususal set up steps are detailed below.
These guides MUST be followed exactly. Unfortunately we will not provide any assistance were your w3shop website has been created using Workarounds to achieve an outcome that is not intened or described in the articles below.

w3shop Overview

w3shop First Steps...

1. Select your w3shop Category Workgroup > Customers > Categories & Microsites

2. Under Microsite Style, edit your Theme, Fonts, Colours and upload a personalised website header image.

3. Add common web pages to your w3shop website.

4. Add Google Analytics, Meta Data and Descriptions to each page to help Google to find you.

5. Build your own products to sell online.

6. Cherry pick products you wish to sell from the Marqetspace product range.

7. Add a Payment Gateway to accept online payments.

8. Link your Domain Name to your w3shop website.

More articles...

Categories & Microsites - How-to Guide Categories & Microsites - How-to Guide

Getting started

How does the cache work on my w3shop? How does the cache work on my w3shop?

Choosing a w3shop Theme Choosing a w3shop Theme

w3shop Master Style, Colours & Fonts w3shop Master Style, Colours & Fonts

Your w3shop header image Your w3shop header image

w3shop page editing

w3shop Homepage w3shop Homepage

Create a w3shop Homepage slideshow Create a w3shop Homepage slideshow

Cumulus slideshow recommendations Cumulus slideshow recommendations

w3shop menus & mega menus w3shop menus & mega menus

Editing w3shop pages Editing w3shop pages

w3shop editing toolbar w3shop editing toolbar

Creating w3shop Pages (Page Types) Creating w3shop Pages (Page Types)

Products & Pricing

Product Pricing & Available Products Filter Product Pricing & Available Products Filter

Make your own print catalogue Make your own print catalogue

w3shop product images w3shop product images

w3shop product search & choice pages w3shop product search & choice pages

w3shop widgets

Popular template widget Popular template widget

Marqetspace widget Marqetspace widget

Trustpilot widget Trustpilot widget

Contact form widget Contact form widget

Google Map widget Google Map widget

Template Search widget Template Search widget

SEO

Setup Tracking and Meta Data for your w3shop Setup Tracking and Meta Data for your w3shop

Social media & your w3shop Social media & your w3shop

Templates & TemplateCloud

Allowing TemplateCloud Designs or just your products Allowing TemplateCloud Designs or just your products

TemplateCloud® Match TemplateCloud® Match

Linking Products to Templates Linking Products to Templates

w3shop & DNS

w3shop domains & DNS Settings w3shop domains & DNS Settings

w3shop - Promoting once live! w3shop - Promoting once live!

Financials & Invoices

Vouchers

Basket gift vouchers Basket gift vouchers

Delivery

Online delivery costs Online delivery costs

Customisation

w3shop Header links w3shop Header links

Relative links in your w3shop Relative links in your w3shop

Personalising Emails Personalising Emails

w3shop Contextual links w3shop Contextual links

ReCaptcha for contact forms & registration ReCaptcha for contact forms & registration

FAQs

w3p FAQs w3p FAQs

w3shop - How-To Guides

This help article contains links to guides that help you make the most of your w3shop system. An outline of the ususal set up steps are detailed below.
These guides MUST be followed exactly. Unfortunately we will not provide any assistance were your w3shop website has been created using Workarounds to achieve an outcome that is not intened or described in the articles below.

w3shop Overview

w3shop First Steps...

1. Select your w3shop Category Workgroup > Customers > Categories & Microsites

2. Under Microsite Style, edit your Theme, Fonts, Colours and upload a personalised website header image.

3. Add common web pages to your w3shop website.

4. Add Google Analytics, Meta Data and Descriptions to each page to help Google to find you.

5. Build your own products to sell online.

6. Cherry pick products you wish to sell from the Marqetspace product range.

7. Add a Payment Gateway to accept online payments.

8. Link your Domain Name to your w3shop website.

Categories & Microsites - How-to Guide

The Categories & Microsites Menu Tab in Flyerlink is the Control Panel for printing.com, nettlBrandDemand, w3client and w3shop Microsites.

Menu Location: Workgroup > Customers > Categories & Microsites

Important Sections

  • Microsite Pages (Used to build/add/edit w3shop pages)
  • Customers (A lists all customers associated to this Microsite)
  • Available Products (Lists all products available to Customers associated to this Microsite)
  • Apps (Apps are the Menu Tabs shown to the client within their Account Dashboard, such as My Orders and Invoices)
  • Financials (Set your default payment terms/options for all customers assocaited to this Microsite)

Customer Accounts

Customer Account consists of a Main Account Contact and several Additional Contacts who work for the same business.

Each Customer Account is assigned a unique Customer Account Code to differeantiate them from other customers.

The relationship between Customers and Microsites

All Flyerlink Workgroups are set up with a Default Microsite that all customers are assigned to when first created found under Workgroup > Customers > Categories & Microsites > View/Amend

Moving Customers for one Microsite/Category to another

You can move customers to different Categories/Microsites using the dropdown menu under Workgroup > Customers > View/Amend > Nuts & Bolts.

Microsite Settings

Allowing TemplateCloud Designs or just your products

Outline:

This articles explains how you can quickly remove templates or products from your w3shop/microsite.

On your microsite, you can use the Available Products filter to choose exactly what products you want to show. But there's another way you can restrict the TemplateCloud Designs or Products on sale for your w3shop.

Allow TemplateCloud Designs?

All w3shops can list the TemplateCloud Design library, they just need to have "Allow TemplateCloud Designs?:" ticked on Workgroup > Customers > Categories & Microsites > View/Amend.

Then your Template Search page type will list all TemplateCloud Designs with a Matching Product.

If you only see a limited selection of TemplateCloud Designs, it's likely the Templates are the only ones that match products available in your Product Search page.

https://src.29degrees.co.uk/attachments/15457/Capture.PNG

If you untick "Allow TemplateCloud Designs?:", the only templates you'll find are those set up for TemplateCloud Match.

Only Allow My Templates and My Products?

If you want to completely remove all products made from the Production Hub, Network Partners or Marqetspace Sellers, simply tick "Only allow my templates and my products?" on Workgroup > Customers > Categories & Microsites > View/Amend.

Your Available Products filter will then only list the products you've created on Workgroup > My Products > Products.

And your w3shop or microsite will only list the products you've created as well.

 

Customer credit & payment controls

Flyerlink comes inbuilt with credit controls you can set against customers or microsites.

Setting up credit limits for your customers

If you want to set up a credit limit for your customer

Head to Workgroup > Customers > View/Amend

In the Financials section, change the payment terms from CASH to another option.

This payment term will be applied to all customer invoices, and will also show an offline payment option on the checkout payment page when they order online.

Once you choose a non-cash payment term, you are able to enter a credit limit.

When that credit limit is exceeded, we apply a job control to all jobs created in Flyerlink or ordered online that exceed the credit limit you've set.

We also email your client explaining the credit limit has been exceeded and payment will be required to progress the job.

We also email the client and apply the credit limit exceeded job control if they exceed credit terms (by ordering with overdue invoices that require payment). As soon as the overdue invoices are paid online, we release the jobs they've just ordered allowing them into production.

You can see if the customer has outstanding invoices requiring payment by going to Workgroup > Customers > View/Amend > Financials > Invoices

Setting up credit limits for microsites

You can also add credit limits to your microsites

Choosing the payment terms here will apply to your invoices, but you can set a limit you expect to be spent per customer or category.

If you can't set a limit on an individual customer, you'll need to tick "Credit limits vary by franchisee/licensee/department" on Workgroup > Customers > Categories & Microsites > View/Amend

The automated applying of job controls doesn't happen if your controling credit by microsite.

Should I use credit controls?

Offering credit to customers is a risk, as you can incur costs for the order and fail to recoup payment. It is also useful for winning large contracts.

Check out our advice on the Payment Directive to see if you should offer credit to your clients.

Payment and credit job controls

There are two payment controls you can add to your jobs via Workgroup > Jobs > View/Amend > Notes > Waiting

  • Credit limit exceeded
  • Waiting for payment

Choosing these opens up an email template to your customer, that you can edit.

After these controls are applied, if your customer pays for the job we will automatically remove the control and send an email to you saying the control has been removed and the job can be progressed.

Microsite Apps - Choosing your menus

With the V3 responsive version of w3client microsites and w3shop categories, you don't have to use all the  apps or menus.

You can choose which apps are available to all customers for your microsite or w3shop, and even vary the apps for individual customers.

Changing apps for your whole microsite

To change apps for all your customers head to
Workgroup > Customers > Categories & Microsites > Apps.

By default you'll see no apps, this just means you want all of them to show.

If you want all apps apart from the Files & Images app, simply add the ones you want and don't add the Files & Images app.

Then when your customers log into their microsite, they'll only see the apps you've chosen.

They also won't see any menu links to their missing apps

Changing apps for individual customers

You can also choose different apps for individual customers from
Workgroup > Customers > View/Amend > Apps.

To start off with all your customers will have the same apps as your category. If you want different apps, press Choose different apps.

Then you can adjust the apps and add or remove some for just this customer. In this example, 1 customer can have access to the Files & Images app, while all others in the category don't.

If you need that customer to go back to the categories app, you can change them back anytime.

What else can I change?

For each app you can change the:

  • Name:
  • Colour:
  • Icon:

Custom Apps

With custom apps you are able to add links to any web page you want. For example, your client may want the microsite to link to some training resources or how-to videos.

The app can link to either an external web page, like a clients own intranet system, or you can use an iframe to show the content within your microsite area.

To add a custom app, choose the Custom App option via Workgroup > Customers > Categories & Microsites > Apps or Workgroup > Customers > View/Amend > Apps

You'll see new options to add a url, choose the url behaviour or show in an iframe.

Change the colour and icon, and enter the url of the web page you want to show.

Your new app will then show in your dashboard, and as a menu option.

If you choose to show the webpage in an iframe, we will load the website within your microsite.

 

Warning: some websites like google.com and youtube.com (homepage) prevent iframes loading for their homepage.
You may want to test the iframe runs before informing your client of new apps.

If you'd like to build a web pages quickly and easily to work with your custom apps, ask your support team about upgrading to build websites and webpages with Brambl.

Basket quotes

The quotes app allows customer to save multiple different baskets and to swap their basket with an older quote.

It can be used by customers to build up different orders, and leave a quote saved for later if a more immediate requirement for print comes up.

The quotes app appears by default on V3 responsive microsites, and can be removed by  choosing other explicit apps - see Microsite Apps - Choosing your menus for more info. If you turn off the quotes app for a customer or category, you won't see a save icon in the basket.

Please note: Basket quotes are not related to the quotes menu in Flyerlink.
The quotes menu in Flyerlink lets Flyerlink users build a quote to check prices and send out a PDF to the client.
Basket quotes allows your customer to save baskets as quotes for later use.

Quotes app

Customers can see a link to all their quotes once they log in and go to their dashboard

The page will show a list of all baskets they've saved

To save a quote, simply head to the basket and press a new save icon.

You will then be redirected back to the quote page where you can see an overview of your quotes

Expand an item to see more details

The quote is active and can be added to within Flyerlink.

Press swap with basket to exchange the existing basket with this quote.

Building up quotes instead of baskets

If a client knows they want to build a quote and get prices without having to upload artwork immediately, you can direct them to their quote app.

Here they'll see a note that has a helpful "Start now" link.

When that is pressed, instead of redirecting clients to the artwork options when they add an item to their basket, we will instead direct them straight to the basket.

On the basket we highlight the next steps someone can take. Whether they should keep adding items to their basket, stop quoting or save the quote.

Product Pricing & Available Products Filter

This article explains how to adjust products and prices within your w3shop or private client microsites.

Contents

  1. Available products
  2. Price changes
  3. Product description changes
  4. Where do my price changes take effect?
  5. When will my price changes appear?

Available products

For each Category with an associated microsite, you'll see a menu option Workgroup > Customers > Categories & Microsites > Available Products. This option will not appear for printing.com studios.

By default all products are available.

 

To restrict the product selection:

  1. Remove the All Remaining Products option,
  2. Select only the Product Zones, Product Categories and Product Groups you want.

If you choose a Product Zone, you will list ALL products within that zone. If you restrict the product selection, you'll also need to re-add all the Opensource Products you've set up.

Price changes

By clicking the "edit pricing" link, a pop-up will appear and you'll be able to adjust the prices for that Product Zone, Product Category or Product Group.

From here, you can either:

a) Make changes to the fixed price or a percentage of the total product Selling Price (RRP), or

b) You can do the same based on the Transfer Price, which is how much you will be charged for the product.

Remember, any negative discounts (based on Transfer Price) mean that you'll be selling products for less than your cost price.

Price changes for Product Groups or Product Categories override those within the Product Zone. So you can increase all Flyers by, say £10, then choose one Product Group to increase by £20.

Examples of markup percentages for a specific Gross Profit Margin

Add 100% Markup => 50% Gross Profit Margin
Add 66.66% Markup => 40% Gross Profit Margin
Add 42.86% Markup => 30% Gross Profit Margin
Add 25% Markup => 20% Gross Profit Margin
Add 11.11% Markup => 10% Gross Profit Margin

Price description changes

For Product Groups only, you can also change the descriptions your customers see.

Simply click the "edit description" link.

Starting from your supplier's marketing, you'll be able to adjust the Product Group name, url-slug, description and Search Engine Optimisation settings to fit your branding.

Any changes to the text will appear on your microsite.

 

Where do my price changes take effect?

Your price changes and product restrictions apply across Flyerlink and your microsite.

In Flyerlink, any customers belonging to the microsite will only be able to create jobs for products available to them e.g if you've removed Business Cards, your client won't be able to order them.

On your microsite, only the Product Groups you've selected will show online and any price changes will appear across the entire site.

You will also only see online Templates compatible with the product range(s) you've made available.

When will my changes take place?

Price & description changes can take an hour before they are fully updated on your site.

Templates will update every day but you may have to wait for all the incompatible templates to disappear.

Please refer to Resource Article 4982 for any questions on update speed.

 

Redirections on w3shops

About Redirections

Redirections are URLs that link to another webpage. They are commonly used to help users find webpages, or to replace pages that are now redundant.

You can set up redirections through Flyerlink, using a Short url.

This guide explains how to set up redirections for your w3shop

Redirections in your w3shop

There are two ways of adding Redirections for your w3shop:

  • As a permanent redirect.
  • As a redirection w3shop page type.

Use permanent redirects to replace now discontinued pages with a more relavent page.

Use the redirection page type to add menus links to Internal pagesor External websites.

Permanent Redirects

You can now view existing and add new permanent redirections for your whole microsite via Workgroup > Customers > Categories & Microsites > Redirects.

To create a new one, simply press Create Redirect

Add your old redundant url page in the Original URL, then enter the page you'd like it to redirect to in the Redirect Location.

You'll be able to add any link into the Original URL that includes your w3shop main domain or aliased domains.

To try out the redirect, enter the old url to your browser and check it goes where you want.

To prevent permanent redirect loops on your homepage, a url slug is required for your redirection location.

If your homepage has no url-slug, you can simply add "/"

Redirection Page Type

Linking to Internal Pages

Some w3shop pages like Product Group pages are automatically generated, and you don't need to make a new page type for each one.

However, if you'd like to make a header or footer link you can do so using the Redirection page type.

Adding a Redirection page

  1. Go to Workgroup > Customers > Categories & Microsite > View/Amend > Microsite Pages > Create.
  2. Choose the Redirection page type;
  3. Add a url slug you want to redirect from;
  4. Add the full url of the product group you want to link to;
  5. Choose whether you want it to be part of:
    • a dropdown header menu
    • the footer

Linking to External Pages

If there is a website you really like, or if part of your w3shop is hosted by another web provider. You can use redirection links to external sites.

The set up is the same, but your URL should be an external webpage.

301 or 302 redirect, which should I choose?

Search engines prefer 301 redirections to 302 redirections, however we default to 302 redirections.

The difference is that 302 redirections are easier to change.

301 redirections are cached in a browser memory, if you need to change one of these redirections you will need to refresh the browser cache of everyone who's used the link.

While this is good when you know a page will never change, you may want to use 302 while testing to ensure they are correct before making it harder to undo a mistake.

w3shop product images

One of the advantages of w3shops is that they come pre-built with TemplateCloud and products from Grafenia's production HubM. The Grafenia product range already have hundreds of product images to advertise the print range.

It is possible to change the Granfenia product RRP for your shop using the available products filter. And it is also possible to change the Grafenia product images using the Product Images tool.

Changing Grafenia HubM product images

Use the Product Images tool to change Grafenia product images.
Head to Workgroup > Customers > Categories & Microsites > Product Images

Here you can download the existing product images you have on your site. Choose the product zone you want to download images for.

You'll be given a .zip of the product category images, which appear in the upload your files page type.

And the .zip will also contain all product group images you see on the product search pages.

Delete any images you don't need to update.
Then replace the images with your new ones.

You'll need to keep the file name the same, the file name has a special code that helps us know which image is being replaced. For example you'll need a BUSCARD.png or BUSCARD.jpg file to replace the business card product category image.
If you upload a file that hasn't got one of our special file names, we'll reject it as we don't know which image it's designed to replace.

Once you've adjusted the files, you can .zip up the file again and upload it.

We'll show you if there are any issues we have uploading the files, alongside an image of any files we actually replace.

1 hour delay changing product category images

Product category images show on the upload your files page, which have an hour long cache to improve the page load time.

As a result of this cache, any product category images could take upto an hour before they take affect.

Changing opensource product images

For opensource products, you don't need to use the Product Images tool to replace your product group image.

Simply upload an image for the product you create on Workgroup > My Products > Products > View/Amend

If you've more than 1 product image for a product group, you can choose the cover photo for your product group on Workgroup > My Products > Product Groups > View/Amend

Personalising Emails

Overview

This article explains how to personalise emails sent to your customers and studios from w3p sites.

w3shops and w3client microsites send a number of emails to customers and your sales team when orders are placed, passwords are changed or important activities are undertaken.

You are able to personalise these emails and adjust the text to suit your brand.

Choosing an email to personalise

Go to Workgroup > Customers > Categories & Microsites > View/Amend > Email Templates.

Either search for an email template you've already personalised, or Add a new one:

Personalising your email

Once you've chosen an email to edit, you'll be given a default email.

You'll be able to change the description for internal reference of what the email does.

You'll also be able to choose who the email is sent by and which email address it is sent from. If this is blank, a sensible email from your workgroup is chosen.

Then you can change the email's subject line, which is visible to customers, and the email content.

Active Text Substitutions

The default emails make extensive use of Active Text Substitutions. These are [square]![brackets] that retrieve information about your customer, their order or your workgroup.

We recommend you continue to use Active Text Substitutions.

Below your email, there'll be an explanation of what information the Text Substitutions retrieve is given.

You'll be able to use these Active Text Substitutions anywhere in your email, or you can replace the workgroup information with your own signiture.

Sample Emails

Once you've finished personalising your emails, you can send a sample to yourself.

The Sample Email will retrieve your Active Text Substution's example, not a live order. It will make more sense to your customers than to yourself.

Finish Editing

When you've finished editing, simply save your changes.

You can also revert to the default email template if you've made a mistake, or you can delete the personalised email and stick to the one created on your behalf.

What emails can I personalise?

There are some other emails sent out by flyerlink, mostly workgroup notifications, that cannot be personalised. However, you will be able to personalise all the main emails sent out under your branding.

You will be able to personalise the following types of emails:

  • Any email sent following a user's input on your microsite;
  • The job printout and bulletproof emails; and
  • The action required when a job is sent to 081 for a supplier.

All the emails available for personalisation can be found via Workgroup > Customers > Categories & Microsites > Personalised Emails.

How does the cache work on my w3shop?

What is a cache?

A cache is a feature that transparently stores data so that future requests for that data can be served faster.

Your w3shop uses a number of caches to make it work as fast as possible. These include a price cache, a voucher cache, an image cache and an html cache.

If you sell designer templates, we automatically scan your w3shop six times each day to look for products which are suitable for templates. If you don't have, say, an A6 double-sided product, then we won't show any designs which are that size. Create a product, and later that day, matching designs will show up.

Why are you telling me this?

The vast majority of support queries we receive relate to changes not yet showing. If you've recently updated your products, please wait one hour before reporting missing products, missing images or incorrect prices.

What's the alternative to a cache?

We could just run queries 'live' and load images every time. If you've ever tried to compare flight prices or car insurance quotes, you'll probably have seen a "please wait while we search" message - this is an example of a database query being run live.

If we did that, your w3shop would run very slowly indeed. Instead, we pre-calculate certain things and then serve the 'saved' version to your visitors. This technique is used by many ecommerce sites.

If you're used to editing a blog or a static website, then this concept will be new to you. However, if you've build an ecommerce site or sold via third party sites, you'll know that changes don't appear 'instantly'.

What's the downsides of a cache?

Since the page might have been saved a little while ago, there could be a delay of up to one hour before changes you make to your w3shop become live. That means, if you add products, change prices, replace images, it could be one hour before your site shows them.

You'll notice the cache most strongly on your w3shop Homepage, which can take upto 1 hour to update with new text.

Why does my site feel slower after I make any changes?

Every time you change your site - adding a product, changing some text or editing images, we need to delete the 'saved' version of your page (or pages, if the change affects many things).

It doesn't matter whether you've drastically changed the page, or just fixed a typo - we need to clear the cached/saved version and create the page again.

This means the next person to view the affected page will trigger a 'redraw' and 'recalculation'. Since that person is probably you, the first time the page is viewed will be the slowest. For the second visitor onwards, the page will feel snappier.

If you make more changes, and save again, you'll be going through this cycle again. So try to make changes in 'batches'.

Why does Flyerzone feel faster than my w3shop?

The more visitors you have, the faster your site will feel. Although that sounds counter-intuitive, the more people that view a page, the less likely they're the first to view it. More visitors mean more people viewing a cached/saved version of the page.

Have you recently changed the way the cache works?

Yes. On 17th February 2014, we upgraded all our caches to run automatically when certain events triggered them. Before then, some caches had to be run manually by administrators.

Choosing a w3shop Theme

A w3shop Theme is  a ‘framework’ or layout to start from. Each theme comes with some basic page layouts which are a ‘starting point’ rather than a blank canvas. Whichever you pick, you can replace text and images with your own, as well as change colours and fonts.

Certain complex pages are the same on all themes, like Design Search pages, product filters, the basket and checkout pages.

We have provided 5 themes: Delicious Metro, Minimal Regular, and Zone Red, Zone Clean and Cumulus.

We strongly recommend using Cumulus, our only responsive theme.
Cumulus is the most flexible theme, with the greatest number of page layout options, and it is responsive on mobile and tablet devices.

You can see an active demo of Cumulus on http://lish.io
Check out the pages underneath the About Us menu to view the different default page layouts available.

The Cumulus theme:

The Minimal Regular theme:

The Zone Red theme:

The Delicious Metro theme:

To set your chosen theme go to Workgroup > Customers > Categories & Microsites > View/Amend scroll down to Microsite Styles and Choose Theme in the drop down menu.

 

Watch this space

We're working on adding more themes, and an easy way to create your very own themes.

 

w3shop Master Style, Colours & Fonts

Personalise the style of your w3shop microsite to match your branding. Set the standard fonts and colours you require throughout your w3shop.

To set change the style of your w3shop, use the Microsite Style and Microsite Colours panels on Workgroup > Customers > Categories & Microsites > View/Amend.

Choose Fonts

You can customise the look and feel of your w3shop with web fonts. Choose from two font service providers - Google Fonts or fonts.com:

Then you'll be able to choose fonts and style from the dropdowns:

An example w3shop page. Numbered areas are described below.
  Option Where is it used?
1 Page headers (H1) font The title that appears immediately under your header, like "Ready-Made Designer Templates" (see example), and any H1 tags that you create in your free text.
2 Main section headers (H2) font Smaller titles and group headings, like "Refine by" (see example), and any H2 tags that you create in your free text.
3 All other header fonts Other headings, and H3 tags in free text.
4 Main menu font Used for the top-level menu items, just below the header image.
5 Main menu item font Used for the items that appear when a top-level menu item is clicked.
6 Body text font Used for the bulk of your narrative text.
7 Buttons font Used on your buttons.
Defaults to Metro Office if using fonts.com or Lato if using Google Fonts.

Font Recommendation

Google fonts tend to display the most clearly and were 'invented' for screen display, rather than converted from existing print fonts. If you're using Fonts.com, those with eText in the name are designed for body text.

Choose Colours

Hexadecimal colours can be entered directly into the boxes provided or the Colour Picker can be used by clicking on the swatch box. RGB or HSB colour formats can also be entered here.

 

 

 

Your w3shop header image

The header image appears at the top of all your Microsite pages and normally cotains your logo and branding.

The image must be 1100 pixels wide and a minimum height of 90 pixels. The file format should be web-friendly e.g. JPEG, PNG or GIF and using RGB colour format.

To upload your Header image go to Workgroup > Customers > Categories & Microsites > View/Amend scroll down to Microsite Styles and click Choose File next to Header Image.

w3shop Homepage

Each w3shop theme comes with a homepage.
There are some special rules for w3shop homepages.

1) Homepage cache

The w3shop homepage page type has a cache to speed up the load time
This means it can sometimes take around one hour for your changes to show after they've been saved.

2) You don't need a url slug for the homepage

The homepage or 1st page sorted is the only page that can have a blank url slug.
This means people can go to http://www.yourdomain.com instead of http://www.yourdomain.com/home

3) You don't have to use the homepage page type

You can use any page type for your actual homepage, provided.

  • The new page has a sort order of 1
  • It doesn't belong to any dropdown menu
  • You either
    • Remove the url slug, or
    • Include the page in your menu at the 1st position.

For example http://www.flyerzone.co.uk/ uses the Cumulus theme Homepage B instead of the default Homepage page type to show a different option.

4) Your logo or header image will redirect to the homepage

 

- Example homepages

 

 

 

 

 

Create a w3shop Homepage slideshow

A slideshow can be added to any page type within your w3shop. A sideshow should be added to your Homepage and used to highlight your USPs, link directly to important pages, products or services within your w3shop, promote special offers or new features.

How do I add a slideshow to a page?

Go to Workgroup > Customers > Categories & Microsites > View/Amend scroll down to Microsite Pages

Click on the edit button for the page you want to add a slideshow to, check the Enable Slideshow tick box and enter the height in pixels.

Format your images

The image should be 1100 pixels wide as standard (if using the Zone Red theme, images should be 855 pixels wide) and whatever height you choose. The file format should be web-friendly e.g. JPEG, PNG or GIF and using RGB colour format.

Upload your image to Flyerlink

Go to Workgroup > Customers > Categories & Microsites > View/Amend scroll down to Microsite Pages. Select a page that has Enabled slideshow, add Slideshow Height and choose the Rotate Frequency. Scroll down to the Slides menu.

Use the Sort Order function to sort the order that your image view in the rotation.

Where can I get some low-cost imagery from ?

If you need stock imagery for your w3shop you can browse and purchase over 14 million images in Flyerlink. All images are available in XXL size for £1.99 each. See Stock Images in Flyerlink for more information.

Cumulus slideshow recommendations

The slideshow for Cumulus theme scales to fit the browser for mobile and tablet.

You can also choose whether you want a responsive slideshow, that increases in size for larger browsers, or an unresponsive slideshow that keeps a fixed width on larger device widths

Recommended slideshow dimensions

We recommend you design your slideshow for a desktop, at 1200px wide.

Unresponsive recommendations

If you leave "responsive" unticked for your slideshow, on large devices we won't scale up your slider.

Instead we will keep it at 1200px in the middle of the screen and use your slide background colour as a bleed to the edge. This means your slide will look centered, alongside the rest of the theme content.

Responsive recommendations

If you make your slider responsive, we scale it up on larger device widths.

To avoid this looking very odd in relation to the content, you can choose what device widths you want the slider available on.

By default the slide is available on mobile, tablet and desktops upto 2000px

You can increase the minimum width to make it not show on mobile, or adjust the max width to change the desktop size the slider is available.

The default slide recommendations are our recommended option - leaving it unresponsive and having a background colour bleed, but also only showing upto 2000px

w3shop menus & mega menus

 

For w3shops, each page you create can be included in your main menu, a dropdown menu or in  none of the menus.

You can also include pages in the footer.

Menus

If you want to change the menu options for your page, head to your page via Workgroup > Customers > Categories & Microsites > View/Amend > Microsite Pages

To show the page in your:

1) Main menu
For "Is this a main menu?", choose Yes

2) Dropdown menu
For "Is this a main menu?", choose No
For "Show in dropdown menu" choose a main menu item you want the page to be a dropdown of.
Note you will only be able to make a page a dropdown menu item of another page if that page is part of your main menu.

3) No menu
For "Is this a main menu?", choose No
For "Show in dropdown menu", choose No

Redirection page types

If you want to create a menu link to something that isn't a page, like a specific product group page or another website, choose the Redirection page type.

Mega menus

If you choose a dropdown menu, you can make mega menus by choosing extra columns. You can have upto 4 columns, and we will only show the column if there's at least 1 page in that column.

You can also give columns names or titles that aren't clickable.

Sort orders

The sort order determines how high a page will show in a menu, dropdown menu or footer.

If the page is a part of a dropdown menu, the sort order numbers available suit the order of the dropdown it belongs to.


Menu icons

Menu icons are only supported in the cumulus responsive theme.

The icons come from fontsawesome, so you can choose any text from http://fortawesome.github.io/Font-Awesome/icons/

If you choose "heart", we will display a heart icon.

Editing w3shop pages

Brief Overview

Personalising your content

To edit a page on your w3shop, go to Workgroup > Customers > Categories & Microsites > View/Amend. Select your w3shop Category.

Browse to Microsite Pages and select the Edit link next to the page that requires amending.

On the Page Content screen select Layout & Design: Edit page content. This opens the In-Site Editor.

Editing your images

Select an image and use the Toolbar: Image Icon to open the Image Properties dialogue box.


To upload a new image select Browse Server.

This opens up the CK Finder. Select the images folder and the green Upload button to upload new images.

Editing text links

Highlight the word you would like to link to another page e.g Business Cards. Select the Toolbar: Link Icon. Paste the URL you would like to page to go to in the URL box.

w3shop editing toolbar

Overview

The w3shop editor has a range of tools available to help you easily update and edit your w3shop. Here's a brief run down of what is available.

1 - Cut

The cut tool allows you to select, then cut content to your computers clipboard.

2 - Copy

The copy tool allows you to select, then copy content to your computers clipboard.

3 - Paste

The paste tool allows you to paste any content that you have cut or copied to your computers clipboard.

4 - Paste as plain text

The paste as plain text tool allows you to paste any content as plain text that you have cut or copied to your computers clipboard. This removes all formatting.

5 - Undo

The undo tool applies an undo so that you revert backwards through your changes.

6 - Redo

The redo tool applies a redo so that you reapply your changes.

7 - Spellchecker

There is a built in spellcheck available.

8 - Add hyperlink

Link text or images using this button. Click and add the relevant link.

9 - Remove hyperlink

Remove an existing hyperlink by selecting the object and clicking this button.

10 - Anchor

Add an anchor point to your web page. For example, you may have a page loaded with content. At the bottom of the page you could add a link 'Back to top' which sends the user to the top of the page. To do this you need to first set the 'Anchor' this should be the point at which you want your user to be taken.

Click the 'anchor' button, this adds the anchor point. Then give it a name. This is what you will link to next:

Then using the add hyperlink button (8) add the link you want and point to the anchor:

Select Link type - "Link to anchor in text" this will display any anchor points you have created. Just select the one you want.

Then, when the user selects 'back to top' it will take them back to the anchor point.

11. Add Button

Within the style set of your chosen theme, there will be a particular button style. The colours of which are preset by you selection within the main w3shop control page:

To add a button on a page simply place your cursor when you want the button and click the 'add button' erm... button. You can then edit the text within the button and change the hyperlink.

 

12. Add Image

Adding an image into your page theme. Clicking here will bring up image editor tool

There are 4 panels within the Image editor.

  • Image info - This is where you set the image dimensions and alternative text. You can select images already uploaded by clicking 'browse server'.

  • Link - Add link information for your image here and set the target action for that link.

  • Upload - allows you to upload a new image. Click browse and choose the file on your computer. Then click 'Send it to the server'.

  • Advanced - add meta tags to your image

13. Add i-Frame

Lets you load a website in the middle of your page.
This is useful if you want to load some dynamic contented, as you can host a webpage externally with a gallery or a widget, and then you can use an iframe of that external page to add your gallery/widget/content into the w3shop.

14. Add Table

Lets you add a table to your w3shop

15. Add Hairline

Lets you add a line to page under your text. This hairline is a dark line that acts as a section break between content.

16. Add Special Characters

Provides a grid of special characters like accented letters or the greek alphabet. Choosing a special character adds it to your text box.

Creating w3shop Pages (Page Types)

Workgroup> Customers > Categories & Microsites > Microsite Pages

Each page is special. Some do special things; they need to be there for your w3shop to work.

When you create a new page, you choose a Page Type, we’ll install any plug-ins or widgets that you need to work with that page type.

This article outlines the page types available to add to your w3shop. It explains which are mandatory, what they contain and how they can be used.

Recommended Pages

Product Category Search Pages

http://www.printing.com/uk/christmas-cards/

This page links to a specific Product Category e.g Christmas cards and is usually placed as a submenu under Products & Prices (Page Type: Product Search).

Landing Pages (Helps Google to find relevant product pages)

http://www.orderlink.co.uk/zonered/christmas-cards

This page links to a specific Product Category e.g Christmas Cards and can also be placed as a submenu under Products & Prices.

Template Selection Pages

http://www.printing.com/uk/catalogue/designs/business-card

This page shows the customer a specific set of templates by Product or Industry and is usually placed under the Design Online (Template Search) page.

Downloads Page

http://www.printing.com/uk/help/downloads

This page contains InDesign templates for customers supplying their own files.

w3shop product search & choice pages

w3shop provides multiple different options for displaying product choices to customers, some of these are necessary pages to ensure the integrity and stability of your w3shop. Others are optional.

Product search

All w3shops have a product search page.

By default a product search page will list product groups to customers, and provide filter options to find the best product group.

 

With the Cumulus theme only you can also choose for your product search page to show product category results.

The product category results will either link to the product picker grid w3shop page (if you've added that), or it will use the configure your printing page (if you haven't added the product picker grid page)

Product price grid
(product group)

All w3shops have a product price grid page.

This page shows a quick quote and a price grid for all products within a product group. Product groups are normally based on a paper weight and finishing type, such as 150gsm gloss leaflets, and can show a range of sizes with that size and finishing.

 

Configure your printing
(product category)

All w3shops have a configure your printing page.

This page shows results for sizes and colour combinations of products in the same category. Once a size and colour type are chosen, we show all products with a matching size and colour type based on their substrate, substrate weight and product style product tags. Each options show price difference of the selected product and the product with the different tag combination.

This helps the customer navigate to find the best price and has a much higher conversion rate than the product group page.

Product picker grid
(product category)

Brand partners only

This is an optional page for Cumulus theme and reserved branded websites only. Add the product picker group pagetype to have this on your website.

The page shows the same product results as the configure your printing page, but in a different visual way. The size, colour type and tags are displayed above a grid. Once a product is selected using those filters, the quantities and service levels are displayed in a grid to show relative prices.

The page also has links to product groups in the featured side bar or in the product summary tab.

By default the page will show best seller products to the customer, but you can change this default on your product picker price grid page.

Featured products, which list down the side of the page, are normally those with an offer on at the moment, while best sellers are our all time best sellers.

You can add your own products as featured products, or as best seller product groups.

To add a featured product, simply head to Workgroup > Products > My Products > View/Amend

Tick "Featured products"

This will promote all products in that group as being featured.

Featured product are also used for the cumulus homepage featured products slideshows.

To add a best seller, head to Workgroup > Products > My Products > Product Group > View/Amend

Tick "Best Seller"

Now all products in that product group will be included in the best seller radiobutton group.

Page Type: Product Search (Product & Prices)

This mandatory page type (Product Search) offers a filtering and search mechanism to help users to find Products by Product Category or Group.

Search for Product Categories tick box

Displays products by Product Category such as Leaflets, Flyers and Business cards. If unticked we will display Product Groups such as 150gsm Gloss Leaflets.

Single page with filter tick box

Displays products as a single page with a filter on the right hand side.

Renaming this page

You may wish to rename this page as Products & Prices, Instant Prices or Products.

 

Product Category Search (Shows Products by Category)

Overview

The Product Category Search 'page type' is used to provide a quick link to a specific Product Category page such as Leaflets.

Example: Leaflet Product Category Page