如何在shopify中更改搜索结果页面！在 chromium 4 主题中
How to change search result page in shopify! in chromium 4 theme
所以我最近在 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>
这就是产品项目片段包含的内容
{% 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_size: '420x', 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>
如果您只想更改搜索页面的产品标题颜色和设计，那么使用 parent class 'cp-grid' 您可以更改标题颜色
例如：
.cp-grid .product-name { color: #000000; }
或者您想更改整个网站的颜色，您可以使用以下示例：
.product-name { color: #000000; }
所以我最近在 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>
这就是产品项目片段包含的内容
{% 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_size: '420x', 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>
如果您只想更改搜索页面的产品标题颜色和设计，那么使用 parent class 'cp-grid' 您可以更改标题颜色
例如：
.cp-grid .product-name { color: #000000; }
或者您想更改整个网站的颜色，您可以使用以下示例：
.product-name { color: #000000; }