Headless Shopiffy URL fixed for "Preview Online Store" button

1

I’ll investigate the Shopify admin page to understand how the preview functionality works.I can see the products page. I notice there are “View on Online Store” buttons (ref_61, ref_64). Let me click on one of the products first to see the preview options more clearly.I found the VVIP product. Let me read the page to find the preview button.I found important information. I can see:

  1. “View on Online Store” button (ref_38) - This is likely the preview button
  2. Theme editor link (ref_91) - Points to /store/readygen/themes/145339449505/editor?previewPath=%2Fproducts%2Fvvip%3Fview%3D__DEFAULT__

Let me check the JavaScript to see what URL the “View on Online Store” button actually opens:Let me try clicking the “View on Online Store” button to see what happens:Let me check the network requests while clicking this button. First, let me click it and observe what URL it tries to open:There seems to be a Chrome extension issue. Let me try a different approach - checking the Sales Channels settings:Now I can see the domain settings clearly. I can see:

  • Primary domain: shop.sdhealth.tw (Connected)
  • Secondary domains: dw9sfh-zd.myshopify.com and readygen.myshopify.com

The issue is that Shopify uses the PRIMARY domain (shop.sdhealth.tw) for all preview links. When you click “View on Online Store”, Shopify generates a URL using this primary domain.

Let me check the Online Store settings to see if there’s a way to configure this:The page seems to be loading. Let me check the Headless channel settings:Let me check the headless storefront settings:Now I understand the full picture. Let me go back to check what happens when we click “View on Online Store” from a product page. The key issue is that Shopify’s “View on Online Store” button uses the primary domain (shop.sdhealth.tw), not the headless storefront.

Let me check if there’s an online_store_preview route issue in your headless setup:I found relevant information. The key issue is that in a headless setup, the Preview button functionality found in the product edit screens in the Shopify backend doesn’t work properly - instead of a product’s handle, a preview_key parameter is passed to the template.

Pressing any link on the checkout pages, for example the logo or login button, will redirect you to your Shopify pages (liquid template). Because we like to redirect our user at all times to our Headless Storefront, a small script needs to be added to theme.liquid and placed in the head.

Investigation Summary

Here’s what I found:

The Root Cause

When you click “View on Online Store” in Shopify Admin, Shopify generates a preview URL like:

https://shop.sdhealth.tw/products/vvip?preview_theme_id=145339449505

Your Cloudflare rule correctly excludes URLs with preview_theme_id, BUT the redirect is happening inside Shopify’s Liquid theme, not at the Cloudflare level.

What’s Actually Happening

  1. You click “Preview” in Shopify Admin
  2. Shopify loads shop.sdhealth.tw/products/vvip?preview_theme_id=xxx
  3. Your Shopify theme (Liquid) has redirect logic that sends users to www.sdhealth.tw
  4. Your headless frontend doesn’t understand the preview_theme_id parameter
  5. It shows /online_store_preview error page

Solution: Fix Your Shopify Theme’s Redirect Logic

You need to update your Shopify Liquid theme to exclude preview URLs from redirecting.

In your theme.liquid or redirect script:

{% unless request.path contains '/checkouts' or request.query_string contains 'preview_theme_id' or request.query_string contains 'preview_key' %}
  <script>
    window.location.href = "https://www.sdhealth.tw" + window.location.pathname + window.location.search;
  </script>
{% endunless %}

Or if you’re using JavaScript redirect:

// Check if this is a Shopify preview
const urlParams = new URLSearchParams(window.location.search);
const isPreview = urlParams.has('preview_theme_id') || urlParams.has('preview_key');

if (!isPreview && !window.location.pathname.startsWith('/checkouts')) {
  window.location.href = "https://www.sdhealth.tw" + window.location.pathname + window.location.search;
}

Summary

Layer Status
Cloudflare Redirect Rule :white_check_mark: Correctly configured
Shopify Liquid Theme Redirect :cross_mark: Needs to exclude preview URLs

The fix needs to be made in your Shopify theme files, not in Cloudflare. Would you like me to help you locate and update the redirect logic in your Shopify theme?