Your local Nettl web studio will work with you to design a website that’s beautiful, responsive and meets your online needs. Your studio will create a website and a framework you can then use to make minor changes or add ongoing content tailored to your needs.
The following guides are intended to help you understand the platforms we could use creating your website, to enable you to make simple content changes yourself. We will explain how to create content, especially for websites that require new content added regularly, such as websites with active blogs, private articles to privileged customers, or directory listings. We will also explain e-commerce website adminstration, including how to add new products and manage online orders.
Finally we have guides for our bespoke Nettl till integration, highlighting our features with advise on how to keep orders and products in sync between your website and till.
2.Accessing your website
Once your new Nettl website has been started, we’ll create a development domain to build your website on.
We will work on a design for the first few pages based on what you’ve asked for during our consultation, and then send you a link to your development domain.
If you need to make changes, we will also email you a username and password alongside details of how to access the backend of your site.
You can also find your website’s development domain through your local nettl studio’s Orderlink website app.
Choose the website app to view a summary of your website(s), alongside a link to view or edit the site.
3.Amending text, images & links
The following guides explain how to amend text, images and links within WordPress, WooCommerce and Brambl websites.
Choose the platform you’re website uses to learn more.
WordPress websites provide 2 main types of content:
Pages will be used to create your homepage, contact us page, about us page and any other pages you require. Posts will be used to create blog posts, that are updated regularly and older posts are archived making them slightly harder to access than recent blog posts and pages.
Generally pages will be timeless, while posts will be timely.
Nettl studios will normally design and build your pages, but will provide the framework and templates for you to create your own posts.
Editing posts & pages
Log into your website back office, and choose either the Posts or Pages menu.
Next you’ll see a list of all the pages or posts created for your site.
Search for the page or post title and click the page you want to edit.
Here you’ll see the content of the page. The page content will normally be divided up into sections, rows and modules like the image above. (Don’t worry if your website doesn’t look like the screenshot above, your website may use a different solution with a content text block to edit and settings down the right hand side.) Press the three line menu icon to edit the modules and change the settings or text.
The options available after you press this are dependent on what’s been created for you.
For simple text module settings you’ll see a text box where you can enter text, double click links to change the url they go to, and replace images by pressing the Add Media button.
You may see text with code in it such as in the image above, where there are pointed brackets like “<” and “>” or square brackets like “[” “]”. This is used to apply markup, or to get content from somewhere else. If you see code like this on the module that you’re not familiar with, try changing the content outside the code markup, but Preview Changes before you Update. If your stuck, contact your local web studio for advice.
Previewing and saving changes
Once you’ve made changes, scroll up to the publish side bar you’ll see on the right side of your page.
Choose the Preview Changes button and you’ll be able to view the page with your changes. It’s always advisable to preview before you update in case other changes need to be made. When you’re happy with the preview, press the Update button.
Blog post tags, categories and featured images
Something you’ll see on blog Posts that are not normally visible on Pages is the option to add tags and categories. These are used to help help people re-find old content, as you can group together similar posts by including them in the same category or by adding the same tag.
Tags and categories will appear on the right side of the blog post.
You will see a list of all the tags and categories already in use on your site, so you can re-use ones you’ve had before.
However you can also create new tags and categories while editing the page.
Featured images are also used by blog posts to show an image that helps summarise the content of your blog. To set a featured image, simply go to the featured image and choose a photo from your media library.
What if I need regular content that isn’t a blog post?
If your site is an e-commerce website, directory website, or requires something other than blog posts – your Nettl studio will help you create a new content type with it’s own menu designed for you to create these on a regular basis. The menu will be named after the content type you need, such as news, articles, directory listings or products.
The main content section will be the same for these content types, however there may not be a page builder. Instead the page may be designed specially to add the content you need for the framework provided.
Is there anything I can’t edit?
There will be parts of the site that have been specially built for you by your local web design studio that can’t be edited within the post, page or other menus. If you’ve tried to edit something but feel you are unable to, contact your local Nettl studio for assistance.
WooCommerce websites use the same content management system (CMS) or backoffice as WordPress for editing posts and pages.
The difference with WooCommerce is that you will have extra menus for managing your products, shop and orders.
Editing content on Brambl websites is simplier than in WordPress and WooCommerce. Whereas in WordPress or WooCommerce content is entered in one place and then pulled together to build the webpage your users will see, Brambl provides a visual editor where all the control you’ll need to edit content can be found by simply double clicking the element you want to change.
To edit your Brambl website.
Head to your orderlink website app
Press the “Edit website” link on your website (if you can’t see this option, contact your local studio and they will make it available to you).
This will then open your website with the Brambl editor.
Please note: while the Brambl website will load to visitors on mobile and tablet devices and will load on other browsers, you will need to use a desktop computer with a Firefox, Chrome or Safari browser to open the Brambl editor.
In the Brambl editor, double click some text, and you’ll see an Edit text toolbar option appear on the right hand side.
The text editing options allow you to change the font to a range of Google web fonts, which were chosen because they are free for your use and work on all major browsers. You can also change the font size, colour, and alignment.
The text editor has options for you to upload an image, add an icon, add a button or add a new text link.
Double click an image to change an image or edit the image size. We will also inform you if the image can be resized to make it smaller, meaning your website will load faster.
Some background images are part of the page design and are not editable with normal Brambl access. Contact your local studio if there’s an image you need to change but are unable to.
Double click an icon to change the icon, adjust it’s colour or adjust it’s size.
Double click a button and you can edit the link, size, colour, icon and spacing.
Double click a link and we will open a url popup that lets you choose your link text, url location, tooltip and other options. You can make your link open an email, download a file or scroll to a specific part of the page.
Editing other pages
By default the Brambl editor will load your homepage.
If you want to edit any other page, press the page dropdown at the top of your editor.
Saving your changes
Once you’ve finished making changes, you can either Save or Publish Changes.
Pressing the Save icon will save your changes in the editor, but will not make those changes live on your website. You can use this to save changes that are half complete and aren’t ready for public yet.
Press the Publish Changes button to publish all the recent changes in the editor onto your live website.
4.Creating regular content
Many Nettl websites require content to be added regularly, such as recent blog posts, directory listings or articles for priviledged users. This guide explains how to create regular content for WordPress and Brambl.
Please note: your own website is likely to have a special framework or specific requirements to keep adding content that will depend on your needs and the solution your studio has designed. Your local studio will explain if there’s anything needed for your website this guide doesn’t mention.
We recommend regularly updating your website as it keeps visitors engaged, informed about your recent activities and is also beneficial for search engine rankings. Regular content is beneficial for search engines because it adds fresh content, which search engines use to determine if your site is still active and useful to people, and because it adds unique content. The more unique content your website has, the more likely it is to have some relevance to what people are searching for. Without going into too much debth about search engine optimisation, if you provide several services and one of them isn’t mentioned at all on your website then search algorithms won’t associate your website to that service.
Your Nettl studio will create a framework for you to regular add content, which will normally be in the form of designing pages that update to get the most recent relevant content after you’ve created it. The pages will be designed to pull in either posts or some other content type. The pages will also be designed to look for specific post categories, tags or some other taxonomy. If you’re unsure what categories and tags to add, look at some pre-designed content and use that as your guide.
This guide will assume you are creating blog posts, but advise can be followed for creating specially designed articles, news, or directory listings. The main difference will be which menu you go to in the back office. When creating new content, you can either start from a blank sheet or start from a page template.
Starting from a blank post
In your WordPress back office, head to the Posts > Add New menu (or substitute this menu for what you need to add content for).
You will see a blank page.
Add your blog title and blog content in the page.
Add a category to group the blog in, and any tags you think will be useful search terms someone may want to use to find your content.
Add a featured image that highlights your content.
Preview changes and press Update when you’re happy.
Double check that the post is showing on your expected page, you may need to change the category or tag if it isn’t appearing.
Starting from a pre-designed template
Another option is to start from a template that a nettl studio has designed for you.
To do this, head to Posts > Add New
Press the Use page builder button
A new page builder section will appear.
Next press the Load Layout button.
Choose the layout that your Nettl studio has built for you
A default page will be created for you, enter each module and change the content from the default to the correct content for this new page.
WordPress will likely be used if your website requires ongoing content, but Brambl can also be used to create and manage several pages. If you will be adding pages regularly to Brambl, you will need to ask your local Nettl studio to upgrade your access level to allow advanced Brambl editing priviledges.
When you have advanced editing priviledges, your Brambl toolset will expand to allow you to:
Add & amend panels
Add & amend block
Please beware: with advanced priviledges you can radically alter the design, styles and every aspect of how the site looks. Contact your local studio if you make a mistake and we can revert the website to a previous time when it was last working as intended.
Creating, duplicating and deleting pages
Press the page icon at the top of your brambl editor and enter your new page name to create a new page.
This will create a new blank page for you to start from. You can also press the duplicate icon to copy an existing page and use that as a starting point.
If you created a page you no longer want to use, select the page in your page dropdown then press the trash can icon to delete the page. This will delete whatever page is currently active in your Brambl editor. You can use the undo icon to revert this if you accidently delete the wrong page.
To edit your menus, go to Settings > Menus.
In the “Elements” section you will see the menus your website uses.
Press Add link to add a new menu item, or Add dropdown to add a new dropdown menu.
Click on each item to expand them, allowing you to change the text displayed in the menu, the url it goes to, or use the trash can to delete the item.
Adding panels & blocks
A panelis a full-width bar within which blocksare placed. Blocksare then filled with pre-designed website content that can be changed to be relevant to your client.
In the Brambl editor, panelsare controlled and defined within purple lines while blocks are within green lines.
To add a panel in Brambl, head to Add > Panels.
Select your preferred panel and drag it onto the page.
When you hover over a panel, you’ll see options to customise it.
The first crosshair icon lets you move the position of the panel on your page. Hold it and drag your panel up or down the page.
The second copy icon lets you duplicate the panel. It will copy all the blocks and all the content, letting you customise again from a better starting place.
The third cog icon lets you configure the panel, more on this later.
The fourth x panel option deletes the panel, along with all the blocks and content it contains.
The #2 tells you what order the panel is. This order can be used as an anchor point in the text editor and menus.
Panel configuration options
Press the panel cog icon and a right sidebar will appear specifically for this panel.
You can change the background colour, and even add a transparency. You can also add a background image. The top layer image scrolls with the page while the bottom layer image is static.
Use dimensions to define your panel’s max height and amount of padding.
You can also set the block widths of each block on both the tablet or desktop. By changing the sliders you can choose how much of the device width each block should take up.
In the above example the 4 blocks within the panel will show in 4 columns for desktop, and in 2 rows of 2 columns for tablet.
There are also block specific options when you hover over them.
The first crosshairs icon lets you drag & drop your block within the panel, and even onto another panel.
The second magic wand icon lets you add custom animations, more on this later.
The third cog icon lets you adjust the padding or margin of your block to give it more or less whitespace.
You can also add a background colour or upload a background image
And you can choose to hide some blocks from desktops, mobiles or tablets to create content specific to the device of your users.
The fourth copy icon lets you duplicate all the block content and creates a new copy next to your original.
The fifth rubber icon strips out the block content, but leaves a blank space in case you want a gap between two of your Blocks.
The sixth x icon deletes your block and all the content inside it.
This guide will help you know how to administrate WooCommerce webshops. WooCommerce websites use the WordPress back-end, so check out this guide if you need to amend content and this guide if you need to add regular content. Your Nettl studio will help set up the webshop to meet your requirements, however you will need to know how to manage products, to update the website when product prices change or new products arrive, and how to manage orders, to notify customers when an order has been despatched or fulfilled.
WooCommerce products can be edited and administrated through the Products menu
Here you can view all your products, and either search for the product you want to adjust or use the filters to restrict the list to just show a specific category or product type.
Click a product and you’ll be able to change how it displays online. The first text box is where you place the product title. This shows on the product search pages and on the product individual page. The larger text area is where you can add a description of your product. Try to make your description helpful to customers and remember that more unique, relevant and helpful descriptions are good for both customers and search engines.
Scroll down and you’ll see various product settings, grouped into vertical tabs.
In the General tab, you can change the product price and set a sale price if you want to offer a short term promotional offer. You can use the Inventory tab to change the product stock. For more details on the product options available, check out WooCommerce’s guide on managing products.
If you look to the right hand side, there are other useful options for managing your product images, categories and publish settings.
Use the Featured image section to upload or choose the main image you want to associate with this product. The featured image shows on search pages and as the largest image on your product page. You can also add multiple Gallery images that show underneath the featured image to highlight different variations or features of your product.
WooCommerce categories and tags are important for helping your customers find the right products. Categories can be used to create dedicated search listing pages for just products in the same category, while tags are used to help customers search for similar items. These can be edited on your product page, you will find them on the right hand side between your featured image and gallery image.
Finally you’ll need to understand how to change your product visibility settings. In the right side Publish section, you can choose whether the product should be published and visibilty to everyone, or whether it should still only be in draft.
While a product is just a draft or pending review, customers will not be able to see it. Use these publish statuses while the product is being worked on or to set a publish date in the future if you want to only make products available after a new stock take comes in. To change the publish status, visibilty or publish time, simply press the blue “Edit” link and choose the option you need. Remember to press Update after you make any change, or your changes won’t have saved.
Different product types
There are different product types you can use with WooCommerce:
Simple products with have an image, text description and price. However, you can also use product add ons with simple products to provide an additional service or option for an additional cost of your choice.
Grouped products can be used to show a list of several different products you’ve already created. This can be used to help someone configure a bundle of similar products, for example you could create a simple downloadable product for 11 tracks in a music album and then have a grouped product for the album containing all tracks.
Variable products allow you to add several variations of a product, such as a dress in multiple different sizes or colour combinations. Variations differ from product add ons as variations can have their own stock levels and their own product images, while add ons can only carry information and a price. For more information on setting up variable products, check out WooCommerce’s advice on variations.
To manage orders head to the WooCommerce > Orders menu
Here you’ll see all your online orders, sorted by the most recent. The icon in a circle shows you quickly what the order status is. A green circle with “…” means the order is in progress and hasn’t been completed yet. The red circle with a “x” means the order was cancelled. The blue circle with a tick means the order is complete.
Click an order number to view the full order details.
The order detail will show you the customer’s name and delivery address, details of which items they ordered, and the price of the order. You can also see a history of when the order was paid for and last updated along the right hand side. Use the order Actions or Order status dropdown to update the order status to complete when it’s been shipped, or cancelled if you’ve had to refuse the order.
5.a.Epos Now till integration
Nettl’s bespoke till integration sends orders directly into EposNow’s till whenever an order is placed online.
Once an order is completed in Epos Now’s till, the order is then completed in WooCommerce.
Stock levels are synced between Epos Now & WooCommerce, ensuring the stock levels in a customer’s till and online are automatically adjusted and correct.
The integration also allows:
Products to be downloaded from Epos Now to WooCommerce;
Products to be uploaded from WooCommerce to Epos Now;
Stock levels to be manually downloaded from Epos Now to WooCommerce;
Customers to be downloaded from Epos Now to WooCommerce;
Click & Collect option using Delivery Slots.
How it works
Whenever an online order is placed, the details are sent to Epos Now allowing you to process the order immediately from your till.
Default Epos Now workflow
1) A customer places an order online
2) This shows as an ordered transaction in Epos Now
Both in the till, when you press Unhold/History.
And in the back office reports, via Reporting > Transactions > Ordered Transactions.
Please note: the order will be for your website’s linked till product.
The software looks for a matching product name or SKU to try to link one if there isn’t a link.
If it can’t find a matching product, a new product will be created in the till when an order is placed.
If click & collect is set up, you will see details of the time someone has chosen on their checkout for collecting the item within the Shipping: Local pickup line.
The product note will also show you the Order ID reference in WooCommerce.
3) The order is either completed in WooCommerce or Epos Now
a) If completed in WooCommerce
The transaction is updated in Epos Now to be a completed transaction
b) If completed in Epos Now
The payment can be taken in the till, and the order in WooCommerce will also be marked as complete. If this doesn’t happen it’s likely that the complete transaction web hook hasn’t been set up, your local studio will correct this for you.
Option to complete orders in WooCommerce seperately
You can also change the Epos Now plugin to not complete orders in WooCommerce once the payment has been accepted in the till.
To do this simply head to WooCommerce > Settings > Epos Now
Untick “Complete orders in till?”
The order will still be sent to Epos Now, but can be completed seperately in each area.
The till integration automatically keeps your stock in WooCommerce in sync with your Epos Now stock levels.
The website is updated everytime stock is changed in the Epos Now till.
When stock is changed in the Stock Adjustment section via Epos Now’s Management > Products > Advanced menu in their backoffice, the stock will be updated in the linked product in WooCommerce
When a transaction is processed and completed through the Epos Now till, the stock level will adjust in both Epos Now and WooCommerce. If a product stock level goes below 0 in Epos Now, the product will show as out of stock in WooCommerce, when more stock is added the product will then show as in stock automatically.
You can also manually update all stock by pressing the “Download stock levels from till” option in WooCommerce via the WooCommerce > Sync with Epos Now menu.
Does stock get managed for all Epos Now products?
The automated stock syncronisation will only work when stock has been entered into Epos Now via the Stock Adjustment section in the Management > Products > Advanced menu.
Please note: if the stock is blank, we cannot be notified of stock changes from new till transactions and WooCommerce will not update with the new stock.
When you download products from the till, we will also download the latest barcode stored against the linked product in Epos Now. You can search for products by entering or scanning your product’s barcode in WooCommerce’s Products > View Productspage.
Linking products and keeping them in sync
For the integration to work beautifully, your products in the website and in the till will need to be mapped together. Your Nettl studio will help you link these together when we get started working together, but this guide will help you understand how to keep products linked.
You can see who Epos Now product is linked to your WooCommerce product via Products > Edit in your website backoffice.
You’ll see the Epos Now product ID, and last barcode we downloaded. You can press the “View on EposNow” link to view the product in Epos Now, to check the stock and connection is correct.
We have 3 options for linking products together
Download products from till
Upload products from WooCommerce
Map products individually
Download products from till
If this is a new website with an existing Epos Now till, we will download your products
1) Head to WooCommerce > Sync Products With Epos Now
Choose “Download products from the till?”
Tick “Set newly imported products to pending review?”
All products from the till will be downloaded into the website. However, more admin will be required to make products designed for the till suitable for selling online. Products in the till have short names, no images, and no web-friendly descriptions.
Once the products are downloaded, the product names, descriptions and images will need updating either 1 by 1 or through a CSV import tool if there’s a large number of products that will need to be updated.05/product-1.jpg ).
Upload products from WooCommerce
If you have an existing WooCommerce website but an empty Epos Now till, we can bulk upload products into the Till. Please beware when doing this.
1) Head to WooCommerce > Sync Products With Epos Now
Choose “Upload products to the till?”
This will first look for matching product names or SKUs in the Epos Now till to make an automated link.
If it can’t find a match, it will create a new product in the Epos Now till.
Beware this will upload several products to the till and can affect your daily operations. Also beware that product names & descriptions are longer on the website than in the till. We have to cut short the names, so you may see products with odd names in the till. Epos Now bulk updating isn’t as easy as it is in WooCommerce. Also barcodes cannot be added onto the till in our upload. Epos Now have an uploader for bulk adding barcodes, but this is a paid for service, otherwise they can be added one by one in Epos Now.
Map products individually
If you already have a website and Epos Now till, this is the most difficult integration approach. We need to link the products individually. If you have hundreds of products, we can do a bulk update but this guide will explain how to link products without bulk updating.
1) Find your Epos Now product ID
Head to Management > Products in Epos Now, search for your product and press the Advanced button on the product you want to link.
You will see the Epos Now product ID at the end of the url, it’s the number “ProductID=xxxxx” in your url
Copy the product ID for the next step
2) Add the Epos Now product ID to WooCommerce
Head to Products menu in your WooCommerce back office, search for your product and edit it.
Scroll down to the Product data section.
Paste your product ID in the EposNow product ID space.
OR if your product is a variable product, head to the Variation tab.
Choose the product variation the product is for.
Add the EposNow product ID to the variation
The Epos Now till integration is fully compatible with different WooCommerce product types including simple products, product add ons, grouped products, composite products and product variations.
However you should be aware that the product data structure of variations is different between a website and a till.
Within a WooCommerce website, product variations are used to show different variants of a product, such as a dress in different sizes and colour combinations. Within Epos Now, each variant would be a unique product as that holds the stock information, whereas in WooCommerce the variations are bundled together within a holding variable product.
When Epos Now products are downloaded, all products including variants are downloaded as unique simple products and are not automatically bundled together as it takes a human with understanding to work out how the products should be bundled. Before these are ready for web, you may need to delete the downloaded products and create a variable product with all the correct Epos Now product IDs.
When WooCommerce variations are uploaded, we are more intelligent with the grouping.Variable products are created as a sub category instead of a normal product, and your variations become Epos Now products within this sub category. This means when you’re in the till, you can click into a category of dresses, see a grouping of a specific type of dress, click into that and then see all the variations within. We name each variation product after the product name followed by all the variations that apply to it.
Once you’re happy with the development domain, contact your local studio to schedule your website going live.
It is vital your studio knows when you are planning to go live, changes will need to be made to our hosting infrastructure that you are unable to make.
For the site to go live, we need to make some changes to the DNS settings and some hosting infrastructure changes.
The DNS changes can be complicated, so we strongly recommend providing your Nettl studio with details to your current domain registrar so they can make the changes for you and can avoid any unnecessary downtime when going live. The DNS changes required are outlined below:
Required DNS changes
We require 2 custom DNS settings:
1) CNAME pointing to your current development site.
2) A record pointing to an IP address for the non-www. Please note: the IP address will change on each site, your local studio will know the IP address required for your site.
Log into your domain registrar. The look, feel and terminology can be subtly different on every registrar. The following example is from 123-reg but includes common terminology or alternative names other registrars use.
A) Head to Manage your domain with Advanced DNS settings
B) You should have 2 entries:
– 1 of “@” or ” ” for the A (or apex) record for your site’s IP address; and
– 1 of either “www” or “*” for the CNAME, pointing at our system for your development domain.
Delete any previous A, AAAA, or CNAME records starting with “@”, ” “, “www”, or “*” Do not change anything else.
Your Nettl web design studio will also need to update your website domain and remove our “Just around the corner” page once the DNS changes are made, so always inform your local studio when putting a website live.
How long does it take for a website to go live?
Domain registrars, such as 123-reg, advise that it can take between 24 and 48 hours for DNS settings to fully finish updating (or propagating).
While it can take awhile to fully finish updating, it is normally faster than 24-48 hours. Your desktop will likely take the longest time to update because you will visit the website frequently and have the older website saved in your browser memory (or cache). However, you will probably see the latest version on your mobile within an hour of changes taking place. If you see the new website on your mobile, you can rest assured that the new site is set up correctly and will show on your desktop within the 48 hour period.
If a nameserver is changed or if the domain is being transferred, it will take longer for your website to go live.
What can go wrong?
DNS settings are used to ensure a domain is using the website that has been designed for it, but it can also be used for your emails.
The MX records are used for emails, so we will not amend these.
Some website building platforms use the A record or CNAME for emails as well, which is not best practice and causes problems when a new website platform is changed. If you’re using emails for the domain it is worth checking these still work afterwards, contact your local Nettl studio if you are no longer receiving emails.
If you provide us details of your domain registrar, we may tell you that we actually need access to a different registrar or system. This is because your previous web design studio may have changed the registrar’s default nameservers to that of another system to suit their own internal processes. Without getting too technical, it’s the nameserver that controls which DNS settings are used.
When you change a nameserver it will take a few hours for the change to take place, and you will loose all existing DNS settings. This makes it more likely that emails and third party services will go down. We prefer using the default registrar nameservers, but encourage leaving the nameservers where they are and not changing them in order to reduce complications going live.
If your domain is being held by an external web design agency, they may recommend transfering the domain to another registrar. Transfering domains can take upto a week to take place, and it’s likely your domain will be inactive with your website down during the transfer. As such, we prefer to simply edit the DNS changes and not transfer the domain to avoid downtime for your domain. If necessary, we can transfer the domain but we’d advise against it for your benefit.