Size selector the same as image selector on main product page Dawn Them

Shopify Discussion

Topic summary

A user is struggling to make the size selector display in the same format as the color selector on their Shopify store using the Dawn theme.

Code Provided:

  • The user shared their variant picker code from the product page
  • The code handles different picker types (swatch, dropdown, button) for product options
  • It includes logic for rendering swatches when available and falls back to other display methods

Current Issue:

  • Size selection is not displaying with the same visual style as the color selection
  • The user has been unable to resolve this despite multiple attempts

Status: The discussion appears to be seeking help, with no solutions or responses provided yet. The code snippet is incomplete/corrupted at the end, which may indicate a copy-paste error or formatting issue that could be contributing to the problem.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hi there, I am at my wits end trying to get the size selection to display the same as select color:

Here is the variant picker code:

{% comment %}
Renders product variant-picker

Accepts:

  • product: {Object} product object.
  • block: {Object} passing the block information.
  • product_form_id: {String} Id of the product form to which the variant picker is associated.
    Usage:
    {% render ‘product-variant-picker’, product: product, block: block, product_form_id: product_form_id %}
    {% endcomment %}
    {%- unless product.has_only_default_variant -%}
    <variant-selects
    id=“variant-selects-{{ section.id }}”
    data-section=“{{ section.id }}”
    {{ block.shopify_attributes }}

{%- for option in product.options_with_values -%}
{%- liquid
assign swatch_count = option.values | map: ‘swatch’ | compact | size
assign picker_type = block.settings.picker_type

if swatch_count > 0 and block.settings.swatch_shape != ‘none’
if block.settings.picker_type == ‘swatch’
assign picker_type = ‘swatch_dropdown’
else
assign picker_type = ‘swatch’
endif
endif
-%}
{%- if picker_type == ‘swatch’ -%}

{{ option.name }}: {{- option.selected_value -}} {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %} {%- elsif picker_type == 'button' -%} {{ option.name }} {% render 'product-variant-options', product: product, option: option, block: block, picker_type: picker_type %} {%- else -%}
{{ option.name }}
{%- if picker_type == 'swatch_dropdown' -%} {% render 'swatch', swatch: option.selected_value.swatch, shape: block.settings.swatch_shape %} {%- endif -%} {{- 'icon-caret.svg' | inline_asset_content -}}
{%- endif -%} {%- endfor -%} {%- endunless -%}