How to set up preview mode of personalizer for the storefront

 

Step 1: Copy the CSS Selector of Your Theme's Product Preview

• Right click on your product image > Inspect
• Click "Select an element in the page to inspect it"

• Scroll up to find the biggest parent containing the whole variants and click it (The personalization plugin will be added after this parent)

 

• Right click on that line > Copy > Copy selector

 

• You've successfully copied the selector of your product personalization.

Info: If you have trouble finding the selector, contact us for help.

 

Step 2: Add Yoycol's script to your theme

 

• Go to your Yoycol admin > Settings > Store Setting > Personalization setting of your store.
• Input the selector's value with the selector you copied in Step 1:

 

• Save the changes. Done.
• Go to storefront to check if the personalization options work.

If it still doesn’t work, contact us for help.