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

To execute Testing and Rollout campaigns, Wingify’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:

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

By default, when making changes via the editor, Wingify uses a unique CSS selector 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, Wingify 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, Wingify gives you control over how the CSS selector paths ofelements 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.

For example, if the Add to cart button is present both at the top and bottom of your product page, and you wish to apply changes on both, you can choose the method that uses their common attributes to apply the changes on them. In general, this helps in reducing the need to perform repeated changes on individual elements.

Use the Selector Path Options in Wingify

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

Procedure

1. Go to the Wingify 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 the drop-down arrow next to the element tag and click on the pencil icon.
6. All the available selector path options for the selected element appear.

• Use default method: This is the default method used while making the edits using the visual editor. In this method, Wingify 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, Wingify 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 Wingify 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”.

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.

Info: If you wish to remove a particular modification corresponding to an element, click on the ellipsis icon (⋮) corresponding to the specific modification and choose Delete.