You can preview changes while you're working on your theme. You can preview branding changes
for specific page templates and as a specific role.
Note: If you are on Guide Professional,
you can also preview code edits by template or role.
This article contains the following sections:
Previewing your theme while updating branding
You can preview branding changes for specific page templates and as a specific role.
To preview your theme while editing theme branding
- In Guide, click the Customize design icon (
) in the sidebar. - Click Customize on the theme you want to edit.
- You can make changes to colors, fonts, brand, or images.
The home page template automatically updates when you make changes.
- Do the following to preview other pages or roles:
- Click Templates, then select another template you'd like to preview.
- Click Preview role, then select another role you'd like to preview.
Note: The preview shows Community, even if you have disabled Community, so you can see what Community would look like if it was enabled. You cannot preview changes for your template as a user segment. However, you can assume an end-user's identity and preview the changes to the theme.
Previewing your theme while editing theme code
You can preview code edits by template or role, (this requires Guide Professional or Enterprise).
To preview your theme while you are editing code
- In Guide, click the Customize design icon () in the sidebar.
- On
the theme you want to
edit,
click Customize to open it.Note: If you want to edit your live theme, it's a good idea to copy the theme first and edit that version. You will need to save changes before you can preview them, so it's safer to work on a copy, then make the copied theme live when you're ready.
- Click
Edit
code.
- Make a code change, then click Save to save your change. You must save your changes before you can preview them.Note: If you are editing a live them, you have to click Publish and make your changes live before you can preview. If you don't want to do that, copy the theme and edit that version.
- In the code editor, click
Preview.
The preview opens in a new tab.
- Navigate in the preview as you normally would to see different pages in your Help Center.
- Do one of the following to preview a specific page
template
or
role:
- Click Templates, then select another template you'd like to preview.
- Click Preview role, then select another role you'd like to preview.
- Continue to make and save code changes, then view them in the preview tab.
As you save changes, the preview should refresh and show your updates.
- Click Close Preview at the top left of the preview when you are finished.
4 Comments
What's the point in previewing the different roles as there isn't any difference in the pages nor is there an option to change the view by roles?
This feature can normally be utilized to check how it will appear on certain users. For example, how your end users will see it vs your agents.
Is there a specific url that allows you to jump between the preview and existing view? right now enabling preview takes quite a few steps. it would be helpful if you could tick a box in the live Guide agent header that goes between live and preview.
for instance, if I make css changes, pull up the preview I will generally want to flip quickly between the current version and the changes. you either need to open windows side by side, or you load the preview, close the preview, drill down through the settings to customize>edit code to re-enable.
having quick access in the header, perhaps next to the close preview button, would make comparing changes much faster and less likely to incur stray clicks in the customize menu.
Hello mfg, thank you for your question!
Currently, this is not an option, I'm afraid. Once you have opened the customization options, if you open the Help Centre it will open in preview mode and you should have an option to quickly close it:
But unfortunately there is not an option to quickly change back between the two whenever you wish. At this point the best recommendation would be, as you mentioned, to have two separate browser windows, to check the changes whenever they are made.
But this is a good suggestion to have. I can recommend that you create a feedback Post in our Community requesting this feature here.
You can explain your use case and the more traction this post gets, the more chances there are for our Development team to consider implementing this in the future.
I hope this was helpful!
Please sign in to leave a comment.