利用 shopify 內建 tags 功能做到 coming soon 產品效果

協助客戶的第一個需求就是許多產品還沒運送到美國但希望都先顯示在網站上

讓客戶知道這間日本廠商的產品線並加上 Coming Soon 的提示

既然是 shopify 開店平台我自然不能直接修改 database schema 那該如何做到這功能？

研究之後發現可以使用內建的 tags 功能先增加 coming-soon 標籤到相關產品上面

再找出 theme 檔案之中與價格有關、或者需要顯示提示的地方

加上類似這樣的修改

{%- if product.tags contains 'coming-soon' -%}
  <!-- Display Coming Soon message -->
  <div class="coming-soon-label">
    Coming Soon
  </div>
{%- else -%}
  <!-- blah blah -->
{%- endif -%}

這次替客戶修改了

navbar 的浮出式商品連結
collection page 的商品元件
product page 的價格隱藏起來

滿有趣的一次開發經驗利用 tags 巧妙擴充 data model 的感覺

站長阿川

每週二 YT 直播 Q&A（可 Discord Call-in）
YT：https://www.youtube.com/@codelove_tw
DC：https://discord.gg/fvCF2whZ9D

⭐️ Shopify 技術教練（給工程師）
https://job.turn.tw/developer-coaching

⭐️ Shopify 接案服務（給品牌）
https://job.turn.tw/shopify-services

⭐️ 台灣 Shopify 開發者 LINE 群（非官方）
https://line.me/ti/g2/YUasX5K3CJ4QdIx76zppjHlh3-q8w-xkSyK1LA