So I recently purchased the "Chromium 4" theme in Shopify and I've been trying to modify it to my liking.
Everything seems to be working fine, but Now I want change how the Products in Search Results appear, like Change the Product Title Colour, or something else like that.
I've been trying to look around the Search. liquid file but it doesn't seem to do anything or have anything and I'm really confused.
I'm not new to programming but It's my first time dealing with Shopify and I'm confused a hell.
Any help would be awesome!
This is what the search.liquid file looks like
{% 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>
and this is what the product-item snippet contains
{% 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>
If you want to change the product title color and design only for the search page then using the parent class 'cp-grid' you can change the title color
for eg:
.cp-grid .product-name { color: #000000; }
or you want to change color throughout website you can go with below eg:
.product-name { color: #000000; }