Xポストログ

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

2023年3月の投稿 絞り込みを解除

  • Shopifyのコレクションについて優先度を決めて商品の表示順を調整したいというご要望をいただくことがあります。そこで、全自動＆リアルタイムというわけにはいかないのですが、メタフィールドに設定した優先度を元にMatrixifyというアプリを使ってCSVによる一括更新を行うことがあります。
    #Shopify

  • @Tjena_allihopa お役に立てましたようで何よりです。
    一点だけ補足です。CSSに関する内容なので説明を省いているのですが、PC版の画像位置が偏る場合はこちらを追加でご設定ください。

  • Shopifyのテーマ「Dawn」の「スライドショー」セクションですが、ブロックごとに画像を１つだけ指定するタイプなので、トリミングの仕方が多少異なるだけでどのデバイスでも同じものが表示されます。
    とはいえやはりスマートフォンでは縦長な画像を表示したくなりますので、その設定例です。
    #Shopify

  • Shopifyではrobots.txtも編集できるようになっているのですが、こちらの方の投稿が大変参考になりました。一度作成した「robots.txt.liquid」の編集には気をつけたいですね。
    https://webutubutu.com/webdesign/9738
    #Shopify

  • Shopifyのテーマエディタでは、カスタムLiquidセクションとブロックをそれなりに使用しますが、運用が始まるとコードの内容を忘れてしまいがちです。そこで、ストアフロント側には何も表示されないテキストフィールドを設け、機能説明欄を追加しておくと運用管理がスムーズになります。
    #Shopify

  • Shopifyのテーマ「Dawn」の商品詳細画面で「SKU」を表示するための設定例です。バリアントを持つ商品、持たない商品どちらも表示可能です。今回はテーマエディタでの設定方法を掲載していますが、通常はjsも別ファイル化するなどして、コード編集で埋め込んでしまうケースがほとんどです。
    #Shopify

    スレッド

    Dawn のバージョン8.0.0以降は標準機能として「SKU」ブロックが実装されていますので、そちらをお使いください。

  • Amazonのアカウントページにある「再び購入」枠を、Shopifyでもアプリを使わずに実装する設定例です。日用品など、繰り返し購入される頻度が高い商品ほど効果的です。このコードは最近購入した順から最新5件表示していますが、一手間加えて購入回数が多い順などにするのも良いですね。
    #Shopify

  • Shopifyのテーマファイルで使用するLiquidについてマニアックな話題を一つ。配列を使ったコードで想定した動きにならず小一時間ハマってしまったのですが、Liquidでも文字列を数値として扱いたい場合は明示的な型変換が必要です。
    #Shopify

  • Shopifyで購入者に送信される各種通知メールですが、残念ながら実際に送信された内容を確認することはできません。また、CCやBCCを使用して自社アドレスなどに同報することもできません。通知された内容を確認した上で、問い合わせ対応できると便利なのですが。
    #Shopify
    https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E3%81%8A%E5%AE%A2%E6%A7%98%E3%81%AB%E9%80%81%E4%BF%A1%E3%81%97%E3%81%9F%E3%83%A1%E3%83%BC%E3%83%AB%E5%86%85%E5%AE%B9%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%97%E3%81%9F%E3%81%84/td-p/854434

  • Shopifyのテーマ「Dawn」のサイト内検索ページでは、デフォルトで「ページ」や「ブログ記事」が商品情報と共に表示されます。場合によっては商品情報のみを表示させたいケースがあります。そこで、テーマエディタを用いて、この機能をオン/オフするための設定方法です。
    #Shopify

  • Shopifyのテーマ「Prestige」などで実装されている商品詳細画面での「在庫数表示」を、Dawnにも実装する場合の設定例です。バリアントを持つ商品、持たない商品どちらも表示可能です。（一定数以下を下回ったら表示する、などの条件を加えるにはコードの修正が必要です）
    #Shopify

    スレッド

    Dawn のバージョン8.0.0以降は標準機能として「在庫ステータス」ブロックが実装されていますので、そちらをお使いください。

  • 意外と忘れがちですが、自動で送られる通知以外にもShopifyの注文詳細画面から購入者宛に任意のメールを送ることができます。返信されたメールに対するやりとりができない点は残念ですが、履歴が残るので銀行振込依頼メールなど定型的なものはこちらから送るなどの使い方がオススメです。
    #Shopify

  • Shopifyでアプリを使わずにカート画面に「あといくらで送料無料」を表示するための実装例です。数量変更や商品削除の際、カート画面をリロードせずに合計金額が更新されるテーマもあるので、Liquidよりもjsで動的に変更するようにしておく方が良いですね。
    #Shopify

    すいません。以前共有したこちらのコードですが、カート画面を表示した直後に「あといくら」が表示されないバグがありましたので訂正です。スクリプトはこちらになります。
    https://colossal-vanadium-63c.notion.site/361822775d654a158aa38172f85dc0c7?pvs=4

  • Shopify Flowとよく似た機能を持つ「Mechanic」。トリガーの種類が豊富でタスクもかなり細かく設定できます。管理画面がGUIでは無いためとっつきにくいのですが、正規表現も使えるなど非常に便利です。全てFlowに統一したいもののまだまだ手放せそうもありません。
    #Shopify
    https://apps.shopify.com/mechanic?locale=ja

  • Shopifyの商品詳細ページで、テーマによっては予め設定されているテキストブロック「販売元」ですが、ひと手間加えて、/collections/vendors?q=xxxページへのリンク付きテキストにするのもオススメです。SEO効果も期待できます。
    #Shopify

  • 商品詳細画面などのメタフィールド値として指定したメタオブジェクトをLiqudのコードから参照する場合、ネームスペースとキーを指定しただけではGIDしか取得できません。キーの後ろに「.value」プロパティを付けることで、オブジェクト内の要素にアクセスできるようになります。
    #Shopify

  • Shopifyのコレクションページのフィルタ「価格」ですが、標準のテーマでは直接価格を指定する必要があるので、少々面倒です。あらかじめリスト化された価格帯の中から選ぶ方がユーザーフレンドリーですよね。そこで、メタフィールドを使った設定例です。
    #Shopify

  • Shopifyの配送料ですが、キャンペーンなどで一時的な割引料金などを併用設定する際、通常料金との重複設定には気を付けておきたいところです。
    #Shopify

  • 先日リリースされた「新しいお客様アカウント」ですが、現時点ではマイページのLiquidカスタマイズができず（引き継がれず）、またアプリにも非対応なのでマイページから遷移する定期購入系アプリなどが操作できなくなってしまうので、移行には注意が必要ですね。
    #Shopify
    https://help.shopify.com/ja/manual/customers/customer-accounts

  • Shopifyのコレクションイメージ画像ですが、１つしか指定できないのでPCもSPも基本的には同じものが表示されます。とはいえやはりデバイスごとに最適な画像を表示したくなります。そこでメタフィールドを使って、モバイル用画像を別途指定できるようにしておくことが結構あります。
    #Shopify