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

[Sellton]

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.

[moshbray]

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.

[Supermeow]

Agree. But you should add 

content_for_header contains "previewBarInjector.init();"

to check theme preview as well.

[Sellton]

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

[moshbray]

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