Xポストログ

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

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

  • Shopifyの管理画面で、商品一覧からはストアフロントのページを直接閲覧できるのですが、コレクション一覧にはその機能がありません。大量にコレクション登録した際など一気に確認したいので、ブックマークレットを作ってしまいました。公式に直接表示する機能が提供されたら有難いですね。
    #Shopify

  • Shopifyでは独自セッションが追加できます。例えばこちらですが、商品やブログ記事ごとのリストではなくメディアサイトのように記事や商品、コレクションを混在させて表示できるようにしたセクション事例です。テーマに合わせて表示列数の変更や結合も可能です。
    https://colossal-vanadium-63c.notion.site/Dawn-49b35f9b0cc347e78e61f3c02c3aa401
    #Shopify

  • Shopifyの商品ページでスペック表や関連情報などに使われることが多い商品メタフィールドですが、一覧ページでの絞り込みフィルターとして使うことができます。これを応用して商品ページにリンクを貼っておく設定例です。
    #Shopify

  • Shopifyの管理画面では商品登録数が表示されず現在何件の商品が登録されているか把握しづらいのですが、URLにcount.jsonを付けることで確認できるようになります（条件を絞った場合もOK）。
    #Shopify

  • Shopifyのブログを使って、コーディネートブログなどを設置する場合の入力項目設定例です。メタフィールドを使った入力フォーマットによって見栄えをそろえたり、スタッフ情報など複数の記事で共用するコンテンツにはメタオブジェクトで設定しておくと便利ですね。
    #Shopify

  • Shopifyのメタフィールドで複数の値をセットできる「リスト」形式ですが、タイプに「ファイル」を設定した際、その登録数を取得する方法わからず迷いました。liquidで一般的な「size」で取得可能かと思っていたのですが、countを使うことで取得できました。
    #Shopify

  • Shopifyのテーマ「Dawn」の「デフォルトのブログ」テンプレートは、１ページあたりのブログ記事カード表示件数が６件に固定されています。一度に表示される件数を増やしたい場合もあるので、表示件数を任意に設定できるようにするための設定例です。
    #Shopify

    スレッド

    失礼しました。一つ手順が抜けてました。

  • Shopifyでクーポンを配布する際など、チェックアウト画面でクーポンコードを入力してもらうのが一般的ですが、クリックで適用されるようにしてしまうのも良いですね。元々、標準機能として配布用のリンクが生成でききるので、そちらを応用した設定例です。
    https://colossal-vanadium-63c.notion.site/1b1303c254604ee78a8705d19abeed27?pvs=4
    #Shopify

  • マニアックなカスタマイズ事例を一つ。ブランドのトーンに合わせてShopifyのスライドショーなどのページャーアイコンをデフォルト以外の任意のアイコンに変える方法です。テーマによってやり方は異なりますが、SVGを使えば画像ファイルをアップロードせずにコード編集だけで対応できますね。
    #Shopify

  • Shopifyでトップと同じレイアウトのページを用意して切り替えられるようにしたい場合があります。トップ以外はコレクションまたはページテンプレートを使いますが、同じセクションが使えるので全く同じレイアウトに設定出来ます。どちらを使うかはURLと商品一覧の使用可否で判断しています。
    #Shopify

  • 改修事例としては少ないですが、ブログ記事セクションでタグを使って表示内容を出しわけるための設定例です。
    ニュースの他にスタッフブログなど複数のブログを設置したストアで、MENS、WEMENSと言ったカテゴリトップごとにニュース記事を出しわける際などにお使い頂いています。
    #Shopify

  • Shopifyで購入前ログインを必須にした場合、デフォルトでは未ログイン時にカート画面から購入手続きを進めるとログイン画面に遷移する形をとりますが、最初からカート画面にログイン and 会員登録導線を表示してしまうのも良いですね。
    #Shopify

  • Shopifyのコレクションページでは、多くのテーマがプルダウン型のソート機能を提供していますが、これをタブ型に変更したいケースがあるかと思います。通常はLiquidコードを編集してカスタマイズしてしまうのですが、テーマエディタを使って変更を加える場合の設定例です。※「Dawn」限定
    #Shopify

  • Shopifyの画面に表示されるテキストラベルもすべてテーマエディタで編集できるように思われがちですが、エラーメッセージなどは「デフォルトテーマのコンテンツを編集する」から行う必要があります。何気にお問い合わせを受けることが多いので、マニュアル化してご案内していたりします。
    #Shopify

  • ShopifyのテーマDawnの「特集セクション」を拡張して、ランキング枠として使う方法ですが、商品ページにももちろん実装可能です。関連商品とあわせて「その商品が含まれるカテゴリのランキング」を表示しておけば、類似商品の閲覧率を高める効果が期待できます。
    #Shopify

  • Shopifyでランディングページを作る際など、デフォルトのヘッダーやフッターが無いページを作成したい時があります。
    基本的にはPageFlyなどビルダーアプリをオススメしていますが、アプリを使わずに実装したい時は少々無理矢理ですが、このような方法で非表示にすることがあります。
    #Shopify

  • Shopifyのテーマ「Dawn」のモバイル用商品詳細ページで、商品写真を固定しながらページをスクロールできるようにする方法です。
    ユーザーは商品の解説文を読みながら画像を確認することができるようになります。必要に応じてこの機能をon/offすることもできます。
    https://colossal-vanadium-63c.notion.site/Dawn-Sticky-on-off-e38e18e42a8d4e9a9ddde2373cd92a48?pvs=4
    #Shopify

  • Shopifyのコレクションページで、楽天のようにカテゴリ内のランキングを別枠で表示したいというご要望を頂くことがあります。
    少々手間ですが、テーマDawnで「特集コレクション」セクションの通常利用を可能にしつつ、ランキング表示枠として使うための設定例です。
    https://colossal-vanadium-63c.notion.site/Dawn-68caebee0ea34457867065fe8a90b59a?pvs=4
    #Shopify

  • Shopifyの「手動」コレクションを複製したい時がありますが、商品情報と違いそのまま「複製」することができません。アプリを使ってやるほどの作業量でなければ、こちらで紹介されている方法が参考になります。
    https://www.websitebuilderinsider.com/how-do-i-duplicate-a-collection-in-shopify/
    ※「自動」コレクションは抽出条件を一致させればOK。
    #Shopify

    スレッド

    またもやすいません。修正前の古い画像をアップしていました。手順の中身はほとんど変わらないのですが、テキストやナンバリングがちょっとだけ違っています。念の為、こちらに修正版をアップしておきます。

  • Shopifyのコレクション(商品一覧)ページには、商品管理画面の「メディア」欄に設定された１枚目(と、マウスオーバー用は２枚目)の画像が表示されます。
    商品詳細の画像表示順は変えずに一覧画面には別の画像を表示させたい場合、コードの編集が必要になりますが、テーマDawnでの設定例です。
    #Shopify