Remove only size variant from collection page

Highlighted
New Member
4 0 0

Hello, how is everyone?

On my store, I have two types of products, products that only have a size variant and products that have both size and color variants. What I am trying to do is remove the size variant from all the products on the collection pages. I have managed to achieve that for the products that have both size and color by showing only the first variant on the collection page, but for the products that only have size, it is still there. I have added the product-get-options.liquid file below

{%- unless product.has_only_default_variant -%}
    {%- assign options_type_circle_color = settings.product_options_type_circle_color | escape | downcase | split: '|' -%}
    {%- assign options_type_circle_image = settings.product_options_type_circle_image | escape | downcase | split: '|' -%}
    {%- assign options_type_square_image = settings.product_options_type_square_image | escape | downcase | split: '|' -%}
    {%- assign options_type_square_color = settings.product_options_type_square_color | escape | downcase | split: '|' -%}
    {%- assign options_type_select = settings.product_options_type_select | escape | downcase | split: '|' -%}
    {%- assign options_type_large_text = settings.product_options_type_large_text | escape | downcase | split: '|' -%}
    {%- assign options_show_title = options_show_title | default: false -%}
    {%- assign options_type = options_type | default: 1 -%}
    {% capture options_type_class %}
        {%- case options_type -%}
        {%- when 1 %}product-options--type-collection
        {%- when 2 %}product-options--type-page
        {%- when 3 %}product-options--type-footbar
        {%- endcase -%}
    {% endcapture %}
    <div class="product-options {{ options_type_class }}{% if centered %} product-options--centered{% endif %}{% if mobile_centered %} product-options--mobile-centered{% endif %}{% unless trigger %} js-product-options{% endunless %}" data-js-product-options {% if options_type == 1 and settings.product_variant_change_on_hover %} data-js-options-onhover{% endif %}{% if change_history %} data-js-change-history{% endif %}>
        {%- assign options_limit = 3 -%}
        {%- if options_type == 1 and settings.product_options_listing_visibility != 'all' -%}
            {%- assign options_limit = settings.product_options_listing_visibility | abs -%}
            {%- assign enable_select_options_button = false -%}
            {%- assign options_with_values_size = product.options_with_values | size -%}
            {%- if options_with_values_size > options_limit -%}
                {%- assign enable_select_options_button = true -%}
            {%- endif -%}
        {%- endif -%}
        {%- for option in product.options_with_values -%}
            {%- assign option_index0 = forloop.index0 -%}
            <div{% if forloop.index > options_limit %} class="d-none"{% endif %}>
                {%- assign clear_name = option.name | escape | downcase -%}
                <label{% unless options_show_title %} class="d-none"{% endunless %}>{{ option.name }}:</label>
                {%- if options_type_circle_color contains clear_name -%}
                    <div class="product-options__section d-flex flex-wrap px-2" data-style="color" data-property="{% include 'product-get-options-strip-symbols' with value: option.name %}">
                        {%- for value in option.values -%}
                            {% include 'product-get-options-res-status' with option_index0: option_index0 %}
                            <div class="product-options__value product-options__value--circle standard-color-{{ value | handleize }} rounded-circle text-hide cursor-pointer{% if disabled_value %} disabled{% endif %}{% if active_value %} active{% endif %} lazyload"
                                data-js-option-value
                                data-value="{% include 'product-get-options-strip-symbols' with value: value %}"
                                {{ trigger_attr }}
                                 data-bg="none"
                                 data-scale="2"
                                {%- if settings.product_enable_tooltips and settings.product_enable_option_tooltips %}
                                    data-js-tooltip
                                    data-tippy-content="{{ value }}"
                                    data-tippy-placement="top"
                                    data-tippy-distance="6"
                                {%- endif -%}
                            >{{ value }}</div>
                        {%- endfor -%}
                    </div>
                {%- elsif options_type_circle_image contains clear_name -%}
                    <div class="product-options__section d-flex flex-wrap px-2" data-style="circle-image" data-property="{% include 'product-get-options-strip-symbols' with value: option.name %}">
                        {%- for value in option.values -%}
                            {% include 'product-get-options-res-status' with option_index0: option_index0 %}
                            {% include 'product-get-options-res-image' %}
                            <div class="product-options__value product-options__value--circle rounded-circle text-hide cursor-pointer{% if disabled_value %} disabled{% endif %}{% if active_value %} active{% endif %} lazyload"
                                 data-js-option-value
                                 data-value="{% include 'product-get-options-strip-symbols' with value: value %}"
                                 {{ trigger_attr }}
                                {%- if settings.product_format_pjpg -%}
                                    data-master="url({{ option_image | img_url: '1x1', format: 'pjpg' | replace: '_1x1.', '_[width]x.' }})"
                                    data-bg="url({{ option_image | img_url: '48x', format: 'pjpg' }})"
                                {%- else -%}
                                    data-master="url({{ option_image | img_url: '1x1' | replace: '_1x1.', '_[width]x.' }})"
                                    data-bg="url({{ option_image | img_url: '48x' }})"
                                {%- endif -%}
                                 data-scale="2"
                                {%- if settings.product_enable_tooltips and settings.product_enable_option_tooltips %}
                                    data-js-tooltip
                                    data-tippy-content="{{ value }}"
                                    data-tippy-placement="top"
                                    data-tippy-distance="6"
                                {%- endif -%}
                            >{{ value }}</div>
                        {%- endfor -%}
                    </div>
                {%- elsif options_type_square_color contains clear_name -%}
                    <div class="product-options__section d-flex flex-wrap" data-style="image" data-property="{% include 'product-get-options-strip-symbols' with value: option.name %}">
                        {%- for value in option.values -%}
                            {% include 'product-get-options-res-status' with option_index0: option_index0 %}
                            <div class="product-options__value product-options__value--square standard-color-{{ value | handleize }} text-hide cursor-pointer{% if disabled_value %} disabled{% endif %}{% if active_value %} active{% endif %} lazyload"
                                 data-js-option-value
                                 data-value="{% include 'product-get-options-strip-symbols' with value: value %}"
                                {{ trigger_attr }}
                                 data-bg="none"
                                 data-scale="2"
                                {%- if settings.product_enable_tooltips and settings.product_enable_option_tooltips %}
                                    data-js-tooltip
                                    data-tippy-content="{{ value }}"
                                    data-tippy-placement="top"
                                    data-tippy-distance="6"
                                {%- endif -%}
                            >{{ value }}</div>
                        {%- endfor -%}
                    </div>
                {%- elsif options_type_square_image contains clear_name -%}
                    <div class="product-options__section d-flex flex-wrap" data-style="image" data-property="{% include 'product-get-options-strip-symbols' with value: option.name %}">
                        {%- for value in option.values -%}
                            {% include 'product-get-options-res-status' with option_index0: option_index0 %}
                            {% include 'product-get-options-res-image' %}
                            <div class="product-options__value product-options__value--square text-hide cursor-pointer{% if disabled_value %} disabled{% endif %}{% if active_value %} active{% endif %} lazyload"
                                 data-js-option-value
                                 data-value="{% include 'product-get-options-strip-symbols' with value: value %}"
                                 {{ trigger_attr }}
                                    {%- if settings.product_format_pjpg -%}
                                        data-master="url({{ option_image | img_url: '1x1', format: 'pjpg' | replace: '_1x1.', '_[width]x.' }})"
                                        data-bg="url({{ option_image | img_url: '92x', format: 'pjpg' }})"
                                    {%- else -%}
                                        data-master="url({{ option_image | img_url: '1x1' | replace: '_1x1.', '_[width]x.' }})"
                                        data-bg="url({{ option_image | img_url: '92x' }})"
                                    {%- endif -%}
                                 data-scale="2"
                                {%- if settings.product_enable_tooltips and settings.product_enable_option_tooltips %}
                                    data-js-tooltip
                                    data-tippy-content="{{ value }}"
                                    data-tippy-placement="top"
                                    data-tippy-distance="6"
                                {%- endif -%}
                            >{{ value }}</div>
                        {%- endfor -%}
                    </div>
                {%- elsif options_type_large_text contains clear_name -%}
                    <div class="product-options__section d-flex flex-wrap" data-style="large-text" data-property="{% include 'product-get-options-strip-symbols' with value: option.name %}">
                        {%- for value in option.values -%}
                            {% include 'product-get-options-res-status' with option_index0: option_index0 %}
                            <div class="product-options__value product-options__value--large-text d-flex flex-center border cursor-pointer{% if disabled_value %} disabled{% endif %}{% if active_value %} active{% endif %} lazyload"
                                 data-js-option-value
                                 data-value="{% include 'product-get-options-strip-symbols' with value: value %}"
                                 {{ trigger_attr }}
                                 data-bg="none"
                                 data-scale="2"
                            >{{ value }}</div>
                        {%- endfor -%}
                    </div>
                {%- elsif options_type_select contains clear_name -%}
                    <div class="select position-relative js-dropdown js-select">
                        {%- assign select_dropdown_html = '' -%}
                        <div data-js-dropdown-button>
                            <select class="product-options__section" data-style="select" data-property="{% include 'product-get-options-strip-symbols' with value: option.name %}" data-js-option-select>
                                {%- for value in option.values -%}
                                    {% include 'product-get-options-res-status' with option_index0: option_index0 %}
                                    <option{% if active_value %} selected="selected"{% endif %} data-value="{% include 'product-get-options-strip-symbols' with value: value %}" value="{% include 'product-get-options-strip-symbols' with value: value %}"{% if disabled_value %} disabled="disabled"{% endif %}>{{ value }}</option>
                                    {% capture select_dropdown_html %}
                                        {{ select_dropdown_html }}
                                        <span{% if active_value %} class="selected"{% endif %} data-value="{% include 'product-get-options-strip-symbols' with value: value %}"{% if disabled_value %} disabled="disabled"{% endif %} {{ trigger_attr }}>{{ value }}</span>
                                    {% endcapture %}
                                {%- endfor -%}
                            </select>
                            <i class="position-absolute right-0 mr-10">{% include 'icon-theme-229' %}</i>
                        </div>
                        <div class="select__dropdown dropdown d-none position-lg-absolute {% if select_dropdown_position == 'top' %}bottom{% else %}top{% endif %}-lg-100 left-lg-0" data-js-dropdown data-js-select-dropdown>
                            <div class="px-15 pb-30 py-lg-15">
                                {{ select_dropdown_html }}
                            </div>
                        </div>
                    </div>
                {%- else -%}
                    <div class="product-options__section d-flex flex-wrap" data-style="text" data-property="{% include 'product-get-options-strip-symbols' with value: option.name %}">
                        {%- for value in option.values -%}
                            {% include 'product-get-options-res-status' with option_index0: option_index0 %}
                            <div class="product-options__value product-options__value--text d-flex flex-center border cursor-pointer{% if disabled_value %} disabled{% endif %}{% if active_value %} active{% endif %} lazyload"
                                 data-js-option-value
                                 data-value="{% include 'product-get-options-strip-symbols' with value: value %}"
                                 {{ trigger_attr }}
                                 data-bg="none"
                                 data-scale="2"
                            >{{ value }}</div>
                        {%- endfor -%}
                    </div>
                {%- endif -%}
            </div>
        {%- endfor -%}
    </div>
{%- endunless -%}
{%- assign change_history = false -%}
{%- assign trigger = null -%}
{%- assign trigger_id = null -%}

 

0 Likes