Working with Element's Selector Paths While Making Changes Using VWO's Visual Editor

To execute Testing and Rollout campaigns, VWO’s visual editor uses CSS selector paths to identify elements and apply the changes to them. For example, in an A/B testing campaign with an alternate headline on your homepage:

• VWO will save the headline’s CSS selector path and the corresponding change,
• A visitor visits the homepage where the test is running,
• VWO identifies the headline using the selector path and then applies the change to it.
  

By default, while making changes via the editor, VWO picks up the unique CSS selector path to ensure that elements are selected uniquely on the page. Thus, even if you have multiple instances (for example, two sign-up CTAs, one present in the first fold and another sitting in the third fold) of the same element on the page, VWO will apply changes only to the one you have modified. And if the exact changes are to be done on other similar elements, each element needs to be modified individually.

Scenarios Where the Default Method of Element Selection May Not Work

1. You want to make the changes to similar elements in one go. Say, on a listing page, you want to change the color of all the add-to-cart CTAs just by modifying one of the CTAs.
   
   
2. The site has more reliable attributes than classes/ids, and you want to instruct the editor to use them instead. For example, the site adds an attribute called data-modal that is more accurate and unlikely to change.
   

To cater to this, VWO gives you control over how the CSS selector paths of elements should be picked to apply modifications to them. 

With this capability, you can configure your campaign modifications at a more granular level. Now, for every element you apply changes to, you can choose the method to identify it. This will override the workspace and campaign level settings, giving you a high degree of control over what selector paths are to be used, especially for any element.

Using the Selector Path Options in VWO

To view the available selector path options for an element on which some operation has been applied, follow this:

Procedure

1. Go to the VWO Editor.
2. Click on the View Details option corresponding to the variation you want to work with.
3. On clicking View Details, a panel to the right appears.
4. Enable the Group by element option. This gives you an intuitive way of looking at the changes made to a particular element.
5. To modify the selector path of an element, click on the arrow button present next to the element, and choose Edit.
6. All the available selector path options for the selected element appear.
   
   NOTE: These options differ from element to element.
   
   
   • Use default method: This is the default method used while making the edits using the visual editor. In this method, VWO picks the elements using the unique CSS path.
     
     
   • Use Classes/Custom attributes: Use this when you modify a set of similar elements sharing some common attributes. For example, changing the color of all the add-to-cart CTAs on a listing page where each CTA has a common class attached to it.
     
     In this example, we want to change the text for the two CTAs called Request a Demo to Schedule a Demo, and these two CTAs have a common custom attribute called data-modal that can be used to apply changes on both CTAs in one go:
     
     We recommend using this when you wish to select any element’s existing attributes like ID/Class or any other custom attribute. Here, VWO automatically detects the list of available attributes based on which the selector path is generated automatically.
     
     
   • Use Tag Name: Use this when you want to apply the changes to similar tags like a paragraph, buttons, span, etc. For example, you may want to change the font size of all the paragraph tags in one go.
     
     
   • Enter path manually: Use this method when you prefer to bypass all the methods used by VWO and want to supply the CSS path manually. For example, to apply the changes to all the button tags under the navbar on vwo.com, we have used the CSS path as “nav>ul>li>button”.
     
     NOTE: To use this option, you must have some prior knowledge of CSS selector paths.

Want to Copy the Selector Path?

If you want to copy the selector path, select the Copy option.

Want to Remove Element Modifications?

If you want to remove all the modifications you’ve made to an element, click on the ellipsis icon (⋮) corresponding to the element and choose the Remove all modifications option.