コレクションページ ホバー設定

Topic summary

ユーザーがShopifyの有料テーマ「SPARK」のコレクションページで、商品画像のホバー時に1枚目から2枚目の画像に切り替わる機能を無効化したいと質問しています。

試した対応:

  • snippets/collection-item.liquid内のコードをコメントアウトしたが、挙動は変わらず画像切り替えが継続

回答者からの提案:

  • テーマのドキュメントや設定を確認
  • テーマサポートに相談
  • 対応できない場合はエキスパート/パートナーへの依頼を検討
  • 自力対応する場合は、まず該当機能の仕組み(JavaScript/CSS/HTML/Liquid)を学習し、特定のクラス削除などで対応可能かもしれないとアドバイス

現状: 具体的な解決方法は未提示で、質問者が次のステップを検討中

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.

初めまして

現在コレクションページで商品画像にカーソルを合わせると商品画像が1番目から2番目の画像に切り替わる設定となっております。

こちらにつきまして、一度上記の画像が切り替わる設定を作動しないようにしたく存じます。

使用テーマはSPARKです。

snippetsの「collection-item.liquid」に下記コードがあり、こちらをコメントアウトしても挙動が変わらず、画像が切り替わります。

  {%- if collection.image != blank or collection.products.first != blank -%}
    {%- assign image_object = collection.image | default: collection.products.first.featured_media.preview_image -%}
    {%- assign image_id = collection.image.id | default: collection.products.first.featured_media.id -%}

    <a
      href="{{ collection.url }}"
      class="collection-item__image-wrapper hover"
      aria-label="{{ collection.title }}"
    >
      {%- if image_object -%}
        {% render 'image' with
          image: image_object,
          id: image_id,
          wrapper_class: 'collection-item__image',
          disable_style: image_is_constrained
        %}
      {%- else -%}
        <div class="placeholder-image">
          {{ 'collection-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
        </div>
      {%- endif -%}
    </a>
  {%- elsif collection == empty -%}
    {{ placeholder_image }}
  {%- else -%}
    {{ placeholder_image }}
  {%- endif -%}

コレクションページでのホバー設定は「collection-item.liquid」以外でも設定できるのでしょうか。ホバー設定が作動しないようにする方法をご教示いただきたく存じます。

該当テーマは有料テーマだと思いますので以下を実行することをお勧めします。

  • テーマのドキュメントを確認する
  • テーマの設定を確認する
  • テーマのサポートに相談する

テーマ側では対応できない場合は以下が検討できると思います。

  • エキスパートやパートナーに依頼する
  • ご自身でJavaScript/CSS/HTML/Liquidを学ぶ

自力で対応したい場合はまず該当の動作の仕組みを学ぶことをお勧めします。

仕組みがわかれば、例えば「特定のクラスを削除する」などの方法で対応できるかもしれません。