What impact will updating the theme have on my experiences?

Easily transition your experiences to a new theme

When launching a new theme for your Shopify store, we recommend following these steps to guarantee that your experiences seamlessly integrate with the new theme.

• If you have already published the new theme, you can smoothly transition your live experiences to it by following these steps.

• If the new theme has not been published yet, you can implement these steps in advance on your live experiences. Once you switch to the new theme, you can then publish the changes seamlessly.
  • Make sure that Visually is installed on the new theme first. Click on Account > Themes > Select the new theme from the list > Click "Install Visually to Theme".
  • Explore this informative guide which offers a more in-depth look at creating or editing experiences on unpublished themes.
    
    

Start with your live experiences

Navigate to the 'Live' tab in the Visually dashboard to view all experiences currently active, whether running at 100% or through A/B tests.

These experiences should be updated first. Select an experience and click 'Edit'.

Adjust each experience accordingly

Step 1 - Switch to the new theme.

Navigate to the Theme section located above the preview window. If the currently selected theme differs from the active theme, you must switch the active theme to apply the changes to the live website seamlessly.

Step 2 - Update the experience's changes

When you switch themes, the 'selectors' of your website's original elements may change. If a change isn't visible in the preview, there are a few steps you can take to address it.

Start by checking each of the changes, to see whether or not they are applied properly to the new theme. Depending of the type of change, the method to update might vary:

• For visual widgets, simply click on the change. If the preview window does not automatically scroll to the widget, you may need to adjust the position of the element.
  • To do this, click on the ellipsis > choose 'Replace Position' > update the element's position on the page accordingly.
    
  • If you have experience with CSS, we recommend manually adjusting the widget's position using a reliable selector that fits well with your unique website design.

• For Fake Clicks, click on the 'play' icon to verify if the changes show up in the preview window. 
  If not, you may need to record the Fake Click again.

• For Code Blocks, such as a Custom Component, CSS, or JavaScript.

  • Update the selectors if they have changed.

  • You might need to manually remove the element(s) that need(s) to be hidden.
  • If you are not familiar with front-end technologies, we recommend avoiding these actions to prevent any potential errors.

Step 3 - QA, save, and publish

• We highly recommend conducting a quality assurance (QA) session to ensure that the changes are correctly implemented on the intended devices, even if the experience looks good on the editor.
  • Even if your new theme is not yet published, the preview feature will still show how your experience looks on the selected theme.
  • Feel free to explore our detailed guide on performing QAs using our Preview feature.
• After completing the QA process, make sure to click on 'Save' and then 'Publish' to finalize your changes. And there you have it!