Using Script Variable Feature for E-commerce Widget in Visiopt System

Using Script Variable Feature for E-commerce Widget in Visiopt System:

Overview

This Standard Operating Procedure (SOP) guides you through the process of using the script variable feature to test an E-commerce thumbnail widget in the Visiopt system. This feature allows you to make dynamic changes to your widgets, ensuring they function correctly across different scenarios.

Step-by-Step Instructions

Step 1: Initial Setup

1. Disclaimer (0:16)

·   Understand that every script is different. Your script may need some editing to work correctly.

·   For assistance, reach out to Visiopt support.

Step 2: Select the Parent Element

1. Select the Entire Widget (0:28)

·   Choose the parent element to select the entire widget at once.

·   A dotted line will appear around the selected area. Click it.

2. Name the Variable (0:28)

·   Select the variable and name it, e.g., "widget."

·   Save your selection.

Step 3: Create Versions

1. Create Versions (0:45)

·   Click the plus button to create different versions.

·   Name each version as needed.

2. Switch to HTML View (0:54)

·   Click to switch to the HTML view.

·   Make changes to images or videos in the widget code.

Step 4: Edit the Widget Code

1. Identify Code Sections (1:00)

·   The widget code is split into two sections: thumbnails and larger images.

·   Identify both sections for changes.

2. Replace Images (1:18)

·   At the top of the code, locate the preview images.

·   Highlight and replace Preview 1 with the new image.

·   Continue replacing Thumbnail 1, Thumbnail 2, and Thumbnail 3.

3. Update Div Elements (1:37)

·   Scroll down to find three div elements:

·   Div 1 (image)

·   Div 2 (embed code of a video)

·   Div 3 (content)

·   Highlight and paste the new image in Div 1.

Step 5: Add the Script

1. Paste the Script (1:52)

·   Click on "Variable Scripts."

·   Paste your script into the provided field.

·   Remove the script tags as shown.

Step 6: Finalize and Save

1. Prepare Variables and Scripts in Advance (2:08)

·   Always prepare all variables and scripts before starting the test.

2. Save Changes (2:20)

·   Click "Save."

·   Verify the changes have been applied.

Step 7: Test and Preview

1. Name and Continue (2:29)

·   Name the test and click "Continue."

2. Preview the Test (2:34)

·   Check the different versions inside the Preview tab.

·   To see the script working, visit the page live.

Conclusion

By following these steps, users can effectively use the script variable feature to test E-commerce widgets within the Visiopt system. This method ensures dynamic changes to widgets are properly tested and implemented.

Additional short videos will be posted to demonstrate other ways to use the variable scripts option.