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.
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.
If you close the browser window and haven't saved your changes, they will be lost and you'll need to start again.
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.
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.