如何在shopify中更改搜索结果页面！在铬 4 主题

如何解决如何在shopify中更改搜索结果页面！在铬 4 主题

所以我最近在 Shopify 中购买了“Chromium 4”主题，并且一直在尝试根据自己的喜好对其进行修改。 一切似乎都运行良好，但现在我想更改搜索结果中产品的显示方式，例如更改 Product Title Colour 或其他类似内容。

我一直在尝试查看 Search. liquid 文件，但它似乎没有做任何事情或没有任何内容，我真的很困惑。 我对编程并不陌生，但这是我第一次与 Shopify 打交道，我很困惑。

任何帮助都会很棒！

这是 search.liquid 文件的样子

{% unless settings.breadcrumb_styles == 'none' %}{% include 'breadcrumb' %}{% endunless %}

<div class="Boxed">
  <div id="col-main" class="page-search">
    
    {% if search.results_count == 0 or search.performed == false %}
      {% capture search_title %}{{ search.terms | escape }}{% endcapture %}
      <h4 class="title">{{ 'search.general.no_products' | t: title: search_title }}</h4>

      <form class="search-form" action="/search">
        <input type="hidden" name="type" value="product" />
        <input type="text" name="q" class="search_Box" placeholder="{{settings.search_placeholder}}" value="{{ search.terms }}" />

        <button type="submit" class="search-submit" title="Search">
          {% if settings.search_icon_type == 'font-icon' %}
            <i class="demo-icon {{ settings.search_font_icon }}"></i>
          {% else %}
            <img src="{{ settings.search_icon | img_url: '20x' }}" alt="Search" />
          {% endif %}
        </button>
      </form>
    
    {% else %}
      {% if search.performed %}
        {% paginate search.results by 16 %}

        {% capture search_title %}{{ search.terms | escape }}{% endcapture %}
        <h4 class="title">{{ 'search.general.title' | t: title: search_title }} </h4>

        <div class="cata-product cp-grid">
          {% for product in search.results %}
            {% if product.object_type == 'product' %}
              <div class="product-grid-item">
                {% include 'product-item' %}
              </div>
            {% else %}
              <div class="article-grid-item">
                {% include 'article-result' %}
              </div>
            {% endif %}
          {% endfor %}
        </div>

        {% if paginate.pages > 1 %}
          {% include 'pagination' %}
        {% endif %}

        {% endpaginate %}
      {% endif %}
    
    {% endif %}
    
  </div>
</div>

这就是 product-item 代码段包含的内容

{% assign _item_effect = settings.product_item_hover_effect %}

{% if text_align == blank %}
{% assign text_align = settings.text_align_product_item %}
{% endif %}

