Hide Draft Products from Live Store but Show in Preview / Theme Editor – Metafield-Based Solution?

Topic summary

A user wants to hide published products from the live storefront and search engines using a custom metafield (draft_only = 1), while keeping them visible in Shopify’s Theme Editor and Preview mode for internal review.

Proposed Solution:

  • Use Liquid’s request.design_mode object combined with the metafield condition
  • Suggested code: {% if product.metafields.custom.draft_on != 1 or request.design_mode %}
  • Additional recommendation to check for content_for_header contains "previewBarInjector.init();" to cover theme preview scenarios

Current Status:

  • The original poster tested various code options but couldn’t get products to display in browser preview without making them live
  • Due to time constraints, they’ve decided to accept previewing only within Shopify’s Theme Editor
  • One commenter offered further troubleshooting assistance

Resolution: Unresolved – the suggested Liquid-based approach didn’t work as expected in practice.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.

I’m trying to hide certain published products from the live storefront and Google indexing using a custom metafield (draft_only = 1) while still being able to view and edit them in Shopify’s Theme Editor and Preview mode.

I’ve added conditional Liquid logic to main-product.liquid and main-collection-product-grid.liquid to exclude these draft products on the live site. However, this also hides them in Preview mode, which makes internal review difficult.

Has anyone solved this purely with Liquid code — allowing metafield-tagged draft products to be hidden live but still visible when previewing the theme or product? Not looking for an app-based solution.

Any insights or code examples would be much appreciated.

1 Like

This is totally doable with Liquid. You can combine your custom metafield condition with Shopify’s built-in request.design_mode object. Just wrap your product rendering logic in a condition like:
{% if product.metafields.custom.draft_on != 1 or request.design_mode %}
This hides products on the live site but keeps them visible when you’re using the Theme Editor or Preview mode.

1 Like

Agree. But you should add

content_for_header contains "previewBarInjector.init();"

to check theme preview as well.

Thank you very much for the pointer but i tried this and various other coding options i have found an nothing seems to work to allow me to see product with a draft only metafield set to 1 in the browser preview without making the product live on my site. Unfortunately i can’t spend any further time on this now so i am just going to accept that i will only be able to preview product inside Shopify’s theme editor only. Appreciate your input thank you

Maybe if you’re available one can take a look to get it solved