Shopify Dummy Product Redirect Guide | Link Collection Tiles to Custom Pages

Hey everyone! Your friendly neighborhood Shopify expert here, fresh off a dive into the community forums. We recently had a fantastic discussion that really hit on a common pain point for store owners: how to create a "dummy" product in a collection that, when clicked, sends customers to a completely different page – say, a custom landing page or a fitting guide – instead of a standard product detail page.

Our friend theogroyboy, or rather, the original poster theogroyboy (who was actually Roman79 in the provided context, but let's stick to the spirit of the original thread title author), kicked off the conversation asking exactly this. They wanted a product like /products/fitting-finder to appear in a collection, but redirect to /pages/fitting-finder when clicked. And like many of us, they already knew the standard Shopify redirects wouldn't cut it. Why? Because Shopify prioritizes active product pages over redirects. If the product exists, it'll load that page first, bypassing any redirect rule you've set up.

Why Standard Redirects Fall Short for Active Products

As Roman79 (the first replier in the thread, though the post order is a bit jumbled) pointed out, "A redirect won’t work here, because Shopify serves a live product page before it checks any redirect." This is crucial. If your 'dummy' product is active, Shopify sees it as a legitimate product and tries to display its page. This is why we need some creative workarounds.

Two Clever Solutions from the Community

The community came through with two excellent methods to tackle this. Both have their merits, and you might even want to combine them for the most robust solution.

1. The Client-Side Template Redirect (Moeed's Method)

Moeed offered a super helpful, relatively straightforward approach that uses a custom product template with a bit of JavaScript. It's a great option if you're not super comfortable digging deep into your theme's core code.

How to Implement Moeed's Template Redirect:

Create a New Product Template:
- From your Shopify admin, go to Online Store > Themes.
- Click Customize on your current theme.
- At the top of the editor, switch the dropdown from "Home page" to Products, then click Create template.
- Give it a descriptive name, like fitting-finder (matching your dummy product's purpose).
Add Custom Liquid for the Redirect:
- In your newly created template, add a Custom Liquid section.
- Paste the following code into the Custom Liquid section:
```
{% unless request.design_mode %}
  
{% endunless %}
```
This little snippet tells the browser to immediately replace the current page with your target page (/pages/fitting-finder in this example). The {% unless request.design_mode %} part is a smart touch – it prevents the redirect from kicking you out of the theme editor while you're trying to customize things.
Assign the Template to Your Product:
- Save your theme changes.
- Go back to your Shopify admin and open your "dummy" product (e.g., fitting-finder).
- In the product editor, find the Theme template setting and select your new fitting-finder template.

Heads up: Moeed rightly points out that "the product page will flash for a split second before the redirect." This happens because the product page still loads briefly before the JavaScript kicks in. It's a minor user experience compromise for the ease of implementation.

2. The Cleaner, Instant Theme Code Modification with Metafields (Expatify's Method)

Expatify, a Shopify Expert from Indonesia, offered what they called a "cleaner option" – and I agree! This method prevents the placeholder product page from ever loading in the first place, leading to a much smoother, instant experience for your customers. It involves using Shopify's powerful metafields and a small edit to your theme's product card snippet.

How to Implement Expatify's Metafield & Theme Code Redirect:

Create a Product Metafield Definition:
- In your Shopify admin, go to Settings > Custom data > Products.
- Click Add definition.
- Name it something like Tile Link, and set its Namespace and key to custom.tile_link.
- Choose URL as the content type. This ensures you're always entering a valid link.
- Save your new metafield definition.
Set the Metafield on Your Dummy Product:
- Go to your "dummy" product (e.g., fitting-finder) in the Shopify admin.
- Scroll down to the Metafields section and find your new Tile link field.
- Enter the target URL, e.g., /pages/fitting-finder.
- Save the product.
Modify Your Theme's Product Card Snippet:
- Go to Online Store > Themes > Actions > Edit code.
- You'll need to find the Liquid file responsible for rendering product cards in your collections. This is often named something like card-product.liquid, product-card.liquid, or similar, usually found under the "Snippets" folder. It might take a little searching depending on your theme.
- Once you've found it, locate where the product card's link (its href attribute) is being built. It often uses card_product.url or just product.url.
- You'll want to add a conditional statement like this:
```
{%- assign card_url = card_product.url -%}
{%- if card_product.metafields.custom.tile_link != blank -%}
  {%- assign card_url = card_product.metafields.custom.tile_link.value -%}
{%- endif -%}
```
Then, ensure that the href attribute for your product card link uses this new card_url variable. For example, it might look something like ....

This method is super clean because the link is changed at the source. The customer's browser never even attempts to load the dummy product page; it goes straight to your desired custom page.

Bringing It All Together: Best Practices

So, which method should you choose? My take, and one that aligns with Expatify's excellent advice, is to combine them for the most robust solution:

Primary Method: Expatify's Metafield & Theme Code. This gives you the best user experience for customers clicking tiles in collections – instant redirection with no flash.
Fallback: Moeed's Template Redirect. Keep this in place on your dummy product. If someone somehow lands directly on your /products/fitting-finder URL (e.g., from an old bookmark or a search engine that hasn't caught up), Moeed's script will still ensure they get to the right place.
SEO Consideration: Hide from Search Engines! Expatify also wisely suggested hiding the placeholder product from search engines. You don't want Google indexing a "product" that's just a redirect. Shopify's Help Center has guides on how to do this, usually by editing the product's SEO title and description in the admin and setting it to "hidden."

By implementing these strategies, you can maintain a clean, intuitive storefront where your "dummy" products seamlessly guide customers to the right information or experience, all while keeping your site performant and SEO-friendly. It's a fantastic example of how a little clever customization, inspired by our community, can make a big difference for your store!

Mastering Shopify: Redirecting a 'Dummy' Product to a Custom Page for Seamless Collection Links