Solved

Add bullet points for products on collection page

Einars
Explorer
57 2 10

Hello,

 

We are trying to add bullet points on products that are displayed on collection pages but can't seem to understand if there is even a way. Could someone please help us? Since we are distributing pretty expensive goods, it's vital for us. Additionally, we looked for apps, but couldn't find any.

 

I attached an image below to show the precise page.

 

Screenshot (2).png

Examples of bullet points:

 

  • Text1
  • Text2
  • Text3

 

Link: https://swisheu24.myshopify.com/collections/basketball-hoops

 

Please let us know if we can assist with anything.

 

Kind Regards,

Accepted Solutions (2)

LitExtension
Shopify Partner
4860 1001 1125

This is an accepted solution.

Hi @Einars,

Please follow the steps below:

- Step 1: Create Product metafield with type 'Multi-line text'. For example the metafield name is Bullet Points.

Screenshot.png

- Step 2: Please go to card-product.liquid file, find 'quick-add no-js-hidden' and add code here:

Screenshot.png

Code:

{%- if card_product.metafields.custom.bullet_points != blank -%}
  <div class="card__bullet">
    {{ card_product.metafields.custom.bullet_points }}
  </div>
{%- endif -%}

- Step 3: Go to each product and add the HTML code showing Bullet Points at admin.

Hope it helps!

 

 

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

LitExtension
Shopify Partner
4860 1001 1125

This is an accepted solution.

Hi @Einars,

Please go to Products. You can add Bullet Points for each product you want to display. Refer

Screenshot.png

Hope it is clear to you.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify

View solution in original post

Replies 11 (11)

KetanKumar
Shopify Partner
36835 3635 11966

@Einars 

yes its possible to make customization if you need same point or different both are possible 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Einars
Explorer
57 2 10

Hi @KetanKumar,

 

Thank you for the message. Could it be possible to kindly ask for an example of how to do it?? Would be great if bullet points would change for each product.

Einars
Explorer
57 2 10

anyone, please?

Einars
Explorer
57 2 10

heyyy

KetanKumar
Shopify Partner
36835 3635 11966

@Einars 

oh sorry for that late here 

its can be done meta field each product choose pointg 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

ExpertRookie
Shopify Partner
1518 249 310

Hi @Einars ,

 

Can you give me more details of where you want to put the bullet point? It is on the same line the product title or the product price?

 

- Was my reply helpful? Please Like and Accept Solution to let me know!
- Want to modify or custom changes on store Hire me.
- Feel free to contact me on expert.rookie.team@gmail.com regarding any help.

LitExtension
Shopify Partner
4860 1001 1125

This is an accepted solution.

Hi @Einars,

Please follow the steps below:

- Step 1: Create Product metafield with type 'Multi-line text'. For example the metafield name is Bullet Points.

Screenshot.png

- Step 2: Please go to card-product.liquid file, find 'quick-add no-js-hidden' and add code here:

Screenshot.png

Code:

{%- if card_product.metafields.custom.bullet_points != blank -%}
  <div class="card__bullet">
    {{ card_product.metafields.custom.bullet_points }}
  </div>
{%- endif -%}

- Step 3: Go to each product and add the HTML code showing Bullet Points at admin.

Hope it helps!

 

 

 

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Einars
Explorer
57 2 10

Thanks!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

 

Quick question to be 100% sure- when you wrote in the 3rd step "Go to each product and add the HTML" what exactly did you mean? Apologies as we are not the smartest ones in such fields.

LitExtension
Shopify Partner
4860 1001 1125

This is an accepted solution.

Hi @Einars,

Please go to Products. You can add Bullet Points for each product you want to display. Refer

Screenshot.png

Hope it is clear to you.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify
Einars
Explorer
57 2 10

Hi @LitExtension ,

 

Inexpressible thank you! Been worrying about this issue for 2-3 weeks already.

 

May I kindly ask if it's possible to somehow remove the padding for the bullet points within these meta fields? A picture is below. It would be perfect if we could somehow align the bullet points with the red line so everything looks nice and tidy.

 

Screenshot (28).png

 

HTML code from the meta fields section.

 

