--- title: Troubleshoot design and rendering issues shortDescription: Fix broken mockup images, stuck rendering, missing previews, and WebGL errors in the Fourthwall product designer with these steps. articleType: Troubleshooting primaryTopic: design-rendering-issues categories: - Products - Troubleshooting tags: - product-creation - troubleshooting - rendering - webgl - hardware-acceleration - product-designer - storefront-display - shop-status - browser-settings - mockup-issues tasks: - Fix grey or blank product images on the live storefront - Fix broken or missing product mockup images - Confirm shop status is set to Live - Fix stuck rendering on a product design - Enable WebGL in your browser - Troubleshoot file upload failures - Resolve overlapping or duplicated previews - Fix designs that won't save terms: - grey thumbnails on storefront - blank product images live shop - product preview not loading - broken mockup image - mockup not displaying - shop status live coming soon - webgl error - design not saving - upload failed - hardware acceleration - blurry product preview - aw snap product designer - frozen rendering - overlapping design - re-trigger mockup generation labels: - troubleshooting - product-designer - webgl - mockup-issues - storefront-display contextString: Applies to all creators using the Fourthwall product designer. No specific plan required. breadcrumbPath: "Create and sell products > How to Guides > Troubleshoot design and rendering issues" relatedModules: - name: catalog-product-all route: /admin/products/all - name: products-list route: /admin/dashboard/products/all/ - name: catalog-product-discover route: /admin/products - name: collections-list route: /admin/dashboard/products/collections/ - name: catalog-product-favorites route: /admin/products/favorites path: create-and-sell-products/how-to-guides/troubleshoot-design-and-rendering-issues last_updated: '2026-05-21' --- # Troubleshoot design and rendering issues Rendering and preview issues in the Fourthwall product designer include broken or missing mockup images, grey or blank storefront thumbnails, rendering stuck at 0%, overlapping design layers, designs not saving, and WebGL errors. Most issues are resolved by regenerating the mockup, checking shop status, verifying artwork specs, enabling WebGL, or clearing your browser cache. ## Live storefront product images appear grey or blank Grey or blank thumbnails on the live storefront across multiple devices are almost always caused by mockup regeneration or shop status, not a browser problem. Work through these sub-steps in order. **Sub-step 1: Regenerate the product mockup** 1. Open your [dashboard](https://my-shop.fourthwall.com/admin/dashboard/?redirect) and go to [**All Products**](https://my-shop.fourthwall.com/admin/dashboard/products/all/?redirect). 2. Open the affected product. 3. Scroll to the **Photography and design** section. 4. Hover over the broken default mockup image and click the trash icon to delete it. 5. Click **Edit product design**. 6. Click **Save** to trigger mockup regeneration. [Image: The product edit page shows the 'Photography and design' section. It demonstrates how to add a product image by clicking the plus sign.] **Sub-step 2: Confirm your shop status is set to Live** If thumbnails still appear grey after regeneration, check that your shop is published. A shop set to **Coming Soon**, **Password Protected**, or a scheduled launch that hasn't triggered yet can render product images as grey or blank to visitors. Check the status in either place: - **Home tab:** the status is shown in the upper-left. - **Site Design tab:** the status is shown in the top-right. Confirm the status reads **Live**. If it does not, change it to **Live** and reload the storefront. [Image: The site status menu is open, with 'Live' selected. Users can choose "Coming soon" or "Schedule as live" options to change the website's status.] **Sub-step 3: Check WebGL and browser settings** Only run this sub-step if thumbnails remain grey after the steps above, and only when you, the creator, see the issue on your own shop. Visitors seeing grey images are not affected by your browser settings. See the "Confirm browser and WebGL settings" section below for browser-by-browser instructions. ## How to fix broken or not-displaying product mockup images If a product's default mockup image is broken, missing, or showing a placeholder, re-trigger mockup generation before contacting Support. This is the first-line fix for any mockup display issue. 1. Go to [**All Products**](https://my-shop.fourthwall.com/admin/dashboard/products/all/?redirect) and open the affected product. 2. Scroll to the **Photography and design** section. 3. Hover over the broken default mockup image and click the trash icon to delete it. [Image: Product design area showing t-shirt previews, "Edit product design", "Download art files", and inventory settings to mark an item as sold out or members only.] 4. Click **Edit product design** in the same **Photography and design** section. [Image: The product page has a gallery of 10 images showing the same black t-shirt design. The "Inventory" section shows "In stock: Unlimited" with "Mark as sold out" and "Make this a members-only product"...] 5. Click **Save** to re-trigger mockup generation. The system will produce a fresh default mockup for the product. If the regenerated mockup still has issues, upload your own custom product photos in the **Photography and design** section to replace the default mockups. Custom photos override generated mockups everywhere they appear on your shop. If the mockup is still broken after deleting and regenerating, follow the steps below and reach out to Support with details. ## Check your artwork file File issues are the number one cause of uploads failing or rendering getting stuck. Make sure your file meets these requirements: - **Format:** PNG or JPEG - **Resolution:** Minimum 1500 x 1500 pixels (300 Dots per inch (DPI) recommended) - **Design elements:** Avoid transparency, glow/fade effects, or anything outside the print-safe area - **File dimensions:** Files above approximately 8,000 x 8,000 pixels frequently stall during processing. The designer blocks uploads exceeding 11,000 pixels per dimension and shows an error. - **Layers:** Flatten complex multi-layer designs before exporting If your upload fails instantly or shows a 400 error, the file likely isn't meeting required specs. This can happen due to corruption, an unsupported format, oversized dimensions, or invalid file metadata. ## Confirm browser and WebGL settings Fourthwall's designer uses WebGL to render previews. If WebGL is blocked, disabled, or failing, you'll see frozen previews, blank canvases, or rendering stuck at 0 percent. WebGL uses your GPU. If your device is running low on memory or using integrated graphics, preview quality may drop or freeze. **Chrome:** - Go to **chrome://settings** - Under System, turn on **Use hardware acceleration when available** - Restart Chrome - Check **chrome://gpu** to confirm WebGL is enabled **Firefox:** - Visit **about:config** - Search and set "webgl.force-enabled" to **true** using the toggle switch - Restart Firefox **Edge:** - Go to the menu icon > **Settings** > **System and performance** - Click **Graphics acceleration** - Enable **Use graphics acceleration** when available - Restart your browser **Safari:** macOS natively supports WebGL on Safari, but older versions may need manual activation: - Go to **Preferences** > **Advanced** - Enable **Show Develop menu in the menu bar** - In the Develop menu, select **Enable WebGL** ## Try another browser or clear cache Browser quirks and cached data can interfere with the product designer. - Try an incognito/private window (removes browser extensions, which may be the source of the issue) - Clear cache and cookies - Disable browser extensions or add-ons directly, since some can interfere with the designer - Test another browser (Chrome and Firefox perform best) - Make sure your browser is fully updated - Reinstall the browser if updates and cache clearing do not resolve the issue If the issue disappears in another browser, the original browser is likely blocking features through extensions or outdated settings. ## Fix issues with saving or lost progress If designs won't save or disappear after editing: - Try an incognito/private window first, since browser extensions are a common cause of blank pages on save - Use **Save as hidden** in the product editor to capture progress without publishing - Reopen drafts from **All Products** > **Hidden** - Avoid long editing sessions without saving (prevents browser crashes like "Aw, Snap!") If saving loops or freezes, switch browsers or clear cache. ## Check for product-specific or error code issues Some issues come from specific product types or temporary rendering bugs. - If rendering is stuck at 0 percent, try creating the same design on a different product - If previews generate with overlapping or duplicated layers, refresh or recreate the product - If you hit an Internal Server Error, note which page triggered it and gather system info - If uploads freeze at exactly 95 percent, the file may be too complex or exceed the approximately 8,000 x 8,000 pixel practical ceiling for reliable processing ## When to contact Support Reach out if you still see any of the following after following these steps: - Rendering frozen beyond 0 percent - Uploads failing across multiple products - Previews not loading at all - Repeated error pages after finalizing Include the following details so Support can diagnose faster: - Operating system (Windows/macOS) - Browser and version - GPU/graphics card model - Your site URL and the product designer URL - Screenshots or recordings ## Frequently asked questions ## Why is my rendering stuck at 0 percent? Usually, this is due to large files, unsupported design elements, or WebGL being disabled. ## Why won't my file upload? Most often caused by file corruption, size limits, pixel dimensions above approximately 8,000 x 8,000 pixels (the designer blocks anything over 11,000 pixels per dimension), transparency effects, or a browser extension blocking uploads. ## Why does my design look low-res or blurry? Source files that are too small or stretched beyond their original resolution will look pixelated. ## Why do previews overlap or duplicate? This is often a temporary rendering glitch. Refresh or rebuild the product. ## Why is my render different on mobile vs desktop? Rendering engines vary between devices. Always check both before finalizing.