This article provides solutions for common issues encountered while using the Personalization Studio. It covers topics such as troubleshooting live preview problems, addressing missing "Personalize" buttons, resolving errors related to adding products to the cart, and understanding supported Shopify themes. The guide offers step-by-step instructions and insights into known limitations.
Troubleshooting Guide for Personalization Studio
Theme Compatibility with Personalization Studio
To ensure a seamless experience with the Personalization Studio, it's crucial to use a compatible Shopify theme. Here's a breakdown of theme compatibility:
Fully Supported Themes:
Craft, Dawn, Debut, Editorial, Minimal, Motion, Prestige, Simple, Spark, Streamline, Studio, Symmetry
Partially Supported Themes:
These themes generally support previews but may experience minor distortions or inconsistent behavior: Beyond, Brooklyn, Envy, Impulse, Parallax, Supply
Unsupported Themes:
Loft, Warehouse
Troubleshooting Live Preview Issues
If you're experiencing issues with the live preview functionality, follow these steps:
Inspecting for the Correct Selector
Open your web browser's developer tools. You can do this by right-clicking on the webpage and selecting "Inspect" or "Inspect Element."
Utilize the element picker tool (usually represented by an arrow icon) to highlight the specific area on your product page where the live preview should be displayed.
Copy the selector name. This is the code that identifies the selected area (e.g.,
.product-media).
Integrating the Selector into Personalization Studio
Access your Shopify admin panel and navigate to the Personalization Studio app.
Locate the app embed settings.
Paste the copied selector name into the designated field for live previews.
Save the changes you made.
If you can't find .product-media or similar selectors, try inspecting specific areas like .product-gallery, .product-image-container, or .product-page__media. The exact location might vary depending on your theme's structure.
Addressing "Personalize" Button Issues
If the "Personalize" button is missing or not responding as expected, explore these solutions:
Adding the btn-addtocart CSS Class Selector
Make sure that your "Add to Cart" button includes the btn-addtocart class. You can find instructions on how to add this class by consulting your Shopify theme's documentation or reaching out to your theme developer.
Verifying the Gelato Customization Tag
Inspect the HTML of your product description to confirm the presence of the following tag: <div data-gelato-customization="1"></div>. If this tag is missing, reinsert it into your product description's HTML to restore the functionality.
Resolving "Cart Is Empty" Errors
If you encounter a "Your cart is empty" message after clicking "Add to Cart," ensure you've followed these steps:
Log in to your Shopify admin panel.
Go to "Online Store" under the sales channels section and select "Themes."
Locate your active theme and click on "Customize."
In the left-hand menu, open the "App Embeds" tab.
Under "App Embeds," enable the Gelato Personalizer.
Save the changes you've made.
To make the "Personalize" tab visible, update each of your products. Open each product in your Shopify admin panel and click "Save" to republish it. For new products, real-time updates will be enabled automatically.
FAQs
Why is the live preview working only on one product picture?
This is a known limitation. Currently, the live preview supports only one image at a time. However, feedback has been shared with the development team for potential improvements in the future.
What if the "Personalize" button vanishes after updating my theme?
If the "Personalize" button disappears after a theme update, double-check the btn-addtocart class and the Gelato customization tag in your HTML. Updating these elements often helps resolve the issue.