How to display a line of custom text on all products with variants on the collection grid page

[Kim26]

We want to display a line of text on the collection grid page for products with variants only, that says "More Options Available".

For instance, this is a collection page : https://nestinghouse.com/collections/gliders-rockers and this product, on the bottom of the page,  has many variants: https://nestinghouse.com/collections/gliders-rockers/products/grano-glider-recliner. So the text "More Options Available" would show on the collection page directly under the title of the product, in this case, Grano Glider Recliner.

I just need the correct file to use and the correct code.

Then  I would like to style it using CSS or directly.

[tim]

The liquid code should be  pretty simple:

{% if product.variants.size > 1 %}
  <span class="more-available">More options available</span>
{% endif %}

However, thee are 2 question which would require a look at your paid theme code:

1. Where exactly to put it. Say, in Dawn I'd be looking at the snippets/card-product.liquid

2. Whether the variable name is product. It usually is, but say, Dawn uses card_product in the snippet I've already mentioned...

[Kim26]

Thank you for your reply. The theme we are using is "Local". How do figure out which file, snippets or sections? Isn't there a way to ask the theme developer or Shopify since we paid for it?

[tim · Accepted solution]

I know it's Local. I doubt Shopify will do it. You can reach out to theme devs, but...

Also look here https://shopify-support.krownthemes.com/article/805-collection-page   -- maybe you would be able to do it without code edits...

Generally, you should start in Sections, look for something like product-grid.liquid.

Say, for Dawn the section file is sections/main-collection-product-grid.liquid.

There, you need to  look for code like:

https://github.com/Shopify/dawn/blob/release/15.2.0/sections/main-collection-product-grid.liquid#L15... 

{%- for product in collection.products -%}
  ...
    {% render 'card-product', card_product: product, ... %}
  ...
{%- endfor -%}

This will give you the name of the snippet, and a variable name as well.

Then you need to go to snippets/card-product.liquid and then find a place to put the code...

For Dawn it somewhere here:

https://github.com/Shopify/dawn/blob/release/15.2.0/snippets/card-product.liquid#L111-L125 

Around this code:

  {{ card_product.title | escape }}

This is how I would approach this task, sorry, can't be more specific without seeing your theme code.

[Kim26]

This worked, thank you! However one more question: There is a trailing ">" in the code and I'm not sure how to place the code snippet better to get rid of it: "raznovdesigns.com/error.jpg"

And here is how it looks on the live site: "https://nestinghouse.com/collections/gliders-rockers". 

[tim]

You've put your code inside opening a tag (which is not good -- invalid HTML). This is what I see:

<a class="product-item__title" 
     href="/collections/gliders-rockers/products/jackson-rocker"
     title="Jackson Rocker" 
     <span class="more-available" style="font-size:14px;"><em>more options available</em></span>
>

 While it should be

<a class="product-item__title" 
     href="/collections/gliders-rockers/products/jackson-rocker"
     title="Jackson Rocker"
>
     <span class="more-available" style="font-size:14px;"><em>more options available</em></span>

So, looking at your screenshot, lines 101-104 should be below line 106.

[Kim26]

Thank you, I see how that's wrong on the front end, but I'm not sure how to change the code I have in liquid to be correct and maybe it's ultimately in the wrong place in the "Local" theme. Right now I have it in snippets/product-item.liquid and it does show correctly,  only when there are variants associated with a product, but again, there is the trailing >

<div class="card__text product-item__text gutter--regular spacing--xlarge remove-empty-space text-align--{{ settings.product_card_text_alignment }}">
    {%- for block in section_blocks -%}
      {%- case block.type %}

        {%- when 'title' -%}
          <a class="product-item__title" 
            href="{{ product_url }}" title="{{ product.title | escape }}" 
            {% if product.variants.size > 1 %}
                  {% comment %} Kim: added code to show copy below on product grid page only, above title  {% endcomment %}  
                 <span class="more-available" style="font-size:14px;"><em>more options available</em></span>
{% endif %}
            {{ block.shopify_attributes }}
          >

[tim]

it should rather be:

<div class="card__text product-item__text gutter--regular spacing--xlarge remove-empty-space text-align--{{ settings.product_card_text_alignment }}">
  {%- for block in section_blocks -%}
    {%- case block.type %}
      {%- when 'title' -%}
        <a class="product-item__title" 
          href="{{ product_url }}" title="{{ product.title | escape }}" 
          {{ block.shopify_attributes }}
        >
          {% if product.variants.size > 1 %}
            {% comment %} Kim: added code to show copy below on product grid page only, above title  {% endcomment %}  
            <span class="more-available" style="font-size:14px;"><em>more options available</em></span>
          {% endif %}

[Kim26]

That worked, I understand now, thank you!

[Zel_Minimate]

Hello @Kim26 ,

Basically, what you're trying to do — showing a message like “More Options Available” under certain products on the collection page — is may possible with some custom coding. But if you're open to a no-code alternative, I wanted to share an option that might help.

With our  Hey!Scarcity Low Stock Counter  app, you can add a custom message to products on the collection page. While it’s designed for low stock alerts, many merchants use it to show other types of messages too. You can fully customize the text and even hide the stock number, so the message can say whatever you like — including something like “More Options Available.”

Here’s an example how it looks in your store with the message you wan to display:

It may not be a perfect match for what you described, but it’s a simple, no-code way to highlight specific products.

Hope it helps! Let me know if you’d like more info or help setting it up.

Best,
Zel