(V5) How does the visual editor work? Print

Ozcart websites include a built-in theme editor, called the Live Visual Theme Editor or, for short, Live Visual Editor, that let you restyle your website to suit the look and feel you want to achieve. We've created a video to show you the live editor in action, changing the fonts and colours on our demo shop. It gives you an idea of the types of things that you can do with it and how it works:

To view it in YouTube: https://youtu.be/dMis7LTpwwg

Or to view it here:

Important Tips:

1. Make sure to save if you're satisfied with your changes. Clicking 'Exit' or refreshing the page, without saving, does not save changes. A prompt appears, either way, if any code is entered in CSS Editor.
   
   
2. Click the CSS Editor button to view your CSS code, if you have any. You can edit the code directly in there and, after a second, your changes should be visible. Don't forget to save when done.
   
   
3. If you use the CSS Editor and you remove or add code and do not see your changes, save your work and refresh the page. We have improved this in recent 2026+ Ozcart updates and changes should now show up reliably. However, this may still happen if you lose your Internet connection.
   
   
4. You can change pages to either view and edit those pages or to target them with "This Page Only" edits. To do so, first click on the link in the live visual editor and a bar with a link will appear in the top left. It has a text of "Click here to navigate to: https://example.com". Click on that and you will switch to that page so that you can view and work on that page.
   
   
5. You can make your styling edits only apply to the page you're on by clicking the 'This Page Only' button. Important: You won't see the CSS code in the CSS Editor if you switch back to 'All Pages'. You must navigate to that page again and click the 'This Page Only' button to view your CSS code in the CSS Editor. Therefore, we suggest noting it down somewhere that you have edited that certain page as it's easy to forget which page was edited. However, we have then added a dropdown menu next to This Page Only that tracks where you added CSS code.
   
   
6. You can choose between editing the layout for desktop computers, tablets, and smartphones by clicking on the appropriate button in the top right next to 'View'.
   
   
7. When you have clicked on an element, or have added code that you do not want to use, and you don't wish to save your changes, to discard all current changes, you can simply refresh the page (which is the quickest way), or click the 'Exit' button and then click again on the button to activate the visual editor.
   
   
8. When you click on an element, you will see a bar above with the word Menu. What is on the right is the class(es) that you'll be editing. If you click on menu, you'll get a pop-up that appears below menu, allowing you to select other selectors and options such as ':hover', ':focus', 'Parent element', 'Select it only'. E.g., if you want to change the hover colour, you would select hover. Important: if clicking on Menu doesn't let the pop-up appear, then first click on that element, then click on Menu. It is better to always click the element first, and then the Menu button.
   
   
9. When you want to select text that already has a hover colour, the one you'll be editing is the hover colour instead of the normal colour. To select the non-hover text, first click on that text, then click on Menu above it. A pop-up appears. Click "Select it only". You can now edit the non-hover text.
   
   
10. Style Editor has 2 buttons in each section, Clear Custom CSS and Restored Saved. Clear Custom CSS clears the edits you've done for that section and restores them to their original values. If you previously saved your edits, and then go back to the same element to edit the same section, and you edit it, clicking Restore Saved restores your code to the last saved CSS code(s). This lets you quickly test different values without reverting to default. To fully restore the original value(s), click Clear Custom CSS.
    
    
11. If you see an asterisk on the All Pages or This Page Only tab, it indicates that custom CSS was added there. Asterisk will be red when new CSS is entered. Save to change its colour to the normal text colour.