Customising themes

How to customise your theme

To customise a theme, select Theme Settings for the theme you want to customise:

This will open the theme editor where you can configure a variety of settings to do with your theme. Through the live preview editor, you'll be able to see any changes you make to your theme as you make them:

Simply save your changes to have the changes be made live on your website.

Customisations you can make

How and what customisations you are able to make to your theme will depend on what version theme you are using, but all themes allow you to customise the colours, images and menu links for your website.

Our new version 5 themes contain drag-and-drop functionality as well as a host of new features. Our first version 5 theme, Vivify, was released on 20th June 2022. If you installed the Vivify theme prior to this date, you will be using a version 4 theme. For help customising version 5 themes, please read through our Version 5 theme guidance.

For help customising version 4 themes, please read through our Version 4 theme guidance.

If you want to upgrade to a more recent theme version, please be aware that any custom coding work, app installation coding and any customisations you have made to your current theme, won’t transfer to the new theme.

Text snippets

Text snippets are small pieces of text that are placed throughout your theme and which you can customise to your own requirements.

When customising your theme, any text snippet that you can change is labelled to make it clear where it is located within your theme.

To change the content of the text snippet, simply type the new text into the field. As you type, if the theme preview is on the corresponding page where the snippet is located, the preview will update with the new content.

---

Types of text snippets

There are four different types of text snippets:

Normal snippet

A normal snippet field will display as just the field with no options for adjusting text settings:

You cannot edit text aspects like size and weight for these fields because the text controlled by these fields is fixed in the theme.

Rich Text snippet

Rich text snippet fields allow you to change the size of the text, make the text bold, underlined or italicised and insert links:

The text in rich text snippet fields cannot be customised in any other ways.

Rich Text with Extra Buttons snippet

Rich text with extra buttons snippet fields allow you to change everything you can in a rich text snippet field, as well as change the colour and alignment of the text and utilise paragraph formatting:

Text Area snippet

The text area snippet field is available in the 'Custom HTML' section and can be used to add a text field to your website where you can use HTML to style it:

Link lists

Link lists are used to display the menus on your theme. The content of each link list can be controlled by you through your theme settings. The exact location of and options for link lists will depend on the theme you are using.

When your theme is first installed, your website’s link lists are pre-populated for you.

Each link list is contained within its own section in the customisation areas for link lists. Each section displays a ‘preview’ of the links that are contained within that list:

---

Adding/changing links

To change and customise the links contained within a list, select edit menu items. A new section will then open:

Here some link lists will have a 'Menu Title' field, which controls what is displayed above the links where the link list appears in your theme. Not all link lists will display a title, and for those lists this field is not available for you to customise.

To add a new link select Add menu item. Another sidebar will then open:

Enter the name that you want to be displayed to users for the link and add where you want the link to direct to. Use the drop-down menu to select one of the pages of your website. If the page you are looking for is not listed, select Custom. Then in the 'Page' field enter the URL for the page.

If you are linking to a page within your website, you should not enter the full URL of the link. You only need to enter the specific path (anything that comes after the domain name in the URL) for the page with a / at the beginning. For example, if you wanted to link to your blog you would enter /blog. If you are linking to a page outside of your website, you should enter the full URL.

When you close the sidebar (by clicking the 'x' icon at the top of the sidebar) your changes will automatically be applied.

Existing links are displayed in the table. You can change where the link appears in the list by using the compass icon to drag and drop the link to a different spot. To delete a link select the delete icon. If you want to change the contents of a link, click on the link to open the sidebar.

---

Selecting a different link list

To display a different link list, open the drop-down list under 'Select a new link list for this menu', and select a new link list from the menu:

New link lists can be created through the admin system by selecting Website > View Link Lists from the menu. You can follow the guidance here about how to create a new link list.

---

Specific link lists explanations

Category Menu Additional Items

The only menu which is not controlled by a link list is your website’s category menu, which is automatically populated with the categories you have created on your website. However, using the 'Category Menu Additional Items' list you can add additional menu items to your category menu if you want to. You can use one of the pre-populated link lists or you can continue to add your own to the ‘Category menu’ list. You won’t be able to remove specific categories from your category menu. If you want to remove a category you will need to either delete it or make it inactive.

Responsive Menu

Use this link list to add links to the pop-up menu that is used on smaller screen sizes.

Advanced customisations

If you want to make advanced customisations to your theme, you have full access to your theme’s files, CSS and javascript. To edit your theme’s files, select to open the page editor:

For a complete explanation of the page editor, the theme files and how to edit your files using Twig, please click here.

ShopWired uses a templating language called 'Twig' to render dynamic content from your online store's data onto your website. For example, each product on your website does not have its own file in your theme. Instead there is one file for products, called product.twig which determines the layout and style of the product page. Within that file we use 'variables' such as product.title to output content about the product. Twig and the objects and variables in use on ShopWired are documented here.