Implementing Different Variable Versions for Desktop and Mobile in Visiopt

Implementing Different Variable Versions for Desktop and Mobile in Visiopt:

Overview

This Standard Operating Procedure (SOP) outlines how to implement and manage different variable versions for desktop and mobile views in the Visiopt system. This guide will walk through the steps to change background images and manage hidden images that appear differently on desktop and mobile devices.

Step-by-Step Instructions

Step 1: Selecting the Header as a Variable

1. Initial Selection (0:06)

·   Select the header as a variable to begin the customization process.

Step 2: Changing the Background Image

1. Access Background Settings (0:11)

·   Navigate to the background color settings. This tool allows you to change the background color or image.

2. Upload New Background Image (0:29)

·   Upload your desired image to the server.

·   Copy the URL of the uploaded image and paste it into the background image field.

·   Click "Save" to apply the changes.

3. Preview Changes (0:39)

·   Use the Preview function to confirm that the new background image appears as expected.

Step 3: Configuring Mobile View

1. Identify Hidden Images (0:53)

·   Recognize that there are two hidden images in the header for the desktop view, which will appear when viewed on mobile.

2. Preview Mobile View (0:59)

·   Switch to mobile view to see how the hidden images are displayed.

Step 4: Replacing Hidden Images for Mobile

1. Navigate to Test Setup (1:12)

·   Go back to the test setup to make changes.

·   Change the background for desktop and then proceed to mobile settings.

2. Replace First Hidden Image (1:32)

·   Click the plus icon and select "Image One" as a variable.

·   Click on the image icon, upload the new image, and hit "Save."

3. Verify Changes (1:54)

·   Check the mobile control to ensure the new image appears.

4. Replace Second Hidden Image (2:09)

·   Repeat the process for the second hidden image.

·   Select "Image Two" as a variable, upload the new image, and click "Save."

Step 5: Final Verification

1. Check Desktop View (2:26)

·   Confirm that the background image reflects the intended changes.

2. Check Mobile View (2:26)

·   Ensure both new images appear correctly in the mobile view.

Conclusion

By following these steps, users can effectively implement different variable versions for desktop and mobile views within the Visiopt system. This method allows for dynamic content customization, improving user experience across various devices.