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

日本語 ディスカッション 技術的なQ＆A
1

初めまして

現在コレクションページで商品画像にカーソルを合わせると商品画像が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」以外でも設定できるのでしょうか。ホバー設定が作動しないようにする方法をご教示いただきたく存じます。

2

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

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

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

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

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

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