<ul>
<li>Inground basketball hoop system</li>
<li>183 x 107 cm Clear-View backboard</li>
<li>Heavy-Pro Dunk Rim</li>
<li>Backboard Padding</li>
<li>Pole Padding</li>
<li><span>Adjustable Height Settings</span></li>
<li>Powder-Coated Steel</li>
<li>Anchor Kit</li>
</ul>
<p> </p>

 

EDIT: nevermind, I found a way to remove the padding myself. In case someone else goes through all this, I added the code below. Hope it helps as well.

 

<!DOCTYPE html>
<html>
<head>
<style>

li.bulletpoints {
  list-style-type: none;
  margin-left: 0;
  padding-left: 0;
}

ul.bulletpoints {
  list-style-position: inside;
  margin-left: 0;
  padding-left: 0;
}

</style>
</head>
<body>

<ul class="bulletpoints">
  <li class="bulletpoints">Title</li>

<li>Inground basketball hoop system</li>
<li>183 x 107 cm Clear-View backboard</li>
<li>Heavy-Pro Dunk Rim</li>
<li>Backboard Padding</li>
<li>Pole Padding</li>
<li><span>Adjustable Height Settings</span></li>
<li>Powder-Coated Steel</li>
<li>Anchor Kit</li>
</ul>

</body>
</html>

 

Philipp370
Visitor
2 0 0

Hello,

I also want to add bullet points to the product quickview but i have a different theme (Minimog) and cant find the section where I need to paste in the code you gave us.

I would appreciate it very much if someone could help me here.

Here is the code from my product-card.liquid:

{{ 'component-product-card.css' | asset_url | stylesheet_tag }}

{% liquid
  if card_style == nil or card_style == blank
    assign card_style = settings.pcard_layout
  endif

  assign show_title = true
  if hide_title == true
    assign show_title = false
  endif

  if image_ratio == nil or image_ratio == blank
    assign image_ratio = settings.pcard_image_ratio | default: '1/1'
  endif

  if image_ratio == 'original'
    assign image_ratio = product.featured_image.aspect_ratio | default: '1/1'
  endif

  if show_vendor == nil
    assign show_vendor = settings.show_vendor
  endif

  assign sold_out = true
  assign variant = product.selected_or_first_available_variant

  if variant.available
    assign sold_out = false
  endif

  for variant in product.variants
    if variant.inventory_management == 'shopify' and variant.inventory_policy == 'continue' and variant.inventory_quantity == 0
      assign sold_out = false
      break
    endif
  endfor

  assign compare_at_price = variant.compare_at_price
  assign price = variant.price
  assign on_sale = false
  if compare_at_price > price
    assign on_sale = true
  endif

  assign quick_add_text = 'products.product.quick_add' | t
  unless product.has_only_default_variant
    capture quick_add_text
      render 'new-locale', key: 'products.product.select_options'
    endcapture
  endunless

  assign sold_number = product.metafields.foxkit.sold_number
%}

