Xポストログ

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

  • 【Shopify TIPS】
    10分程度の修正で、ヘッダーアカウントアイコンにログイン後ユーザー名を表示可能

    ◆今回のカスタマイズのポイント
    WEGOさんのストアのようにShopifyのテーマ「Dawn/Rise」で、ヘッダーのアカウントアイコンの横に、ログイン後ユーザー名を表示させたい場合の設定例です。

    ◆具体的な実装手順
    ①まずはファイルの場所を確認
    ・sections/header.liquid
    ・sections/header-drawer.liquid

    ②コードを追加
    ・「http://customer.name」を使用すると、日本語名は姓名が逆転してしまうため「customer.last_name」「customer.first_name」に分解して記述
    ・ヘッダーでアカウント名が改行されないようにスタイリングを追加

    ◆実装のメリット
    ・ログイン状態が即座に判別可能
    ・ユーザーの帰属意識向上

    ◆よくあるつまずきポイント
    ・デスクトップとモバイルで掲載箇所が異なるので、それぞれに実装すること

    ◆実装後の動作確認すべきポイント
    □ PC表示での見た目
    □ スマホでの表示確認
    □ ログイン/ログアウト切り替え
    □ 長いユーザー名での表示崩れ

    --------------

    ここまでお読みいただき、ありがとうございます。

    ECサイト構築やShopifyカスタマイズについて、定期的に情報発信しています。
    セミナーではプロジェクトマネジメントや納品物としてのドキュメント作成方法など、より本格的な構築ノウハウなどを提供しています。

  • Shopifyのテーマ「Dawn/Rise」のスライドショーセクションでボタンリンクを設定した際に、ボタンを非表示にしつつ画像全体をクリッカブルにする設定例です。前回の方法に少し手を加えるだけで実装できます。
    https://x.com/sh_sakamoto/status/1851836499362300085
    #Shopify

  • Shopifyで商品IDを指定して商品情報を取得する方法です。

    通常、Shopifyで特定の商品情報を取得する場合は「all_products["handle"]」タグを使いますが、handle名ではなくIDで指定したいケースもあります。

    大量の商品を扱うストアでは、paginateとforループを使って商品IDを探す方法は処理速度の低下を招きやすいため、あまり避けたいところです。

    そこで、より効率的な方法として、collections.all（全商品が格納される特殊なコレクション）に対してwhereフィルタでIDを指定することで、目的の商品を素早く取得することができます。

  • Shopifyのテーマ「Dawn/Rise」のスライドショーセクションですが、ボタン部分以外の画像全体にもリンクを指定したいケースがあります。その設定例です。 ボタンを有効にしているスライドに適用されます。
    #Shopify

  • @MakiNumano そうですね。Matrixifyを使ったやり方としましてはこのような感じになります。

  • Shopifyのテーマ「Dawn/Rise」のメニューに親子構造を持たせると、親メニューをクリックした際はその下の子・孫メニューを開くだけでその画面には遷移できなくなってしまいます。なので親メニューにも遷移させたい場合、「○○○すべて」等のメニューも設置してもらうようにしています。
    #Shopify

  • 以前紹介したMatrixifyを用いた方法とは別に、Shopify Flowを用いて割引セールを自動的にスケジュールする設定方法です。Flowアクションで割引価格を設定することができないので、同じSKUを持つ2つの商品を用意して表示を切り替えることで対応しています。
    https://x.com/sh_sakamoto/status/1733335663578345820
    #Shopify

  • Shopifyのテーマ「Dawn/Rise」のコレクションページでデスクトップ用画面の絞り込みフィルターを左サイド表示している際に、最初から全て展開しておきたい場合の設定例です。ユーザーテストするとわかりますが、見えないものは意外と気づかれないので、最初から開いておくのも良いですね。
    #Shopify

  • Shopifyの商品詳細ページで、タブ切り替えの商品説明を掲載したい場合の設定例です。テーマ編集で商品情報セクションの中にタブ切り替えを行うJavascriptとcssを設定した上で、商品情報の「商品説明」内に対応フォーマットに沿ってHTMLタグを設定します。特にテーマの制限はありません。
    #Shopify

  • Shopifyのテーマ「Dawn/Rise」の商品画面で数量を指定してカート追加する際、通常は在庫数以上に指定することが可能になっていますが、在庫上限までしか指定できないようにしたい場合の設定例です。増分ボタン、数値入力ともに上限値までしか入力できないようになります。
    #Shopify

  • Shopifyのテーマ「Dawn/Rise」の商品ページで、数量セレクターを「+/-」ボタン（または直接数値入力）ではなく、プルダウン式に変えたい場合の設定例です。ボタンをタップせずに即座に希望数量を選択できるため、商材によっては利便性が高まります。
    #Shopify

  • Shopifyのテーマ「Dawn/Rise」の商品情報画面で、商品写真やサムネイルを角丸にしたい場合ですが、すべてテーマエディタの「設定」項目からノーコード・ノーカスタマイズで設定可能です。
    #Shopify

  • Shopifyのヘッダーに登録・表示されるメインメニューですが、一覧に展開することでサイトマップのように表示させることもできます。その設定例です。
    #Shopify

  • 前回の「Shopifyのテーマ「Dawn/Rise」のコレクションページで表示件数を切り替える」カスタマイズを行った際、そのままですと注文の「追加の詳細」にその情報が保持されます。特に保持する必要がなければ、main-cart.liquidに１行コードを追加しておきます。
    https://x.com/sh_sakamoto/status/1848212616147267678
    #Shopify

  • Shopifyのテーマ「Dawn/Rise」のコレクションページで、１ページあたりの表示件数をストアフロント側で変更できるようにする設定例です。変更した表示件数は、同じテンプレートを使用するコレクションで、購入完了するまで維持されます。
    #Shopify

  • Shopify Flowはスプレッドシートと連携ができるので、注文データの一部を抽出してログ計測することで、例えば日次のディスカウント利用率を算出するなど、簡易集計に使ったりもしています。
    #Shopify

  • Shopifyの日本向け新テーマ「Rise」についてですが、基本構造が「Dawn」に非常に似ているため、過去に紹介した施策事例がそのまま適用できるケースが多くあります。たとえば、コレクションの連続読み込みも同様に実装できました。
    #Shopify

  • Shopifyのテーマ「Dawn/Rise」の商品ページで、商品情報セクション内に追加可能な「テキストブロック」ですが、テーマエディタ上ではスタイル操作の自由度は小さいのですが、テキストメタフィールド内でHTMLタグを使うことができるので実は自由にスタイル設定できます。
    #Shopify

  • Shopifyのテーマ「Dawn/Rise」の特集コレクションや商品サムネイルのカルーセルは横スクロールが可能ですが、そのスクロール位置をセッション中に保存しておく設定例です。都度スクロールし直さなくてよくなるので、回遊性を高める効果が期待できます。
    #Shopify

  • Shopifyの商品ページに関連キーワードリンクブロックを表示する設定例ですが、ファイルによるコード編集を必要とせずに、メタフィールドとテーマエディタのカスタムliquidだけで設定することも可能です。
    https://x.com/sh_sakamoto/status/1846038292451688916
    #Shopify