Menu Close

Get Support From ShopWired Close

All Systems Are Operational

Subscribe To Updates
Prefer To Live Chat? Chat directly with ShopWired support Available 9.30am to 5.30pm Monday to Friday
11.00am to 5.00pm Saturday
Quickest response time

Send A Message
Response within 24 hours

Menu Close

Menu

An introduction to Version 4 themes

Version 4 themes are the latest theme versions on ShopWired, released on 27th September 2020. Version 4 themes have been upgraded to use ShopWired's new theme editor which allows you to customise your theme's colours, settings, images and other branding whilst viewing a live preview of your changes.

From 27th September 2020, all ShopWired themes available for installation are Version 4 themes.

You can find out more about the features available on Version 4 themes here.

Each version 4 theme has it's own help guide which you can find here.


The live preview editor

ShopWired's new live preview editor allows you to customise your theme whilst viewing a live preview of the changes.


Navigating the preview

You can use the preview like a normal website, so you can navigate around it like you can a normal website (clicking on menu items, searching for products etc.).

The preview also has a navigation drop down menu you can use to jump to particular pages.

When selecting the 'category' or 'product' options from the drop down, this will select a category/product from your website (usually the one added to your account first). You can navigate to a specific category or product by navigating the website in the normal way.


Previewing different devices

When the preview loads we'll show what it looks like on a desktop/laptop computer. You can use the device icons to switch to different screen widths and see how the preview looks on tablet devices and smart phones.

All devices are different screen widths and will therefore display with slight differences on any particular device. We use an emulated screen width of 375px for the smartphone view and 768px for the tablet view.


Edit file link

When using the live preview you will have access to an 'edit file' button (as shown on the screenshot below).

Clicking this button, where available, will open the corresponding twig file for the page (in a new window) inside the page editor. You can then make HTML/Twig edits as you require.


Saving changes

Changes are not saved automatically as you apply them so you'll need to click the 'save changes' button in the top right corner in order for the changes to be applied.

Please note!

If you close the browser window and haven't saved your changes, they will be lost and you'll need to start again.


Undoing actions

When making customisations, you can use the undo and redo buttons to go back and reverse changes you have made.

Only some actions can be undone, so you may not always be able to use these undo/redo buttons (changes to link lists, images, your logo/favicon can't be undone).

The undo/redo history is not stored permanently and is only available for your current session. Once you close the browser window you'll no longer be able to undo or redo changes.


Customising settings

All of the settings that can be customised on the theme are displayed in the left hand section.

Settings are grouped into three types; style editor, features and settings.

You can click into an individual setting group to change the settings and make your customisations.

Check the help guides through this help section for more details on how the individual settings work.