Xポストログ

Xで投稿したShopify関連の内容をそのまま記録しています。

  • 注文状況ページの追加スクリプトで{{http://checkout.total_price}}として合計金額を取得しようとすると、「1100」の場合「110000」と表示されてしまいます。moneyフィルターをつけても¥1,110のように整数ではなくなってしまうので、times: 0.01フィルターで桁をそろえるようにしています。
    #shopify

    Xで見る
  • Shopify Plusではチェックアウト画面のカスタマイズができるのですが、checkout.liqudは1つのファイルで構成されており、またカスタマイズ自体はJavascriptで記述する必要があります。各画面ごとに処理を出し分けるには分岐処理を加える必要があります。忘れがちなのでメモ。
    #shopify

    Xで見る
  • ストア構築時はもちろんのこと、公開後も商品情報のアップデートや注文データの一括フルフィルメントなど、結構な頻度でデータ操作が欠かせないのですが、ほぼ全てのマーチャントさんで使わせてもらっているアプリがMatrixifyです。作業効率が劇的に上がります。
    https://apps.shopify.com/excel-export-import?locale=ja
    #shopify

    Xで見る
  • ローカルでLiquidを編集する時はVSCodeを使うのですが、拡張機能はShopify Liquid Template Snippetsにしています。コード補完機能「IntelliSense」のおかげで迷うことなくコーディングできます。
    https://marketplace.visualstudio.com/items?itemName=killalau.vscode-liquid-snippets
    #shopify #liquid

    Xで見る
  • Shopifyは基本英語圏で使われるアプリなので、姓名が逆になってしまうことがよくあります。そんな時は仕方がないので、nameプロパティをlast_nameとfirst_nameプロパティに分解して入れ替えて対応することになります。
    #shopify

    Xで見る
  • @ao_ShopifyOtaku そうですね!弊社の新人フロントエンドエンジニアさんからの提案で導入しました。運用を開始してしばらく経ちましたが、GitHub運用だけで本番公開までできてしまうのでオススメです!

    Xで見る
  • Shopifyで購入後に送られる「注文の確認」メールですが、合計金額の末尾に「JPY」(通貨単位)が標準で付いています。「¥」マークもあるので外して欲しいと依頼を受けることがよくあるのですが、該当のフィルター文字列「money_with_currency」を「money」に変更すれば非表示にできます。
    #shopify

    Xで見る
  • Dawnなどの無料テーマには無い機能の一つとして、コレクションページで色選択ができるカラースウォッチがあります。Prestigeならチェックを入れたらすぐに使える上に、カラーの調整もしやすくて便利です。(同ベンダーのFocalもできます)
    #shopify #shopifytheme

    Xで見る
  • 個人的におすすめな有料テーマの一つにFocalがあります。推薦理由は色々あるのですが、例えば商品バリアントセレクターにおいて、設定されていないバリエーションは表示しないなど、デフォルトでカスタマーフレンドリーなUIを提供してくれる点もその一つです。
    #shopify #shopifytheme

    Xで見る
  • Shopifyテーマ編集について、少々マニアックな話を一つ。控えのテーマで作成したテンプレートが、ページや商品情報などの編集画面で表示されず設定できないことがあります。そんな時は、ライブテーマ側にも同名のテンプレートを作ることで選択できるようになります。
    #shopify #shopifytheme

    Xで見る
  • Liquidコードを書く際に、どのテンプレートで何のオブジェクトやプロパティが使えるかを覚えるのは結構大変です。そんなとき@chi19910109に教えてもらったこのチートシートが便利です。例文と機能解説がとても役立ちます。
    #Shopify #Liquid
    https://www.shopify.com/partners/shopify-cheat-sheet

    Xで見る
  • Shopifyでは、メールや通常のWebサイトから特定の商品を購入またはカートに追加できるリンクを作ることができます。
    「今すぐ購入」は対象の商品だけを選択してすぐに購入手続き画面に遷移するリンク、「カートに追加」は対象商品を追加したカート画面に遷移するリンクになります。
    #shopify


    スレッド

    [VARIANTID]の確認方法は、公式サイトで紹介されています。
    https://help.shopify.com/ja/manual/products/variants/find-variant-id

    Xで見る
  • 先日から始めたShopifyテーマのGitHub管理。mainブランチをliveテーマに、開発用ブランチを下書きテーマに連携しています。
    下書きテーマで修正内容を確認した後、GitHub上でmainブランチにプルリク出してマージすることでliveテーマに即座に連携されて本番化されるので便利です。
    #shopify

    Xで見る
  • ストアカスタマイズを行う場合、些細なものでも要求仕様と機能仕様をドキュメントにまとめるようにしています。実装前に要求内容の矛盾や検討漏れに気付くことができますし、実装理由と方針が一目瞭然なので公開後のメンテナンス性が向上します。新機能追加時の影響調査にも役立ちます。
    #Shopify

    Xで見る
  • StoreHeroにjoinしてからのこの一年で12ストアほどプロデュースしてきましたが、お客様からのご希望要件にほぼ全て応えることができており改めてShopifyの柔軟性と拡張性の高さに驚かされます。WordPress並みの自由度を持ちながら、Saasとして常に最新機能の恩恵を得られる点がありがたい。
    #shopify

    Xで見る
  • Shopify公式サイトで提供されている「プライバシーポリシー無料作成ツール」が便利です。会社情報など基本的な項目を入力したら自動でプライバシーポリシーの雛形文章を作成してくれます。
    https://www.shopify.com/jp/tools/policy-generator

    Xで見る
  • 今月入社のフロントエンドエンジニアさん主導で、ストアテーマをGitHub連携で管理に。テンプレートエディタから直接編集した場合もGitHub上でその都度commitされるので全ての編集履歴が確認できるようになりました。もちろん万が一の時は即座に切り戻しできるので安心です。#shopifyテーマ

    Xで見る
  • 入社してからの一年で12ストアを直接プロデュースするなど、1ヶ月に1つのペースでストア構築に関わってきましたが、その傍らでStoreHero独自のストア構築ワークフローも整備してきました。オリジナルデザインのストアを、安定した品質で遅延なくリリースできる体制を整えることが出来ました。
    #Shopify

    Xで見る