How to change color swatch on stiletto theme?

Store Design
1

Hi, I am working on my stiletto theme and I dislike the color variant option. I would love to know how to change this to fit what I want. The first picture will be what I have currently and the 2nd picture will be what I’m looking to do. Thank you!

Hercules99_0-1726404493962.png
Hercules99_0-1726404493962.png574×142 1.82 KB

from this (current), to the bottom style–

Hercules99_1-1726404550344.png
Hercules99_1-1726404550344.png586×232 4.29 KB

2

can you find it for me and tell me what to change? Here is a snippet of that code.

{%- comment -%}
Pass in:

  • prod: object The product object
  • hidden: boolean (optional, used to not trip up javascript if buy button is removed)
  • price_content_type: “price” or “custom” or “hide” after checking both $0 and sold out pricing display settings
  • custom_price_content: the translation to populate price if sold out or free, depending on logic checks and settings
    {%- endcomment -%}

{%- liquid
assign product_available_label = ‘products.product.add_to_cart’ | t
assign product_unavailable_label = ‘products.product.sold_out’ | t

if template.suffix == ‘preorder’
assign product_available_label = ‘products.product.preorder’ | t
endif
-%}

{%- capture form_classes -%}
product-form product-form-{{ section.id }} {% if hidden %}visually-hidden{% endif %}
{%- endcapture -%}

{% form ‘product’,
prod,
class: form_classes,
novalidate: ‘novalidate’,
data-product-form: ‘’,
data-product-handle: prod.handle,
data-current-product-id: current_variant.id
%}
{% comment %}
product quantity within form remains hidden but will be updated
from outside the form if enabled.
{% endcomment %}

{{ 'products.product.quantity' | t }}

{% comment -%}
option field within form remains hidden but will be updated
from outside the form if enabled.
{% endcomment -%}
{% assign custom_option_blocks = blocks | where: ‘type’, ‘custom_option’ -%}

{%- for block in custom_option_blocks -%}
{%- if block.type == ‘custom_option’ -%}

{{ block.settings.label }}:&nbsp {%- case block.settings.field_type -%} {%- when 'text', 'textarea' -%} {%- when 'checkbox' -%} {%- when 'list' -%} {%- assign list_options = block.settings.list_options | split: ', ' -%}
{% render 'icon' with icon: 'chevron-small' %}
{%- endcase -%}
{%- endif -%} {%- endfor -%}

{% comment %}
In order for this form to submit, it needs to contain an input with name=“id”.
ProductForm() will automatically create this input (or make sure it has the
right value set if it already exists) on form submit based on the
currently selected variant. However, if JS is disabled we need a fallback.

Include a single {%- for variant in prod.variants -%} {{ variant.title }} {%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %} {%- endfor -%}

{% comment -%}
With JS enabled, this form will always be hidden, but updated from an outside form.

With JS disabled, the outside form is hidden, and this form will be visible.
{% endcomment -%}
{% if section.settings.enable_gift_card_recipient and prod.gift_card? -%}
{% render ‘gift-card-recipient-form’, source: ‘product-form’, product: prod, form: form %}
{%- endif %}

{%- unless current_variant.available -%} {{ product_unavailable_label }} {%- else -%} {{ product_available_label }} {%- endunless -%}
{% render 'icon', icon: 'checkmark' %}

{%- if show_dynamic_checkout -%}
{{ form | payment_button }}
{%- endif -%}

{%- unless is_quick -%}

{{- form | payment_terms -}}
{%- endunless -%}

{%- unless is_quick -%}
{% comment %} Surface pick-up {% endcomment %}

{%- endunless -%}

{%- if block.settings.enable_sticky_atc_bar_desktop or block.settings.enable_sticky_atc_bar_mobile -%}
{% render ‘sticky-atc-bar’,
local_settings: block.settings,
prod: prod,
current_variant: current_variant,
featured_media: featured_media,
aspect_ratio: aspect_ratio,
price_content_type: price_content_type,
custom_price_content: custom_price_content
%}
{%- endif -%}
{%- endform -%}

3

Yes, how do i do that? as a contributer?

4

Tommy, I went ahead and did that, thank you.