Xポストログ

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

  • 【Shopify TIPS】
    テーマ「Dawn」の特集コレクションセクション&コレクションテンプレートでモバイルでの列数を3列表示対応にする方法

    Shopifyのテーマ「Dawn」でモバイル画面の表示列数は標準で1列か2列のどちらかを選択できますが、少し手を加えて3列表示も可能にする方法です。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-07-08

    Xで見る
  • 【Shopify TIPS】
    テーマ「Dawn」の商品詳細ページでPC画面では商品説明を先に表示したい場合

    Shopifyのテーマ「Dawn」の商品詳細画面は、PC用の画面でも商品説明の表示枠が小さいので、掲載する情報が多くなると少々見づらくなります。そこで、PC画面の時は楽天のように商品説明部分を最初の方に持ってきて、画面幅いっぱいに広げてしまうのも良いですね。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-07-07

    Xで見る
  • 【Shopify TIPS】
    テーマ「Dawn」の検索結果ページで「クイック追加」機能を有効にする方法

    ShopifyのテーマDawnには商品一覧(コレクション)ページから直接詳細画面に遷移せずにカート追加できる機能が付いていますが、検索結果ページでも使えるようにするための方法です。ほぼ同じ見た目ということもあって、わずかな修正で実装できます。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-07-06

    Xで見る
  • 【Shopify TIPS】
    ブログ本文中で商品情報を動的に表示させる方法

    Shopifyのブログページで本文中に商品情報を引用したいときに独自タグを使って置き換えるための方法です。特徴的な文字列を独自タグとして扱い、そのタグに囲まれた部分の内容を読み取ってLIQUIDによって書き換えるという方法です。こちらのサイトで紹介されていました。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-07-03

    Xで見る
  • 【Shopify TIPS】
    テーマ「Dawn」の商品ページでページ内リンクを設置できるブロックの設定例

    Shopifyのテーマ「Dawn」の商品詳細で、ページ内スクロールメニューを設置するための「ブロック」設定例です。掲載内容の充実はとても重要ですがその分閲覧率の低下も懸念されるため、項目を明示しつつ誘導できるページ内ナビは特にスマホの直帰率改善に有用です。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-07-02

    Xで見る
  • 【Shopify TIPS】
    ブランク画像を生成してくれる`placeholder_svg_tag`フィルターが便利

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

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-07-01

    Xで見る
  • 【Shopify TIPS】
    Shopify管理画面のコレクション一覧から直接ストアフロント側のページを表示するブックマークレット

    Shopifyの管理画面で、商品一覧からはストアフロントのページを直接閲覧できるのですが、コレクション一覧にはその機能がありません。大量にコレクション登録した際など一気に確認したいときに使えるブックマークレットです。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-06-30

    Xで見る
  • @machitake__ 管理画面から編集した場合、その編集した内容がアカウントの注文内容には反映されないそうです。以前から公式でも認識されているそうですが、いまだに仕様変更されないですね。要望は多いと思うのですが。
    https://community.shopify.com/c/%E6%8A%80%E8%A1%93%E7%9A%84%E3%81%AAq-a/%E6%B3%A8%E6%96%87%E3%81%AE%E4%B8%80%E9%83%A8%E5%95%86%E5%93%81%E3%82%92%E3%82%AD%E3%83%A3%E3%83%B3%E3%82%BB%E3%83%AB%E3%81%97%E3%81%9F%E5%A0%B4%E5%90%88%E3%81%AB%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%82%A2%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E7%94%BB%E9%9D%A2%E3%81%AE%E6%B3%A8%E6%96%87%E5%B1%A5%E6%AD%B4%E3%81%AB%E3%82%AD%E3%83%A3%E3%83%B3%E3%82%BB%E3%83%AB%E3%81%AE%E5%86%85%E5%AE%B9%E3%82%92%E5%8F%8D%E6%98%A0%E3%81%99%E3%82%8B/m-p/1996417/highlight/true

    Xで見る
  • 【Shopify TIPS】
    テーマ「Dawn」で、商品やコレクション、ブログ記事を複合的に表示するセクション

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

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-06-29

    Xで見る
  • 【Shopify TIPS】
    商品メタフィールドに追加した要素でフィルタリング可能にする設定例

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

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-06-28

    Xで見る
  • 【Shopify TIPS】
    管理画面で商品数を確認する方法(count.jsonを追加する)

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

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-06-26

    Xで見る
  • 【Shopify TIPS】
    Liquidでメタフィールド「ファイル(リスト)」の登録数を取得する方法

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

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-06-25

    Xで見る
  • 【Shopify TIPS】
    テーマ「Dawn」のブログ記事一覧ページで1ページあたりの表示数を変更できるようにする方法

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

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-06-24

    Xで見る
  • 【Shopify TIPS】
    クーポンコードをコピー&ペーストせずにクリックするだけで使えるようにする設定例

    Shopifyでクーポンを配布する際など、チェックアウト画面でクーポンコードを入力してもらうのが一般的ですが、クリックで適用されるようにしてしまうのも良いですね。元々、標準機能として配布用のリンクが生成でききるので、そちらを応用した設定例です。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-06-23

    Xで見る
  • 【Shopify TIPS】
    クーポンコードをコピー&ペーストせずにクリックするだけで使えるようにする設定例

    Shopifyでクーポンを配布する際など、チェックアウト画面でクーポンコードを入力してもらうのが一般的ですが、クリックで適用されるようにしてしまうのも良いですね。元々、標準機能として配布用のリンクが生成でききるので、そちらを応用した設定例です。

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-06-23

    Xで見る
  • 【Shopify TIPS】
    テーマ「Dawn」のスライドショーで表示されるページネーションのスタイル画像を変更する方法

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

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-06-22

    Xで見る
  • 【Shopify TIPS】
    ホーム(トップページ)のようなカテゴリトップの設定例

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

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-06-21

    Xで見る
  • 【Shopify TIPS】
    テーマ「Dawn」の「ブログ記事セクション」で特定のタグを持つ記事だけ指定して表示する設定方法

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

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-06-20

    Xで見る
  • 【Shopify TIPS】
    テーマ「Dawn」で購入時にアカウントログインを必須にした場合、 カート画面にログイン/登録導線を表示してそのまま購入手続きに進ませる方法

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

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-06-19

    Xで見る
  • 【Shopify TIPS】
    テーマ「Dawn」でコレクションページのソートをプルダウン→タブ型に変更する設定例

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

    (詳細はスレッドのリンク先に記載)
    #Shopify #ShopifyTIPS


    スレッド

    https://store-dojo.com/products/2023-06-18

    Xで見る