FROM CACHE - en_header

Remove Color option from Product cards

aquire
Visitor
3 0 0
‎07-05-2023 04:28 AM

Can someone help in removing the color option from the product cards?
I can see it on the output html/css code and can hide easily with css but I can't find the code that outputs the color option on the product card inside the liquid code file!

My liquid code for product cards:

{% comment %}
    Renders a product card

    Accepts:
    - card_product: {Object} Product Liquid object (optional)
    - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_rating: {Boolean} Show the product rating. Default: false
    - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
    - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
    - show_quick_add: {Boolean} Show the quick add button.
    - section_id: {String} The ID of the section that contains this card.

    Usage:
    {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == nil
      assign ratio = 1
    endif
  -%}
  <div class="card-wrapper">
    <div class="card
      card--{{ settings.card_style }}
      {% if no_variants %} card--no-variants {% endif %}
      {% if card_product.featured_media %} card--media{% else %} card--text{% endif %}
      {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
      {% if extend_height %} card--extend-height{% endif %}
      {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}"
      style="--ratio-percent: {{ 1 | divided_by: ratio | times: 100 }}%;"
    >
      <div class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if card_product.featured_media or settings.card_style == 'standard' %} ratio{% endif %}">
        <a href="{{ card_product.url }}" id="CardLink-{{ section_id }}-{{ card_product.id }}" class="full-unstyled-link" aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}">
          {%- if card_product.featured_media -%}
            <div class="main-carousel js-card-carousel">
              {%- if no_carousel -%}
                <div class="card__media">
                  <div class="media media--transparent">
                    <img
                      srcset="{%- if card_product.featured_media.width >= 165 -%}{{ card_product.featured_media | image_url: width: 165 }} 165w,{%- endif -%}
                        {%- if card_product.featured_media.width >= 360 -%}{{ card_product.featured_media | image_url: width: 360 }} 360w,{%- endif -%}
                        {%- if card_product.featured_media.width >= 533 -%}{{ card_product.featured_media | image_url: width: 533 }} 533w,{%- endif -%}
                        {%- if card_product.featured_media.width >= 720 -%}{{ card_product.featured_media | image_url: width: 720 }} 720w,{%- endif -%}
                        {%- if card_product.featured_media.width >= 940 -%}{{ card_product.featured_media | image_url: width: 940 }} 940w,{%- endif -%}
                        {%- if card_product.featured_media.width >= 1066 -%}{{ card_product.featured_media | image_url: width: 1066 }} 1066w,{%- endif -%}
                        {{ card_product.featured_media | image_url }} {{ card_product.featured_media.width }}w"
                      src="{{ card_product.featured_media | image_url: width: 533 }}"
                      sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                      alt=""
                      class="motion-reduce"
                      loading="lazy"
                      width="{{ card_product.featured_media.width }}"
                      height="{{ card_product.featured_media.height }}"
                    >
                  </div>
                </div>     
                <div data-sentinel></div>
              {%- else -%}
                {% for image in card_product.media %}
                  <div class="card__media">
                    <div class="media media--transparent">
                      <img
                        srcset="{%- if image.width >= 165 -%}{{ image | image_url: width: 165 }} 165w,{%- endif -%}
                          {%- if image.width >= 360 -%}{{ image | image_url: width: 360 }} 360w,{%- endif -%}
                          {%- if image.width >= 533 -%}{{ image | image_url: width: 533 }} 533w,{%- endif -%}
                          {%- if image.width >= 720 -%}{{ image | image_url: width: 720 }} 720w,{%- endif -%}
                          {%- if image.width >= 940 -%}{{ image | image_url: width: 940 }} 940w,{%- endif -%}
                          {%- if image.width >= 1066 -%}{{ image | image_url: width: 1066 }} 1066w,{%- endif -%}
                          {{ image | image_url }} {{ image.width }}w"
                        src="{{ image | image_url: width: 533 }}"
                        sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                        alt=""
                        class="motion-reduce"
                        loading="lazy"
                        width="{{ image.width }}"
                        height="{{ image.height }}"
                      >
                    </div>
                  </div>     
                {% endfor %}  
                <div data-sentinel></div>
              {%- endif -%}
            </div>
          {%- endif -%}
        </a>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading{% if card_product.featured_media or settings.card_style == 'standard' %} h6{% endif %}"{% if card_product.featured_media or settings.card_style == 'card' %} id="title-{{ section_id }}-{{ card_product.id }}"{% endif %}>
           <a href="{{ card_product.url }}" id="CardLink-{{ section_id }}-{{ card_product.id }}" class="full-unstyled-link" aria-labelledby="CardLink-{{ section_id }}-{{ card_product.id }} Badge-{{ section_id }}-{{ card_product.id }}">
              {{ card_product.metafields.custom.series }}
              <span>{{ card_product.title | escape }}</span>
            </a>
            <p class="card__subtitle">{{ card_product.metafields.descriptors.subtitle }} {{subtitle}}</p>
          </h3>
  
          {% render 'price', product: card_product, price_class: 'price--product' %}
            {% comment %} This is very hacky but if we have left and right values in either of the options we want to display the left/right additional info to the subtitle {% endcomment %}
            {%- for option in card_product.options_with_values -%}
              {% assign firstOption = option.values | first | downcase %}
              {% assign secondOption = option.values | last | downcase %}
              {% if firstOpion contains 'right' or firstOption contains 'left' or secondOption contains 'right' or secondOption contains 'left' %}
                {% assign subtitle = '(Left & Right)' %}
              {% endif %}
            {%- endfor -%}

          <div class="product__sizes">
                <img src="{{ 'sizes.png' | asset_url }}" alt="" />
                <span> {{ card_product.metafields.custom.sizes }} Sizes</span>
          </div>
  
          <div class="card-information">
          <!-- TrustBox widget - Product Mini -->
          <div
            id="trustbox-widget"
            class="trustpilot-widget card__trustpilot"
            data-locale="en-GB"
            data-template-id="54d39695764ea907c0f34825" data-businessunit-id="60ad27ae117c42000178a128"
            data-style-height="25px"
            data-style-width="180px"
            data-theme="light"
            data-sku="{{ card_product.selected_or_first_available_variant.sku }}"
            data-no-reviews="hide"
            data-scroll-to-list="true"
          >
            <a href="https://uk.trustpilot.com/review/techsofa.com" target="_blank" rel="noopener">Trustpilot</a>
          </div>
          <!-- End TrustBox widget -->
          {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ card_product.vendor }}</div>
            {%- endif -%}

            <span class="caption-large light">{{ block.settings.description | escape }}</span>
            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
                if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                endif
              %}
              <div class="rating" role="img" aria-label="{{ 'accessibility.star_reviews_info' | t: rating_value: card_product.metafields.reviews.rating.value, rating_max: card_product.metafields.reviews.rating.value.scale_max }}">
                <span aria-hidden="true" class="rating-star color-icon-{{ settings.accent_icons }}" style="--rating: {{ card_product.metafields.reviews.rating.value.rating | floor }}; --rating-max: {{ card_product.metafields.reviews.rating.value.scale_max }}; --rating-decimal: {{ rating_decimal }};"></span>
              </div>
              <p class="rating-text caption">
                <span aria-hidden="true">{{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}</span>
              </p>
              <p class="rating-count caption">
                <span aria-hidden="true">({{ card_product.metafields.reviews.rating_count }})</span>
                <span class="visually-hidden">{{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}</span>
              </p>
            {%- endif -%}
          </div>
        </div>
        {%- if show_quick_add -%}
          <div class="quick-add">
            {%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
            {%- if card_product.variants.size == 1 -%}
              <product-form>
                {%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
                  <input type="hidden" name="id" value="{{ card_product.selected_or_first_available_variant.id }}" disabled>
                  <button
                    id="{{ product_form_id }}-submit"
                    type="submit"
                    name="add"
                    class="quick-add__submit button button--full-width button--secondary"
                    aria-haspopup="dialog"
                    aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                    aria-live="polite"
                    data-sold-out-message="true"
                    {% if card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}
                  >
                    <span>
                      {%- if card_product.selected_or_first_available_variant.available -%}
                        {{ 'products.product.add_to_cart' | t }}
                      {%- else -%}
                        {{ 'products.product.sold_out' | t }}
                      {%- endif -%}
                    </span>
                    <span class="sold-out-message hidden">
                      {{ 'products.product.sold_out' | t }}
                    </span>
                    <div class="loading-overlay__spinner hidden">
                      <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                        <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                      </svg>
                    </div>
                  </button>
                {%- endform -%}
              </product-form>
            {%- else -%}
              <modal-opener data-modal="#QuickAdd-{{ card_product.id }}">
                <button
                  id="{{ product_form_id }}-submit"
                  type="submit"
                  name="add"
                  class="quick-add__submit button button--full-width button--secondary"
                  aria-haspopup="dialog"
                  aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
                  data-product-url="{{ card_product.url }}"
                >
                  {{ 'products.product.choose_options' | t }}
                  <div class="loading-overlay__spinner hidden">
                    <svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
                      <circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
                    </svg>
                  </div>
                </button>
              </modal-opener>
              <quick-add-modal id="QuickAdd-{{ card_product.id }}" class="quick-add-modal">
                <div role="dialog" aria-label="{{ 'products.product.choose_product_options' | t: product_name: card_product.title | escape }}" aria-modal="true" class="quick-add-modal__content global-settings-popup" tabindex="-1">
                  <button id="ModalClose-{{ card_product.id }}" type="button" class="quick-add-modal__toggle" aria-label="{{ 'accessibility.close' | t }}">{% render 'icon-close' %}</button>
                  <div id="QuickAddInfo-{{ card_product.id }}" class="quick-add-modal__content-info">
                  </div>
                </div>
              </quick-add-modal>
            {%- endif -%}
            </div>
            {%- endif -%}
        <div class="card__badge {{ settings.badge_position }}">
          {%- if card_product.available == false -%}
            <span id="Badge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sold_out_badge_color_scheme }}">{{ 'products.product.sold_out' | t }}</span>
          {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
            <span id="Badge-{{ section_id }}-{{ card_product.id }}" class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}">{{ 'products.product.on_sale' | t }}</span>
          {%- endif -%}
        </div>
        <div class="card__lower">
          <div class="product-card__dimensions">
                <span>(H: {{ card_product.metafields.custom.height }} x W: {{ card_product.metafields.custom.width }} x L: {{ card_product.metafields.custom.depth }})</span>
              </div>
        </div>
      </div>
    </div>
  </div>

{%- else -%}
  <div class="card-wrapper">
    <div class="card
      card--{{ settings.card_style }}
      card--text
      {% if extend_height %} card--extend-height{% endif %}
      {% if settings.card_style == 'card' %} color-{{ settings.card_color_scheme }} gradient{% endif %}
      {% if card_product.featured_media == nil and settings.card_style == 'card' %} ratio{% endif %}"
      style="--ratio-percent: 100%;"
    >
      <div class="card__inner {% if settings.card_style == 'standard' %}color-{{ settings.card_color_scheme }} gradient{% endif %}{% if settings.card_style == 'standard' %} ratio{% endif %}" style="--ratio-percent: 100%;">
        <div class="card__content">
          <div class="card__information">
            <h3 class="card__heading">
              <a role="link" aria-disabled="true" class="full-unstyled-link">
                {{ 'onboarding.product_title' | t }}
              </a>
            </h3>
          </div>
        </div>
      </div>
      <div class="card__content">
        <div class="card__information">
          <h3 class="card__heading{% if settings.card_style == 'standard' %} h5{% endif %}">
            <a role="link" aria-disabled="true" class="full-unstyled-link">
              {{ 'onboarding.product_title' | t }}
            </a>
          </h3>
          <div class="card-information">
            {%- if show_vendor -%}
              <span class="visually-hidden">{{ 'accessibility.vendor' | t }}</span>
              <div class="caption-with-letter-spacing light">{{ 'products.product.vendor' | t }}</div>
            {%- endif -%}
            {% render 'price' %}
          </div>
        </div>
      </div>
    </div>
  </div>
{%- endif -%}

Here's how it's output looks on html:

Screenshot 2023-07-05 at 2.14.31 PM.png

 

and the visual look of how it looks and what I mean: https://imgur.com/a/xVvVM52

 

Just need to know which liquid code is generating that product swatch color option!

Labels:
171 Views
0 Likes
Report
Reply 1 (1)
BSS-Commerce
Shopify Expert
2851 383 401
‎07-06-2023 12:39 AM

Hi @aquire 

We've carefully checked your website and found your problem quite complicated. So we suggest hiring a developer.

It's what we can help with an optimal solution. If you need help from our expert, kindly share your request with us via Shopify experts.

We will check it and give you a detailed solution. We're looking forward to working with you.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

112 Views
0 Likes
Report
Community Browser

Community Blog Articles

cropped-SYSO-okt23-GROW.png
Unlocking the Secrets of E-commerce Success: An Exclusive Interview with SY...

On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...

By Arno Nov 27, 2023
cropped-shutterstock_offset_2207989361.jpg
Organize Your Products Like a Rainbow: Metafields and Color Sorting

You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...

By Skye Nov 8, 2023
Jasonh_0-1698862247798.png
Community Connect: October Recap

The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...

By Jasonh Nov 6, 2023
Terms of Service Privacy Policy