Show Product Size Under Product Image - Theme Stiletto

[LaBradFranc]

I wish to show the product size under the respective product image and price on the products page. How do I go about that? I want something similar to what marketplace.mainstreet.co.in has.

[EBOOST]

Hi @LaBradFranc

Could you please show the content of snippets/card-product.liquid or snippets/product-grid-item.liquid?

you can Go to Store Online-> theme → edit code to find file

We will help take a look liquid code after that suggest for you.

EBOOST

[LaBradFranc]

Thanks @EBOOST ! Yes of course, here is the content of snippets/product-item.liquid :

{% comment %}
pass in :

* prod (product but avoiding collision with globally scoped product)

{% endcomment %}
{%- liquid
  assign show_multiple_images = false
  if settings.product_listing_show_second_image_on_hover and prod.media.size > 1
    assign show_multiple_images = true
  endif

  assign current_variant = prod.selected_or_first_available_variant

  assign sizes = "(max-width: 720px) calc((90vw - 12px) / 2), (max-width: 1400px) calc((93.4vw - (12px * 3)) / 4), 304px"
  assign has_hover_swatches = false
-%}

{% if settings.enable_product_card_swatches %}
  {% capture first_swatchified_option %}{%- render "get-first-swatchified-option" with prod: prod -%}{%- endcapture -%}

  {% capture displayed_swatch_count %}{% render "get-variant-count-for-option" with prod: prod, option_name: first_swatchified_option %}{% endcapture %}
  {% assign displayed_swatch_count = displayed_swatch_count | plus: 0 %}

  {% if displayed_swatch_count != 0 %}
    {% assign has_hover_swatches = true %}
  {% endif %}
{% endif %}

  

    

      
        {%- if show_multiple_images -%}
          {% render 'image' with
            image: prod.media[0].preview_image,
            wrapper_class: 'product-item__image product-item__image--one',
            aspect_ratio: settings.product_listing_aspect_ratio,
            object_fit: settings.product_listing_media_fit
            include_placeholder: true,
            sizes: sizes
            src_set_type: "grid"
          %}
          {% render 'image' with
            image: prod.media[1].preview_image,
            wrapper_class: 'product-item__image product-item__image--two',
            aspect_ratio: settings.product_listing_aspect_ratio,
            object_fit: settings.product_listing_media_fit
            include_placeholder: true,
            sizes: sizes,
            no_lazy_load: true,
            src_set_type: "grid"
          %}
        {%- else -%}
          {% render 'image' with
            image: prod.featured_media,
            wrapper_class: 'product-item__image',
            aspect_ratio: settings.product_listing_aspect_ratio,
            object_fit: settings.product_listing_media_fit,
            include_placeholder: true
            include_placeholder: true,
            sizes: sizes
            src_set_type: "grid"
          %}
        {%- endif -%}
      
      {% unless placeholder %}
        {%- render 'product-badges'
          with prod: prod,
          show_sale_badge: settings.product_listing_show_sale_badge,
          show_custom_badges: settings.product_listing_show_custom_badges,
          show_sold_out_badge: settings.product_listing_show_sold_out_badge
        -%}
      {% endunless %}

      {% if settings.enable_quick_view and quick_view_is_beneath != true %}
        

          
        

      {% endif %}

      {% if settings.enable_quick_view %}
        
      {% endif %}
    

    
      

        #### 
          {%- if placeholder -%}
            {{ 'homepage.onboarding.product_title' | t }}
          {%- else -%}
            {{ prod.title }}
          {%- endif -%}
        

        {% if settings.product_listing_show_vendor and prod.vendor %}
          ##### 
            {{ prod.vendor }}
          
        {% endif %}
        
        

          {% if placeholder %}
            {{ 9999 | money }}

          {% elsif prod.compare_at_price > prod.price %}
            {{ 'products.product.regular_price' | t }}
            ~~{{ prod.compare_at_price | money }}~~

            {% if prod.price_varies %}
              {%- assign sale_price = prod.price | money -%}
              {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
            {% else %}
              {{ prod.price | money }}
            {% endif %}

          {% else %}
            {% if prod.price_varies %}
              {%- assign price = prod.price | money -%}
              {{ 'products.product.from_lowest_price_html' | t: lowest_price: price }}
            {% else %}
              {{ prod.price | money }}
            {% endif %}

          {% endif %}

          {% if settings.product_listing_show_discount %}
            
              {%- render "get-display-discount"
                with prod: prod,
                format: settings.product_listing_discount_format -%}
            
          {% endif %}

          {% render 'unit-price' item: current_variant %}
        

        {% if has_hover_swatches %}
          ##### 
            {{ 'products.product.swatch_count' | t : count: displayed_swatch_count }}
          
        {% endif %}
      

      {%- if has_hover_swatches -%}
        
          {%- render 'product-item-swatches' with prod: prod, option_name: first_swatchified_option -%}
        

      {%- endif -%}

      {%- if settings.enable_quick_view and quick_view_is_beneath -%}
        
      {%- endif -%}

    

    

  

[EBOOST]

Hi @LaBradFranc

I checked this code. We need update 2 files to show size. This theme is showing colors swatches instead size.

1. snippets/get-first-swatchified-option.liquid file

2.snippets/get-variant-count-for-optionliquid file.

Could you please give me content of these files? I will help update code.

EBOOST

[LaBradFranc]

No pb.

Snippets/get-first-swatchified-option.liquid :

{% comment %}
  pass in :

  * prod (product)
{% endcomment %}

{%- liquid
  assign swatch_options = settings.swatch_options | downcase | split: ', '

  assign found_option = blank

  for option in prod.options_with_values
    assign option_name = option.name | downcase
    for swatch_option in swatch_options
      assign swatch_option = swatch_option | downcase
      if swatch_option == option_name
        assign found_option = option_name
        break
      endif
    endfor
    if found_option != blank
      break
    endif
  endfor
-%}
{{- found_option | strip_newlines -}}

And Snippets/get-variant-count-for-option.liquid :

{% comment %}
  pass in :

  * prod (product)
  * option_name - option name to get count of
{% endcomment %}

{%- liquid
  assign option_name = option_name | downcase | strip_newlines

  assign count = 0

  for product_option in prod.options_with_values
    assign product_option_name = product_option.name | downcase
      if product_option_name == option_name
        assign count = product_option.values.size
        break
      endif
  endfor
-%}
{{ count }}

[EBOOST]

Hi @LaBradFranc

I saw this code

assign swatch_options = settings.swatch_options | downcase | split: ', '

So you only go to Theme → Customize->Setting → find swatch options after that replace color to size.

• In case that you can’t find out this setting after you can copy code below for Snippets/get-first-swatchified-option.liquid *

{% comment %}
  pass in :

  * prod (product)
{% endcomment %}

{%- liquid
  assign swatch_options_name = 'Size'
  assign swatch_options = swatch_options_name | downcase | split: ', '

  assign found_option = blank

  for option in prod.options_with_values
    assign option_name = option.name | downcase
    for swatch_option in swatch_options
      assign swatch_option = swatch_option | downcase
      if swatch_option == option_name
        assign found_option = option_name
        break
      endif
    endfor
    if found_option != blank
      break
    endif
  endfor
-%}
{{- found_option | strip_newlines -}}

Hope can help

If you find my reply helpful, please hit Like and Mark as Solution

EBOOST

[LaBradFranc]

I tried both solutions but it doesn’t work. It seems that the size parameter is not taken into account. Here is what appears instead:

I did choose the size parameter and not the color parameter…

[LaBradFranc]

And this is what happens in the product page when I change your setting. The sizes disappear (picture 1). Before without changing (picture 2)

[EBOOST]

Hi @LaBradFranc

I checked their document: https://fluorescent.co/help/stiletto/swatches.

You need upload image as well

If you only would like to show text that don’t need upload image. You need update code for Snippets/product-item-swatches.liquid. Could you give me content this file?

[LaBradFranc]

Yes I would just like a text that displays the sizes like on these two pictures:

Here is Snippets/product-item-swatches.liquid :

{% comment %}
  pass in :

  * prod (product but avoiding collision with globally scoped product)
  * option_name - option to display as swatch (https://fluorescent.slack.com/archives/C02TP2RQXT2/p1652135541914079?thread_ts=1652135120.919689&cid=C02TP2RQXT2)
  * max_shown (optional)
{% endcomment %}

{%- liquid
  assign file_extension = 'png'
  assign swatch_options = settings.swatch_options | downcase | split: ', '
  assign max_items = 5
  assign option_name = option_name | downcase | strip_newlines
-%}

{%- unless prod.has_only_default_variant -%}
  
    {%- for product_option in prod.options_with_values -%}
      {% assign product_option_name = product_option.name | downcase %}

      {% if product_option_name == option_name %}
        {%- liquid
          assign overflows = false

          if product_option.values.size > max_items
            assign overflows = true
            assign overflow_amount = product_option.values.size | minus: max_items
          endif
        -%}

        

          {%- for value in product_option.values -%}
            {% if forloop.index <= max_items %}
              - 

            {% endif %}
          {%- endfor -%}
          {% if overflows %}
            - +{{ overflow_amount }} more
          {% endif %}
        

      {% endif %}
    {%- endfor -%}
  

{%- endunless -%}

[EBOOST]

Hi @LaBradFranc

You can try to code below:

{% comment %}
  pass in :

  * prod (product but avoiding collision with globally scoped product)
  * option_name - option to display as swatch (https://fluorescent.slack.com/archives/C02TP2RQXT2/p1652135541914079?thread_ts=1652135120.919689&cid=C02TP2RQXT2)
  * max_shown (optional)
{% endcomment %}

{%- liquid
  assign file_extension = 'png'
  assign swatch_options = settings.swatch_options | downcase | split: ', '
  assign max_items = 100
  assign option_name = option_name | downcase | strip_newlines
-%}

{%- unless prod.has_only_default_variant -%}
  
    {%- for product_option in prod.options_with_values -%}
      {% assign product_option_name = product_option.name | downcase %}

      {% if product_option_name == option_name %}
        {%- liquid
          assign overflows = false

          if product_option.values.size > max_items
            assign overflows = true
            assign overflow_amount = product_option.values.size | minus: max_items
          endif
        -%}

        

          {%- for value in product_option.values -%}
            {% if forloop.index <= max_items %}
              - {%- if product_option_name == 'size' or product_option_name == 'taille' -%}
                    {{- value -}}
                  {%-  endif -%}
              

            {% endif %}
          {%- endfor -%}
          {% if overflows %}
            - +{{ overflow_amount }} more
          {% endif %}
        

      {% endif %}
    {%- endfor -%}
  

{%- endunless -%}

[Emma891]

Hi EBOOST,

I’ve been following along and tried adding these changes to my stiletto store, unfortunately it is now quite right. The swatches over lap each other and they are very small words. Is there any way to fix this?

I’m a novice on Shopify and computers in general. Would love some help please

[EBOOST]

Hi @Emma891

Could you share your url store and password?

[LaBradFranc]

Thanks for continuing to help me @EBOOST , we are almost there! Your code creates 3 problems to correct:

1. The sizes are coming out of the square (picture 1)

2. There is a slight naming problem. To designate the number of sizes available, it is the number of colors that appears (for example on picture 1, there are “2 sizes” available, however it is marked “2 colors”). If possible, I would not like to display this line anymore, it is not useful information for the consumer.

3. In the product page, the sizes don’t appear in the square like before (picture 2)

[Emma891]

Thanks EBOOST.

Can i add you as a staff member?

[Emma891]

Can i add you as a staff member to my store please?

[EBOOST]

Hi @Emma891

Yes. Possible

[EBOOST]

Hi @LaBradFranc

Could you share your url store and password? We need add CSS. I need check to add CSS. If I give you a suggestion now.Maybe It will be broken layout.

[LaBradFranc]

Yes of course. Url : https://labraderiefrancaise.com/ & password : mathis.

[EBOOST]

Hi @LaBradFranc

You can follow these code below

1. snippets/product-item.liquid

{% comment %}
pass in :

* prod (product but avoiding collision with globally scoped product)

{% endcomment %}
{%- liquid
  assign show_multiple_images = false
  if settings.product_listing_show_second_image_on_hover and prod.media.size > 1
    assign show_multiple_images = true
  endif

  assign current_variant = prod.selected_or_first_available_variant

  assign sizes = "(max-width: 720px) calc((90vw - 12px) / 2), (max-width: 1400px) calc((93.4vw - (12px * 3)) / 4), 304px"
  assign has_hover_swatches = false
-%}

{% if settings.enable_product_card_swatches %}
  {% capture first_swatchified_option %}{%- render "get-first-swatchified-option" with prod: prod -%}{%- endcapture -%}

  {% capture displayed_swatch_count %}{% render "get-variant-count-for-option" with prod: prod, option_name: first_swatchified_option %}{% endcapture %}
  {% assign displayed_swatch_count = displayed_swatch_count | plus: 0 %}

  {% if displayed_swatch_count != 0 %}
    {% assign has_hover_swatches = true %}
  {% endif %}
{% endif %}

  

    

      
        {%- if show_multiple_images -%}
          {% render 'image' with
            image: prod.media[0].preview_image,
            wrapper_class: 'product-item__image product-item__image--one',
            aspect_ratio: settings.product_listing_aspect_ratio,
            object_fit: settings.product_listing_media_fit
            include_placeholder: true,
            sizes: sizes
            src_set_type: "grid"
          %}
          {% render 'image' with
            image: prod.media[1].preview_image,
            wrapper_class: 'product-item__image product-item__image--two',
            aspect_ratio: settings.product_listing_aspect_ratio,
            object_fit: settings.product_listing_media_fit
            include_placeholder: true,
            sizes: sizes,
            no_lazy_load: true,
            src_set_type: "grid"
          %}
        {%- else -%}
          {% render 'image' with
            image: prod.featured_media,
            wrapper_class: 'product-item__image',
            aspect_ratio: settings.product_listing_aspect_ratio,
            object_fit: settings.product_listing_media_fit,
            include_placeholder: true
            include_placeholder: true,
            sizes: sizes
            src_set_type: "grid"
          %}
        {%- endif -%}
      
      {% unless placeholder %}
        {%- render 'product-badges'
          with prod: prod,
          show_sale_badge: settings.product_listing_show_sale_badge,
          show_custom_badges: settings.product_listing_show_custom_badges,
          show_sold_out_badge: settings.product_listing_show_sold_out_badge
        -%}
      {% endunless %}

      {% if settings.enable_quick_view and quick_view_is_beneath != true %}
        

          
        

      {% endif %}

      {% if settings.enable_quick_view %}
        
      {% endif %}
    

    
      

        #### 
          {%- if placeholder -%}
            {{ 'homepage.onboarding.product_title' | t }}
          {%- else -%}
            {{ prod.title }}
          {%- endif -%}
        

        {% if settings.product_listing_show_vendor and prod.vendor %}
          ##### 
            {{ prod.vendor }}
          
        {% endif %}
        
        

          {% if placeholder %}
            {{ 9999 | money }}

          {% elsif prod.compare_at_price > prod.price %}
            {{ 'products.product.regular_price' | t }}
            ~~{{ prod.compare_at_price | money }}~~

            {% if prod.price_varies %}
              {%- assign sale_price = prod.price | money -%}
              {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
            {% else %}
              {{ prod.price | money }}
            {% endif %}

          {% else %}
            {% if prod.price_varies %}
              {%- assign price = prod.price | money -%}
              {{ 'products.product.from_lowest_price_html' | t: lowest_price: price }}
            {% else %}
              {{ prod.price | money }}
            {% endif %}

          {% endif %}

          {% if settings.product_listing_show_discount %}
            
              {%- render "get-display-discount"
                with prod: prod,
                format: settings.product_listing_discount_format -%}
            
          {% endif %}

          {% render 'unit-price' item: current_variant %}
        

      

      {%- if has_hover_swatches -%}
        
          {%- render 'product-item-swatches' with prod: prod, option_name: first_swatchified_option -%}
        

      {%- endif -%}

      {%- if settings.enable_quick_view and quick_view_is_beneath -%}
        
      {%- endif -%}

    

    

  

2. Snippets/get-first-swatchified-option.liquid

{% comment %}
  pass in :

  * prod (product)
{% endcomment %}

{%- liquid
  assign swatch_options_name = 'Color, Taille, Size'
  assign swatch_options = swatch_options_name | downcase | split: ', '

  assign found_option = blank

  for option in prod.options_with_values
    assign option_name = option.name | downcase
    for swatch_option in swatch_options
      assign swatch_option = swatch_option | downcase
      if swatch_option == option_name
        assign found_option = option_name
        break
      endif
    endfor
    if found_option != blank
      break
    endif
  endfor
-%}
{{- found_option | strip_newlines -}}

3. Snippets/product-item-swatches.liquid

{% comment %}
  pass in :

  * prod (product but avoiding collision with globally scoped product)
  * option_name - option to display as swatch (https://fluorescent.slack.com/archives/C02TP2RQXT2/p1652135541914079?thread_ts=1652135120.919689&cid=C02TP2RQXT2)
  * max_shown (optional)
{% endcomment %}

{%- liquid
  assign file_extension = 'png'
  assign swatch_options = settings.swatch_options | downcase | split: ', '
  assign max_items = 100
  assign option_name = option_name | downcase | strip_newlines
-%}

{%- unless prod.has_only_default_variant -%}
  
    {%- for product_option in prod.options_with_values -%}
      {% assign product_option_name = product_option.name | downcase %}

      {% if product_option_name == option_name %}
        {%- liquid
          assign overflows = false

          if product_option.values.size > max_items
            assign overflows = true
            assign overflow_amount = product_option.values.size | minus: max_items
          endif
        -%}

        

          {%- for value in product_option.values -%}
            {% if forloop.index <= max_items %}
              - {%- if product_option_name == 'size' or product_option_name == 'taille' -%}
                    {{- value -}}
                  {%-  endif -%}
              

            {% endif %}
          {%- endfor -%}
          {% if overflows %}
            - +{{ overflow_amount }} more
          {% endif %}
        

      {% endif %}
    {%- endfor -%}
  

{%- endunless -%}

4. Don’t update the setting in the customize → this one to keep original on PDP