How can I dynamically change the variant dropdowns into buttons if there are 4 items or less

Technical Q&A
1

How can I dynamically change the variant drop-downs into buttons if there are 4 items or less in the dropdown list ?

Attached is my product_main.liquid code

https://auchterlonies-com.myshopify.com/

paswd: awskob

All help appreciated

{% comment %}
** Product - main content area **
- Product template
{% endcomment %}

{% assign id = section.id %}
{% comment %} Layout {% endcomment %}
{% assign width = section.settings.width %}
{% assign padding_top = section.settings.padding_top %}
{% assign padding_bottom = section.settings.padding_bottom %}
{% comment %} Advanced {% endcomment %}
{% assign css_class = section.settings.css_class %}
{% assign custom_css = section.settings.custom_css %}

{% comment %} Section specific CSS {% endcomment %}
{% style %}
  .section__wrapper {
    padding-top: {{ padding_top }}px;
    padding-bottom: {{ padding_bottom }}px;
  }

span.flex-style {
    display: flex;
}

  .section--has-sidebar-option.has-sidebar-enabled {
    {% if width == 'wide' -%}
      width: 100%;
      max-width: 95%;
    {%- endif %}
  }

  .section--has-sidebar-option.has-sidebar-disabled {
    width: 100%;
    max-width: none;
  }

  {% if section.settings.product_breadcrumb == false %}
    .breadcrumb__container {
      display: none;
    }

  {% endif %}

  {% render 'css-loop',
          css: custom_css,
          id: id
  %}
{% endstyle %}

{% assign collection_handles = product.collections | map: 'handle' %}
{% assign variant = product.selected_or_first_available_variant %}
{% assign product_tags = product.tags | join: ' ' %}

{% render 'product__structured-data' %}

{% comment %} HTML markup {% endcomment %}

{% comment %} JavaScript {% endcomment %}

![Screen Shot 2021-05-26 at 14.11.28.png|1241x641](upload://gYhumjrCltAobyxXmwzy8dDqzEp.png)
2

Hi RobMoore007,

You should send the code of the “product__form” file instead of the current code, i will check it.

3

Hi, Im afraid I dont see this file ? Could it be called something else?

Is a section or a template ?

4

Hi RobMoore007,

It’s in the snippets folder, you can find it there.

5

Here you go

{% if show_payment_button == true %}
  {% assign show_payment_button = true %}
{% else %}
  {% assign show_payment_button = false %}
{% endif %}

{% assign variant = product.selected_or_first_available_variant %}

  {% form 'product', product %}

  {% if product.variants.size > 1 %}
    {% if product.options.size > 1 %}
      

          {% if context == 'quickshop' %}
            

          {% endif %}
          
          {% if context == 'quickshop' %}
            

          {% endif %}
      

    {% elsif product.options.size == 1 and product.variants.size > 1 or product.options.size == 1 and product.options[0] != "Title" %}
      
        
        

          {% if context == 'quickshop' %}
            

          {% endif %}
          
          {% if context == 'quickshop' %}
            

          {% endif %}
        

      

    {% endif %}
  {% else %}
    
  {% endif %}

  {% if product.variants.size > 1 %}
    {% if settings.product_form_style == "swatches" and product.variants.size > 1 or settings.product_form_style == "swatches" and product.options[0] != "Title" %}
      

        {% for option in product.options %}
          {% render 'product__swatch',
                  product: product,
                  option: option
          %}
        {% endfor %}
      

    {% endif %}
  {% endif %}
                    
  {% if product.available %}
    {% if settings.display_inventory_left %}
      

        {% if variant.inventory_management != blank and variant.inventory_quantity > 0 %}
          {% capture items_left_text %}
            {% if variant.inventory_quantity == 1 %}
              {{ 'products.product.items_left_count.one' | t }}
            {% else %}
              {{ 'products.product.items_left_count.other' | t }}
            {% endif %}
          {% endcapture %}
          {% if variant.inventory_quantity <= settings.inventory_threshold %}
            {{ variant.inventory_quantity }} {{ items_left_text }}
          {% endif %}
        {% endif %}
      

    {% endif %}
  
  

  
             {% render 'booking-form' %}

    

      {% if settings.display_product_quantity %}
        

          {% render 'quantity-box' %}
        

      {% endif %}
      {% comment %} Error message for add to cart action {% endcomment %}
      

      
        {% if settings.cart_action == 'reload_page' %}
          
        {% elsif settings.cart_action == 'redirect_cart' %}
          
        {% endif %}

        {% capture add_to_cart_label %}{% if collection_handles contains 'pre-order' %}{{ 'collections.general.pre_order' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endif %}{% endcapture %}
        
        {% if show_payment_button %}
          {{ form | payment_button }}
        {% endif %}
      

    

  {% endif %}
{% endform %}
6

Hi RobMoore007,

I checked the code and you need to change a lot of things. Because your code currently doesn’t support displaying swatch, it is very necessary to do what you want.

Refer https://community.shopify.com/c/Shopify-Design/Product-pages-Add-color-swatches-to-products/td-p/616427

After you successfully added the swatch, it will be easier to fulfill your request.

Hope it clear to you.

7

Hi and thanks.. Im using the FLEX theme by Out Of The Sandbox.. Does this affect what I need to do next ?

8

Hi RobMoore007,

If you are using this theme i think they will have support and you can do it. Simplest, you can contact them, i think they will change it quickly.

Hope it clear to you.

Thanks you.