Xポストログ

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

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

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

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

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

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

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

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

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

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

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

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


    スレッド

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

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

    Xで見る
  • Shopifyで購入前ログインを必須にすると、購入手続き前にログインまたは会員登録を促されます。 既にアカウントがある場合はログインすればそのまま購入手続きに進めるのですが、新規登録時は登録後にトップに戻ってしまいます。そこはやはりカート画面から再開させたいのでその設定例です。 #Shopify

    すいません。誤字がありましたので、修正して再掲しました。

    Xで見る
  • Shopifyの商品情報は1〜3種類の項目を掛け合わせて最大100件のバリエーションを登録できますが、種類が多い場合、一つひとつ確かめるのも手間がかかります。
    商品ごとに作成するのは面倒ですが、Liquidを使って組み合わせの一覧表を生成し、在庫情報を掲載するのも良いですね。
    #Shopify


    スレッド

    コードはこちらに記載しました。
    (ちなみに、テーブル表の同一項目を結合する際にrowspanを使った方法を検討していましたが、コードの複雑性が増してしまうため、簡易に実装できる方法として、中身に何も含まないセルを設定する方式を採用することにしました)
    https://colossal-vanadium-63c.notion.site/c78d552d7a9147abb040f4b45ad7b1a9

    Xで見る
  • Shopifyのメール機能も高機能なのですが、よりきめ細やかな配信設定を行いたい時はやはりKlaviyoなどの専用CRMツールがおすすめです。
    自動メールの設計から改善の基本的な手順を弊社スタッフが解説していますので、ぜひご参考ください。
    https://x.com/StoreHero1/status/1666366607701196802

    Xで見る
  • Shopifyの「検索とソートロジック」についてガッツリ調査いただいた記事です。参考になります。
    検索ワードにマッチしないはずの商品が表示される場合、この商品タグのヒット条件の事象が関係しているのかもしれません。原因の一つとして調べてみると良さそうです。
    https://qiita.com/Shopify_ojisan/items/ac4657304469f3938b38
    #Shopify

    Xで見る
  • @spachill_web コメントありがとうございます!
    そうですね。Shopifyのセクションやブロックは一度作成すると、テーマが変わっても多少の手直しで再現性高く実装できるので、作り置きしておくと何かと便利ですよね。

    Xで見る
  • Shopifyの商品画面でチェックボックスを設置し、チェックされていない時は商品を購入できない(カートに追加できない)ようにしてほしいという依頼をいただくことがあります。テーマによって設定方法は異なるのですが、テーマDawnでの設定例です。
    #Shopify

    Xで見る
  • ShopifyのSNSアイコンですが、ヘッダーにも表示したいというリクエストを頂く事があります。エディタから表示位置が変更できないテーマの場合、基本的にはコードを編集する必要があるのですが、カスタムLiquidを使ってエディタだけで設定することもできます。テーマ「Dawn」での設定例です。
    #Shopify

    Xで見る
  • ShopifyにInstagramの投稿を連携するアプリは色々ありますが、Instagramからの流入対策も重要です。
    訪問者の方は投稿内容に興味を持ってくれているはずなので、トップページにリンクしている場合、連動してInstagram関連のコンテンツがすぐに目に入るようにしてあげるのも良いですね。
    #Shopify

    Xで見る