This article will guide you through setting up Gelato's Personalization Studio for your Shopify themes. It covers enabling live product previews, strategically hiding elements, and seamlessly integrating an edit button on your product and cart pages, even if your theme isn't natively supported.
Show Live Product Previews
Imagine your customers seeing their personalized products come to life right before their eyes! Here's how to make it happen:
Inspect to Locate
Open your web browser's developer tools (right-click on the webpage and select "Inspect" or "Inspect Element").
Use the element picker tool (usually an arrow icon) to select the exact area on your product page where you'd like the live preview to appear.
Copy the selector name. This is the code that identifies the selected area (e.g., '.product-media').
Integrate the Selector
Go to your Shopify admin panel and navigate to the Personalization Studio app.
Find the app embed settings.
Paste the copied selector name into the designated field for live previews.
Save your settings.
Experience the Magic
Refresh your product page. Voila! You should now see the live previews in action.
Tip: For precise targeting, avoid generic selectors like 'col-2', 'col-4', or 'container'. Opt for specific selectors.
Seamlessly Hide Elements
Maintain a clean and focused product page by hiding unnecessary elements. Here's how:
Inspect to Select
Open your browser's developer tools (right-click + inspect).
Use the element picker to pinpoint the element you want to hide.
Copy the selector name for that specific element.
Configure the Selector
Navigate to the app embed settings within Personalization Studio.
Locate the designated section for hiding elements.
Paste the copied selector name into the provided field.
Save your settings.
Witness the Disappearance
Refresh your page, and the selected element will vanish.
Enhance Your Cart Page with Personalized Previews
Elevate the shopping experience by showcasing personalized product previews directly on the cart page. Follow these steps:
Inspect to Identify
Open your browser's developer tools and navigate to your cart page.
Use the element picker to select the area where you want the personalized preview to appear. This is usually within the cart item's image container.
Copy the selector name, paying close attention to target the image element itself for optimal preview display.
Set Up the Selector
Go to the app embed settings in Personalization Studio.
Paste the copied selector name into the designated field for cart page previews.
Save your settings.
Preview on the Cart
Refresh your cart page. You should now see the personalized product previews within the cart items, providing a visual reminder of their customized choices.
Tip: For accurate personalized previews, target the cart image specifically, not the entire div. We recommend targeting the image tag within the cart-item div, for example, ".cart-item img".
Empower Editing with a Cart Page Edit Button
Grant your customers the freedom to make changes even after adding items to their cart. This step-by-step guide will help you add an 'Edit' button to your cart page:
Inspect and Locate
Open your browser's developer tools and navigate to the cart page.
Use the element picker to select the precise location where you want the 'Edit' button to appear for each cart item.
Copy the selector name. This might involve using pseudo-selectors like :nth-child() to target the correct element within a list of cart items.
Integrate the Selector
In your Personalization Studio app settings, find the section dedicated to the cart page edit button.
Paste the copied selector name into the designated field.
Save your settings.
Refresh and Review
Refresh your cart page. You should now see the 'Edit' button positioned perfectly, allowing customers to modify their personalized products without leaving the cart.
Mastering Selectors for Precise Targeting
Think of selectors as your GPS coordinates in the world of web development. Here's how to use them effectively:
Understanding "div:nth-child()": This combination is key to pinpointing specific elements within a group. The ':nth-child()' selector helps you target individual child elements nested within a parent element.
Identify the Parent Element: Start by locating the parent element that acts as a container for the child elements you want to target. For example, a div with the class 'cart-item' might hold multiple child elements like image, title, and price.
Count the Child Elements: Once you've identified the parent, count the child elements within it. The number you use within the ':nth-child()' selector corresponds to the position of the child element you want to target. For instance, ':nth-child(2)' selects the second child element within the specified parent.
For a list of themes natively supported by Personalization Studio, click here.