Introduction
Before publishing your Media Gallery live, it's recommended to test it on your store to ensure it looks and functions exactly as intended. This guide will walk you through testing your gallery on a real product page using Shopify's theme preview feature.
Prerequisites
Your Media Gallery must be saved and published (as long as the block is not added to live theme it won't show on your site)
Access to your Shopify admin panel
The Tolstoy app installed on your Shopify store
🔨 Step 1: Create a Draft Theme
1. Log in to your Shopify admin panel
2. Navigate to Online Store > Themes
3. Find your current live theme
4. Click the "..." (three dots) button next to your live theme
5. Select "Duplicate" from the dropdown menu
6. Shopify will create a copy of your theme with a name like "Copy of [Your Theme Name]"
7. You can rename this theme by clicking the "..." button and selecting "Rename"
🎨 Step 2: Add the Tolstoy Media Gallery Block
1. On your duplicated theme, click "Customize"
2. Navigate to a product page using the page selector at the top
3. In the left sidebar, pick any section (the gallery is positioned by it's own settings no matter what section the code is inserted to)
4. Click "Add block" or the "+" button
5. Search for "Tolstoy Media Gallery" in the available blocks
6. Select and add the Tolstoy Media Gallery block
7. Position the block where you want it to appear on your product pages
8. Click "Save" in the top right corner
👀 Step 3: Preview Your Media Gallery
1. While still in the theme customizer, click "Preview" in the bottom bar
2. This will open your store in preview mode with the draft theme
3. Navigate to different product pages to see how your Media Gallery appears.
4. Test the gallery functionality:
Click on media items
Check that videos play correctly
Verify the layout matches your configuration
Test on mobile view using the device selector
📝 Important Notes:
Changes made in the Tolstoy app will reflect in both your draft and live themes (if they have the block)
The draft theme is only for testing placement and appearance
Always test on multiple devices (desktop, tablet, mobile) before going live
If you have multiple product types, test the gallery on different product pages
🛠️Troubleshooting:
Gallery not appearing in preview:
Ensure the Media Gallery is saved in the Tolstoy app
Check that the block is properly added and positioned in the theme customizer
Clear your browser cache and refresh the preview
Gallery looks different than expected:
Verify your gallery configuration in the Tolstoy app
Check if your theme has custom CSS that might affect the gallery
Ensure you're viewing the correct products with assigned media