{%- if column_wrapper -%}<div class="sf-column">{%- endif -%}
  <div data-a="{{ section.settings.change_product_variant_on_fitlering }}" class="sf__pcard{% if sold_out %} sf__pcard--soldout{% endif %}{% if on_sale %} sf__pcard--onsale{% endif %} cursor-pointer sf-prod__block sf__pcard-style-{{ card_style }}" data-view="card"{% if sold_number != blank %} data-sold-number="{{ sold_number }}"{% endif %}>  
      <div class="sf__pcard-image {% unless settings.show_second_img %} spc__img-only{% endunless %}">
        <div class="overflow-hidden cursor-pointer relative sf__image-box">
          {% liquid
            assign pcard_default_image = settings.pcard_default_image
            if image_ratio == nil or image_ratio == blank
              assign image_ratio = settings.pcard_image_ratio | default: '1/1'
            endif
          
            assign preview_image = product.media[0].preview_image
            if section.settings.change_product_variant_on_fitlering == true and product.selected_variant.image != nil
              assign preview_image = product.selected_variant.image
            endif
          
            if image_ratio == 'original'
              assign image_ratio = product.media[0].aspect_ratio | default: '1/1'
            endif
          
            assign second_image = ''
            if settings.show_second_img and product.images.size > 1 and product.images[1] != blank
              assign second_image = product.images[1]
            endif
          
            assign image_attributes = 'alt="' | append: product.title | append: '"'
          %}
          <div class="flex justify-center items-center">
            <a href="{{ product.url }}" class="block w-full">
                {% if preview_image != blank %}
                  <div class="spc__main-img{% if product.images.size < 2 %} spc__img-only{% endif %}">
                    {% comment %} {% render 'responsive-image',
                        image: preview_image,
                        aspect_ratio: image_ratio,
                        image_class: 'se-out w-full h-full',
                        image_attributes: image_attributes
                    %} {% endcomment %}
                    {%- capture style -%}
                      {% assign asp_rat = image_ratio | default: preview_image.aspect_ratio %}
                      {% if asp_rat == 'original' %}
                        --aspect-ratio: {{ preview_image.aspect_ratio }};
                      {% else %}
                        --aspect-ratio: {{ asp_rat }};
                      {% endif %}
                    {%- endcapture -%}
                    <responsive-image class="sf-image" data-image-loading style="{{ style | strip | strip_newlines }}">
                      <img
                          srcset="{%- if preview_image.width >= 165 -%}{{ preview_image | image_url: width: 165 }} 165w,{%- endif -%}
                              {%- if preview_image.width >= 360 -%}{{ preview_image | image_url: width: 360 }} 360w,{%- endif -%}
                              {%- if preview_image.width >= 533 -%}{{ preview_image | image_url: width: 533 }} 533w,{%- endif -%}
                              {%- if preview_image.width >= 720 -%}{{ preview_image | image_url: width: 720 }} 720w,{%- endif -%}
                              {%- if preview_image.width >= 940 -%}{{ preview_image | image_url: width: 940 }} 940w,{%- endif -%}
                              {%- if preview_image.width >= 1066 -%}{{ preview_image | image_url: width: 1066 }} 1066w,{%- endif -%}
                              {%- if preview_image.width >= 1500 -%}{{ preview_image | image_url: width: 1500 }} 1500w,{%- endif -%}
                              {%- if preview_image.width >= 1780 -%}{{ preview_image | image_url: width: 1780 }} 1780w,{%- endif -%}
                              {%- if preview_image.width >= 2000 -%}{{ preview_image | image_url: width: 2000 }} 2000w,{%- endif -%}
                              {{ preview_image | image_url }} {{ preview_image.width }}w"
                          src="{{ preview_image | image_url: width: 360 }}"
                          sizes="(min-width: {{ settings.container_width }}px) {{ settings.container_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="{{ alt | default: preview_image.alt | escape }}"
                          loading="lazy"
                          class="se-out w-full h-full"
                          width="{{ preview_image.width }}"
                          height="{{ preview_image.height }}"
                          {{ image_attributes }}
                      >
                    </responsive-image>
                  </div>
          
                  {%- if second_image != blank -%}
                    <div class="spc__hover-img">
                      {% comment %} {% render 'responsive-image',
                          image: second_image,
                          aspect_ratio: image_ratio,
                          image_class: 'se-out w-full h-full',
                          image_attributes: image_attributes
                      %} {% endcomment %}
                      {%- capture style -%}
                        {% assign asp_rat = image_ratio | default: second_image.aspect_ratio %}
                        {% if asp_rat == 'original' %}
                          --aspect-ratio: {{ second_image.aspect_ratio }};
                        {% else %}
                          --aspect-ratio: {{ asp_rat }};
                        {% endif %}
                      {%- endcapture -%}
                      <responsive-image class="sf-image" data-image-loading style="{{ style | strip | strip_newlines }}">
                        <img
                            srcset="{%- if second_image.width >= 165 -%}{{ second_image | image_url: width: 165 }} 165w,{%- endif -%}
                                {%- if second_image.width >= 360 -%}{{ second_image | image_url: width: 360 }} 360w,{%- endif -%}
                                {%- if second_image.width >= 533 -%}{{ second_image | image_url: width: 533 }} 533w,{%- endif -%}
                                {%- if second_image.width >= 720 -%}{{ second_image | image_url: width: 720 }} 720w,{%- endif -%}
                                {%- if second_image.width >= 940 -%}{{ second_image | image_url: width: 940 }} 940w,{%- endif -%}
                                {%- if second_image.width >= 1066 -%}{{ second_image | image_url: width: 1066 }} 1066w,{%- endif -%}
                                {%- if second_image.width >= 1500 -%}{{ second_image | image_url: width: 1500 }} 1500w,{%- endif -%}
                                {%- if second_image.width >= 1780 -%}{{ second_image | image_url: width: 1780 }} 1780w,{%- endif -%}
                                {%- if second_image.width >= 2000 -%}{{ second_image | image_url: width: 2000 }} 2000w,{%- endif -%}
                                {{ second_image | image_url }} {{ second_image.width }}w"
                            src="{{ second_image | image_url: width: 360 }}"
                            sizes="(min-width: {{ settings.container_width }}px) {{ settings.container_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="{{ alt | default: second_image.alt | escape }}"
                            loading="lazy"
                            class="se-out w-full h-full"
                            width="{{ second_image.width }}"
                            height="{{ second_image.height }}"
                            {{ image_attributes }}
                        >
                      </responsive-image>
                    </div>
                  {%- endif -%}
                {% else %}
                  {% if pcard_default_image != blank %}
                    {% comment %} {% render 'responsive-image', image: pcard_default_image, aspect_ratio: image_ratio, image_class: 'se-out w-full h-full', image_attributes: image_attributes %} {% endcomment %}
                      {%- capture style -%}
                        {% assign asp_rat = image_ratio | default: pcard_default_image.aspect_ratio %}
                        {% if asp_rat == 'original' %}
                          --aspect-ratio: {{ pcard_default_image.aspect_ratio }};
                        {% else %}
                          --aspect-ratio: {{ asp_rat }};
                        {% endif %}
                      {%- endcapture -%}
                      <responsive-image class="sf-image" data-image-loading style="{{ style | strip | strip_newlines }}">
                        <img
                            srcset="{%- if pcard_default_image.width >= 165 -%}{{ pcard_default_image | image_url: width: 165 }} 165w,{%- endif -%}
                                {%- if pcard_default_image.width >= 360 -%}{{ pcard_default_image | image_url: width: 360 }} 360w,{%- endif -%}
                                {%- if pcard_default_image.width >= 533 -%}{{ pcard_default_image | image_url: width: 533 }} 533w,{%- endif -%}
                                {%- if pcard_default_image.width >= 720 -%}{{ pcard_default_image | image_url: width: 720 }} 720w,{%- endif -%}
                                {%- if pcard_default_image.width >= 940 -%}{{ pcard_default_image | image_url: width: 940 }} 940w,{%- endif -%}
                                {%- if pcard_default_image.width >= 1066 -%}{{ pcard_default_image | image_url: width: 1066 }} 1066w,{%- endif -%}
                                {%- if pcard_default_image.width >= 1500 -%}{{ pcard_default_image | image_url: width: 1500 }} 1500w,{%- endif -%}
                                {%- if pcard_default_image.width >= 1780 -%}{{ pcard_default_image | image_url: width: 1780 }} 1780w,{%- endif -%}
                                {%- if pcard_default_image.width >= 2000 -%}{{ pcard_default_image | image_url: width: 2000 }} 2000w,{%- endif -%}
                                {{ pcard_default_image | image_url }} {{ pcard_default_image.width }}w"
                            src="{{ pcard_default_image | image_url: width: 360 }}"
                            sizes="(min-width: {{ settings.container_width }}px) {{ settings.container_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="{{ alt | default: pcard_default_image.alt | escape }}"
                            loading="lazy"
                            class="se-out w-full h-full"
                            width="{{ pcard_default_image.width }}"
                            height="{{ pcard_default_image.height }}"
                            {{ image_attributes }}
                        >
                      </responsive-image>
                  {% else %}
                    <div style="--aspect-ratio: {{ image_ratio }}">
                      {{ 'product-1' | placeholder_svg_tag }}
                    </div>
                  {% endif %}
                {% endif %}
            </a>
          </div>

          {% liquid
            assign variant = product.selected_or_first_available_variant
            assign compare_at_price = variant.compare_at_price
            assign price = variant.price
          
            assign discount = ''
            assign on_sale = false
            if compare_at_price > price
              assign on_sale = true
              assign discount = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price
            endif
          
            assign show_on_sale_badge = false
            if settings.on_sale_badge != 'hide' and on_sale
              assign show_on_sale_badge = true
            endif
          %}
          
          {%- if settings.show_badge_sale or show_on_sale_badge -%}
            <div class="sf__pcard-tags absolute flex flex-wrap">
              {% if settings.show_badge_sale %}
                {% for tag in product.tags %}
                  {% if tag contains 'tag__' %}
                      {%- liquid 
                          assign tag_content = tag | split: '__' | last
                          assign type = tag_content | split: '_' | first
                          assign tag_name = tag_content | split: '_' | last
                      -%}
                      <span class="py-0.5 px-2 mb-2 mr-2 font-medium rounded-xl text-white prod__tag prod__tag-{{ type }}">
                          {{ tag_name }}
                      </span>
                  {% endif %}
                {% endfor %}
              {% endif %}
              {% if show_on_sale_badge %}
                {%- liquid 
                  if settings.on_sale_badge == 'show_percentage'
                    assign sale_class = 'prod__tag-discounted'
                  else
                    assign sale_class = 'prod__tag-sale'
                  endif
                -%}
                <span class="py-0.5 px-2 mb-2 mr-2 font-medium rounded-xl text-white prod__tag {{ sale_class }}">
                  {%- if settings.on_sale_badge == 'show_text' -%}
                    {{ 'products.product.on_sale' | t }}
                  {%- endif -%}
                  {%- if settings.on_sale_badge == 'show_percentage' -%}
                    {% assign discount = discount | append: '%' %}
                    {% render 'new-locale', key: 'products.product.discounted_price_html', param: '{{ value }}', value: discount %}
                  {%- endif -%}
                </span>
              {% endif %}
            </div>
          {%- endif -%}

          {%- if settings.show_badge_soldout -%}
            <span class="prod__tag prod__tag--soldout" style="display: none;">{{ 'products.product.sold_out' | t }}</span>
          {%- endif -%}
    
          {%- case card_style -%}
            {%- when '2' -%}
              {%- if settings.show_cart_button or settings.show_quickview_button or settings.show_wishlist_button or settings.show_compare_button -%}
                <div class="sf__pcard-action">
                  <div class="sf__pcard-group-action">
                    {% liquid
                      capture is_preorder
                        render 'check-preorder', product: product
                      endcapture
                    
                      assign tooltips = 'add-to-cart,quickview,compare'
                      assign tooltip_items = tooltips | split: ','
                    %}
                    
                    {%- if settings.show_wishlist_button -%}
                      {% assign wishlist_app = settings.wishlist_app %}
                      {% if wishlist_app == 'growave' %}
                        <div class="sf__tooltip-item sf__tooltip-wishlist sf__btn-icon sf__tooltip-style-1 sf__tooltip-top">
                          <span class="sf__tooltip-icon block">
                            {% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
                            {% unless the_snippet_fave_icon contains 'Liquid error' %}
                              {{ the_snippet_fave_icon }}
                            {% else %}
                              {% render 'mm-ssw-widget-faveicon' with product.id %}
                            {% endunless %}
                          </span>
                          <div class="sf__tooltip-content " data-revert-text="">
                            {{ 'products.product.add_to_wishlist' | t }}
                          </div>
                        </div>
                      {% else %}
                        {% render 'tooltip', type: 'wishlist', product: product, class_name: 'sf__tooltip-top' %}
                      {% endif %}
                    {%- endif -%}
                    
                    {% if is_preorder == "true" %}
                      <input type="hidden" name="properties[_{% render 'new-locale', key: 'products.product.preorder_note' %}]" value="true">
                      <input type="hidden" name="properties[_foxDiscount[plugin]]" value="PreOrder">
                      <input type="hidden" name="properties[_foxDiscount[offer_id]]" value="{{ product.metafields.foxkit.preorder.id }}">
                    {% endif %}
                    
                    {%- for tooltip in tooltip_items -%}
                      {%- assign settings_key = 'show_' | append: tooltip | append: '_button' | replace: 'add-to-cart', 'cart' -%}
                      {%- if settings[settings_key] -%}
                        {% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'sf__tooltip-top', is_preorder: is_preorder %}
                      {%- endif -%}
                    {%- endfor -%}
                  </div>
                </div>
              {%- endif -%}
              
            {%- when '3' -%}
              {%- if settings.show_wishlist_button -%}
                <div class="sf__pcard-action-top absolute">
                  {% assign wishlist_app = settings.wishlist_app %}
                  {% if wishlist_app == 'growave' %}
                    <div class="sf__tooltip-item sf__tooltip-wishlist sf__btn-icon sf__tooltip-style-1 sf__tooltip-left">
                      <span class="sf__tooltip-icon block">
                        {% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
                        {% unless the_snippet_fave_icon contains 'Liquid error' %}
                          {{ the_snippet_fave_icon }}
                        {% else %}
                          {% render 'mm-ssw-widget-faveicon' with product.id %}
                        {% endunless %}
                      </span>
                      <div class="sf__tooltip-content " data-revert-text="">
                        {{ 'products.product.add_to_wishlist' | t }}
                      </div>
                    </div>
                  {% else %}
                    {% render 'tooltip', type: 'wishlist', product: product, class_name: 'sf__tooltip-left' %}
                  {% endif %}
                </div>
              {%- endif -%}
              {%- if settings.show_cart_button or settings.show_compare_button or settings.show_quickview_button -%}
                <div class="sf__pcard-action">
                  <div class="sf__pcard-group-action">
                    {% liquid
                      capture is_preorder
                        render 'check-preorder', product: product
                      endcapture
                    
                      assign tooltips = 'add-to-cart,compare,quickview'
                      assign tooltip_items = tooltips | split: ','
                    %}
                    
                    {% if is_preorder == "true" %}
                      <input type="hidden" name="properties[_{% render 'new-locale', key: 'products.product.preorder_note' %}]" value="true">
                      <input type="hidden" name="properties[_foxDiscount[plugin]]" value="PreOrder">
                      <input type="hidden" name="properties[_foxDiscount[offer_id]]" value="{{ product.metafields.foxkit.preorder.id }}">
                    {% endif %}
                    
                    {%- for tooltip in tooltip_items -%}
                      {%- assign settings_key = 'show_' | append: tooltip | append: '_button' | replace: 'add-to-cart', 'cart' -%}
                      {%- if settings[settings_key] -%}
                        {% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'sf__tooltip-top', is_preorder: is_preorder %}
                      {%- endif -%}
                    {%- endfor -%}
                  </div>
                </div>
              {%- endif -%}

            {%- when '4' -%}
              {%- if settings.show_quickview_button or settings.show_wishlist_button or settings.show_compare_button -%}
                <div class="sf__pcard-action">
                  <div class="sf__pcard-group-action">
                    {% liquid
                      capture is_preorder
                        render 'check-preorder', product: product
                      endcapture
                    
                      assign tooltips = 'compare,quickview'
                      assign tooltip_items = tooltips | split: ','
                    %}
                    
                    {%- if settings.show_wishlist_button -%}
                      {% assign wishlist_app = settings.wishlist_app %}
                      {% if wishlist_app == 'growave' %}
                        <div class="sf__tooltip-item sf__tooltip-wishlist sf__btn-icon sf__tooltip-style-1 sf__tooltip-top">
                          <span class="sf__tooltip-icon block">
                            {% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
                            {% unless the_snippet_fave_icon contains 'Liquid error' %}
                              {{ the_snippet_fave_icon }}
                            {% else %}
                              {% render 'mm-ssw-widget-faveicon' with product.id %}
                            {% endunless %}
                          </span>
                          <div class="sf__tooltip-content " data-revert-text="">
                            {{ 'products.product.add_to_wishlist' | t }}
                          </div>
                        </div>
                      {% else %}
                        {% render 'tooltip', type: 'wishlist', product: product, class_name: 'sf__tooltip-top' %}
                      {% endif %}
                    {%- endif -%}
                    
                    {% if is_preorder == "true" %}
                      <input type="hidden" name="properties[_{% render 'new-locale', key: 'products.product.preorder_note' %}]" value="true">
                      <input type="hidden" name="properties[_foxDiscount[plugin]]" value="PreOrder">
                      <input type="hidden" name="properties[_foxDiscount[offer_id]]" value="{{ product.metafields.foxkit.preorder.id }}">
                    {% endif %}
                    
                    {%- for tooltip in tooltip_items -%}
                      {%- assign settings_key = 'show_' | append: tooltip | append: '_button' | replace: 'add-to-cart', 'cart' -%}
                      {%- if settings[settings_key] -%}
                        {% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'sf__tooltip-top', is_preorder: is_preorder %}
                      {%- endif -%}
                    {%- endfor -%}
                  </div>
                </div>
              {%- endif -%}

            {%- else -%}
              {%- if settings.show_quickview_button or settings.show_wishlist_button or settings.show_compare_button -%}
                <div class="sf__pcard-action hidden md:block z-10">
                  {% liquid
                    capture is_preorder
                      render 'check-preorder', product: product
                    endcapture
                  
                    assign tooltips = 'compare,quickview'
                    assign tooltip_items = tooltips | split: ','
                  %}
                  
                  {%- if settings.show_wishlist_button -%}
                    {% assign wishlist_app = settings.wishlist_app %}
                    {% if wishlist_app == 'growave' %}
                      <div class="sf__tooltip-item sf__tooltip-wishlist sf__btn-icon sf__tooltip-style-1 sf__tooltip-left">
                        <span class="sf__tooltip-icon block">
                          {% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
                          {% unless the_snippet_fave_icon contains 'Liquid error' %}
                            {{ the_snippet_fave_icon }}
                          {% else %}
                            {% render 'mm-ssw-widget-faveicon' with product.id %}
                          {% endunless %}
                        </span>
                        <div class="sf__tooltip-content " data-revert-text="">
                          {{ 'products.product.add_to_wishlist' | t }}
                        </div>
                      </div>
                    {% else %}
                      {% render 'tooltip', type: 'wishlist', product: product, class_name: 'sf__tooltip-left' %}
                    {% endif %}
                  {%- endif -%}
                  
                  {% if is_preorder == "true" %}
                    <input type="hidden" name="properties[_{% render 'new-locale', key: 'products.product.preorder_note' %}]" value="true">
                    <input type="hidden" name="properties[_foxDiscount[plugin]]" value="PreOrder">
                    <input type="hidden" name="properties[_foxDiscount[offer_id]]" value="{{ product.metafields.foxkit.preorder.id }}">
                  {% endif %}
                  
                  {%- for tooltip in tooltip_items -%}
                    {%- assign settings_key = 'show_' | append: tooltip | append: '_button' | replace: 'add-to-cart', 'cart' -%}
                    {%- if settings[settings_key] -%}
                      {% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'sf__tooltip-left', is_preorder: is_preorder %}
                    {%- endif -%}
                  {%- endfor -%}
                </div>
              {%- endif -%}
          {%- endcase -%}
    
          {% render 'product-card-countdown', product: product %} 
       
          {%- if sold_out == false and card_style == '1' -%}
              {% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section %}
            {% endif %}   
        </div>
      </div>
   
      <div class="sf__pcard-content text-{{ settings.pcard_alignment }}">
        <div class="mt-3 lg:mt-5">
          <div class="max-w-full w-full">
            {%- if show_vendor -%}
              <span class="sf__pcard-vendor block uppercase text-xs mb-2">{{ product.vendor }}</span>
            {%- endif -%}
            {% if show_title == true %}
              <h3 class="block text-base">
                <a href="{{ product.url }}" class="block mb-[5px] leading-normal sf__pcard-name font-medium truncate-lines hover:text-color-secondary{% if settings.uppercase_prd_name %} uppercase{% endif %}">
                  {{ product.title }}
                </a>
              </h3>
            {% endif %}
            {% if settings.show_review_badge %}
              <div class="sf-pcard__reviews">
                {% render 'product-reviews-app__badge', product: product %}
              </div>
            {% endif %}
          </div>
        <div class="AirReviews-Widget AirReviews-Widget--Stars" data-review-avg="{{ product.metafields.air_reviews_product.review_avg }}" data-review-count="{{ product.metafields.air_reviews_product.review_count }}"></div>
          
          <div class="sf__pcard-price leading-normal">
            {% render 'product-prices', product: product, is_product_card: true %}
          </div>
          {% if settings.show_swatch_option %}
            {% render 'product-card-option', product: product %}
          {% endif %}
        </div>
    
        {%- if sold_out == false and settings.show_cart_button and card_style == '4' -%}
          <div class="sf__pcard-action-atc flex justify-center">
            {% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section %}
          </div>
        {%- endif -%}
    
        <div class="content-view-list mt-5 hidden">
          <div class="leading-7 text-color-secondary mb-4">
            {{ product.description | strip_html | truncatewords: 15, '...' }}
          </div>
          <div class="flex items-start">
            {%- if settings.show_cart_button -%}
              {%- if product.has_only_default_variant -%}
                {% render 'product-atc', product: product, btn_text: quick_add_text, class: 'sf__btn-primary' %}
              {% else %}
                {% if settings.select_option_button_action == 'popup' %}
                  <button class="sf-pqv__button quick-add sf__btn sf__btn-primary" data-product-handle="{{ product.handle }}">
                    <span>{{ quick_add_text }}</span>
                  </button>
                {% else %}
                  <a class="sf__btn sf__btn-primary" href="{{ product.url }}">
                    <span>{{ quick_add_text }}</span>
                  </a>
                {% endif %}
              {% endif %}
            {%- endif -%}
            <div class="grid grid-cols-3 gap-2.5 ml-2.5">
              {% liquid
                capture is_preorder
                  render 'check-preorder', product: product
                endcapture
              
                assign tooltips = 'compare,quickview'
                assign tooltip_items = tooltips | split: ','
              %}
              
              {%- if settings.show_wishlist_button and card_style != "3" -%}
                {% assign wishlist_app = settings.wishlist_app %}
                {% if wishlist_app == 'growave' %}
                  <div class="sf__tooltip-item sf__tooltip-wishlist sf__btn-icon sf__tooltip-style-1 sf__tooltip-bottom">
                    <span class="sf__tooltip-icon block">
                      {% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %}
                      {% unless the_snippet_fave_icon contains 'Liquid error' %}
                        {{ the_snippet_fave_icon }}
                      {% else %}
                        {% render 'mm-ssw-widget-faveicon' with product.id %}
                      {% endunless %}
                    </span>
                    <div class="sf__tooltip-content " data-revert-text="">
                      {{ 'products.product.add_to_wishlist' | t }}
                    </div>
                  </div>
                {% else %}
                  {% render 'tooltip', type: 'wishlist', product: product, class_name: 'sf__tooltip-bottom' %}
                {% endif %}
              {%- endif -%}
              
              {% if is_preorder == "true" %}
                <input type="hidden" name="properties[_{% render 'new-locale', key: 'products.product.preorder_note' %}]" value="true">
                <input type="hidden" name="properties[_foxDiscount[plugin]]" value="PreOrder">
                <input type="hidden" name="properties[_foxDiscount[offer_id]]" value="{{ product.metafields.foxkit.preorder.id }}">
              {% endif %}
              
              {%- for tooltip in tooltip_items -%}
                {%- assign settings_key = 'show_' | append: tooltip | append: '_button' | replace: 'add-to-cart', 'cart' -%}
                {%- if settings[settings_key] -%}
                  {% render 'tooltip', type: tooltip, section: section, product: product, class_name: 'sf__tooltip-bottom', is_preorder: is_preorder %}
                {%- endif -%}
              {%- endfor -%}
            </div>
          </div>
        </div>
      </div>
    {%- if card_style == '2' or card_style == '3' -%}<div class='background-color-expand'></div>{%- endif -%}

  </div> <!-- .sf__pcard -->
{%- if column_wrapper -%}</div><!-- .sf-column -->{%- endif -%}