<div class="product-wrapper effect-{{ _item_effect }} {% if settings.use_quick_view == blank and  settings.enable_product_wishlist == blank and settings.enable_product_compare %}none-product-button{% endif %}">

  <div class="product-inner-wrapper">
    
    {% if _item_effect == 'swatch' and product.variants.size > 1 %}
      <div class="product-swatch-images">
        <div class="bxslider">
          {% assign _option = settings.swatch_option | downcase %}
          {% comment %}{% assign _swatches_color = false %}
          {% if _option == "color" or _option == 'colour' %}
            {% assign _swatches_color = true %}
          {% endif %}{% endcomment %}

          <div class="wrap-swatch-{{ _option }}">
            {% include 'swatch_item' with _option %}
          </div>
        </div>   
      </div>
    {% endif %}

    <div class="product-head">
      {% include 'product-button' %}
      
      <div class="product-image">

        {% capture _image_html %}
        {{ product.featured_image | product_img_url: '420x' }}
        {% endcapture %}
        
        {% capture number_of_images %}{{ product.images | size }}{% endcapture %}
        {% assign number_images = number_of_images | plus:0 %}
        
        <div class="featured-img{% if number_images > 1 and _item_effect == 'switch' %} switch-image{% endif %}">
          <a href="{{ product.url | within: collection }}"{% if _lazyload and settings.collections_product_ratio == 'false' %} style="position:relative;padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};"{% endif %}> 
            
            {% comment %}<img class="featured-image front{% if _lazyload %} lazyload{% endif %}" {% if _lazyload %}data-{% endif %}src="{% if product.images.size >= 1%}{{ _image_html }}{% else %}{{ 'default-image.jpg' | asset_url }}{% endif %}" alt="{{ product.title | escape }}" />{% endcomment %}

            {% include 'image-style' with image: product.featured_image,image_size: '420x',image_lazy_class: 'featured-image front img-lazy',image_class: 'featured-image front img-lazy' %}
            
            {% if number_images > 1 %}
              <span class="img-back d-none d-lg-block">
                {% comment %}<img class="back{% if _lazyload %} lazyload{% endif %}" {% if _lazyload %}data-{% endif %}src="{{ product.images[1]| product_img_url: '300x' }}" alt="{{ product.title | escape }}" /> {% endcomment %}   
                {% include 'image-style' with image: product.images[1],image_lazy_class: 'back',image_class: 'back' %}
              </span>
            {% endif %}
            
            
          </a>
        </div>

      </div>
    </div>
    {% include 'product-label' %}

    <div class="product-content text-{{ text_align }}">
      <div class="pc-inner">

        <div class="product-group-vendor-name">
          {% if settings.show_product_vendor %}<div class="product-vendor">{{ product.vendor | link_to_vendor }}</div>{% endif %}

          <h5 class="product-name"><a href="{{ product.url | within: collection }}">{{ product.title }}</a></h5>
        </div>

        {% if settings.show_product_review %}  
          <div class="product-review">
            {% include 'include-reviews' with type: 'preview_badge' %}
          </div>
        {% endif %}

        {% if section.settings.Meta_description_excerpt %}
          {% assign Meta_shortdes = product.Metafields.c_f %}
          {% assign key = 'description_excerpt' %}

          {% unless Meta_shortdes.description_excerpt == blank %}
            <div class="product-description">{{ Meta_shortdes.description_excerpt }}</div>
          {% endunless %}
        {% endif %}
        
        <div class="price-cart-wrapper">
          {% include 'product-price' %}

          {% assign Meta_shortdes = product.Metafields.c_f %}
          {% assign key = 'description_excerpt' %}

          {% unless Meta_shortdes.description_excerpt == blank %}
          <div class="product-des-list">{{ Meta_shortdes.description_excerpt }}</div>
          {% endunless %}

          <div class="product-add-cart">
            {% unless product.template_suffix == 'redirect' %}
            
              {% if settings.disable_ajax_cart %}
                <a href="{{ product.url | within: collection }}" class="btn-add-cart select-options" title="{{ 'products.product.select_options' | t }}"><span class="demo-icon icon-chrom-online-shopping-cart"></span></a>

              {% else %} 
                {% if product.variants.size > 1 %}
                <a href="{{ product.url | within: collection }}" class="btn-add-cart select-options" title="{{ 'products.product.select_options' | t }}"><span class="demo-icon icon-chrom-online-shopping-cart"></span></a>

                {% else %}
                  {% if product.available %}
                    <form action="/cart/add" method="post" enctype="multipart/form-data">
                      <a href="javascript:void(0)" class="btn-add-cart add-to-cart" title="{{ 'products.product.add_to_cart' | t }}"><span class="demo-icon icon-chrom-online-shopping-cart"></span></a>
                      <select class="d-none" name="id">
                        {% for variant in product.variants %}
                          <option value="{{ variant.id }}">{{ variant.title | escape }}</option>
                        {% endfor %}
                      </select>
                    </form>
                  {% endif %}

                {% endif %}

              {% endif %}

            {% else %}
              {% assign Meta_redirect = product.Metafields.c_f %}
              {% assign key = 'redirect_url' %}

              {% unless Meta_redirect.redirect_url == blank %}
                <a target="_blank" rel="noopener" href="{{ Meta_redirect.redirect_url }}" class="btn-add-cart select-options" title="{{ 'products.product.select_options' | t }}"><span class="demo-icon icon-chrom-online-shopping-cart"></span></a>
              {% endunless %}

            {% endunless %}
          </div>

        </div> 
      </div>
    </div>  
  </div>

</div>

解决方法

如果您只想更改搜索页面的产品标题颜色和设计，则可以使用父类“cp-grid”更改标题颜色

例如：

.cp-grid .product-name { color: #000000; }

或者你想改变整个网站的颜色，你可以使用下面的例子：

.product-name { color: #000000; }