🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢

站長阿川 · 10月03日

來自紐約的客戶詢問 shopify 客製化問題

一組在紐約的台灣團隊在 FB 私訊問我 shopify 客製化的問題

真神奇雖然是 niche market 但果然會有這種機會

客戶有兩個很急的需求

第一個需求是客戶的商品選項很多超出 shopify 3 種的限制

使用 Ymq Product Options & Variants 這個 app

是不錯用但在 pop-up 視窗裡面希望做一個 toggle 切換尺寸表的公分/英吋

我調查解決方式發現要在 popup 裡面開 source code 然後加 html

我先用 ai 做一個簡易的 toggle 把 html 放進去

不能把 script 跟 style 都加在這裡因為 app 本身會有一些 trim 字元的機制

然後空元素也被 trim 掉總之有點 tricky

接著開 theme editor 在產品模板建立一小段 custom liquid

解決方案大概像這樣

secret snippet v7

<style>
.ymq_modal__content .unit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: Arial, sans-serif;
  font-size: 14px;
}

/* Switch 外觀 */
.ymq_modal__content .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}
.ymq_modal__content .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.ymq_modal__content .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #999;
  transition: .3s;
  border-radius: 20px;
}
.ymq_modal__content .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}
.ymq_modal__content .switch input:checked + .slider {
  background-color: #2b4d82;
}
.ymq_modal__content .switch input:checked + .slider:before {
  transform: translateX(20px);
}

/* Label 樣式（可選） */
.ymq_modal__content .unit-toggle .label {
  font-weight: bold;
}

</style>

<script>
(function () {
  // 顯示/隱藏
  function applyState(input) {
    var cm   = document.getElementById('cm-table');
    var inch = document.getElementById('inch-table');
    if (!cm || !inch) return;
    var cmOn = !!(input && input.checked);
    cm.style.display   = cmOn ? 'block' : 'none';
    inch.style.display = cmOn ? 'none'  : 'block';
    console.log(cmOn ? 'cm' : 'in');
  }

  // 1) 事件委派：即使 #unitSwitch 之後才被 YMQ 插入也能接到
  document.addEventListener('change', function (e) {
    var input = e.target.closest && e.target.closest('#unitSwitch');
    if (!input) return;
    console.log('trigger');
    applyState(input);
  }, true); // capture 提高命中率

  // 2) 初始狀態：用超短輪詢等元素出現一次（最多約2秒）
  var tries = 0, timer = setInterval(function () {
    var input = document.getElementById('unitSwitch');
    if (input || tries++ > 20) {
      clearInterval(timer);
      if (input) applyState(input);
    }
  }, 100);
})();
</script>

整段也是 ai 寫給我的

有點 tricky 但可以用

客戶第二個需求是 i18n

其實用 shopify offical app Translate & Adapt 就可以做到

Ymq Product Options & Variants 那些 app 也跟這種原生 app 整合得不錯

後面就是一筆一筆把翻譯語系內容放進去然後四處更新模板之類的吧花時間而已

i18n ux 與 seo 的部分我認為應該是 shopify 強項畢竟一堆跨境電商都用 shopify

貨幣、語言是兩種設定啟用之後在 navbar 會長這樣

注意一件事切換語言網址會改變但是切換貨幣網址不會改變

我不想深入研究這個 url 設計反正我相信 shopify 深思熟慮過應該是 best practice

貨幣/市場要在這個頁面新增

介面語言要在這個頁面新增

新增完畢之後在 theme editor 應該會有這兩個開關

（如果沒有那麼您用的 theme 就太陽春了吧）

Country/region selector
Language selector

打開就搞定囉！

我額外研究了一下果然跨境銷售是 shopify 強項

首先各市場預設會取得動態匯率價格會自動算好

如您所見要手動設定匯率也是可以的

再來可以針對市場差別定價例如 +10% 這種設定

最後也可以手動設定每個商品的價格畢竟美金 19 的東西台幣我們會想設 599

弄成好看的數字而不是精準的數學轉換

如圖這些都能做到真的是很強大好用呀！

找到了解決方案不過時程實在太趕了

有些細節不確定要做多完整

對方同時有找很多團隊協助的樣子應該有更不忙的團隊能花時間處理

於是我婉拒了這個客戶

站長阿川

每週二 YT 直播問答，DC 可 Call-in，一起討論技術、職涯發展。
YT 👇👇👇
https://www.youtube.com/@codelove_tw
DC 👇👇👇
https://discord.gg/fvCF2whZ9D

提供 Shopify 接案服務：阿川の電商水電行 - 專修 Shopify 網店 👇👇👇
https://job.turn.tw/shopify-services

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