How can I alter size variant to display 'Select a Size'?

[Luxurymrkt]

Hi,

looking to change the size display

to say SELECT A SIZE as the first option

My site is https://luxurymrkt.com/collections/womenswear/products/by-far-alister-ankle-boots

like this

instead of this

[KetanKumar]

@Luxurymrkt

oh sorry its shopify default variant option but its possible this view please confirm

[Luxurymrkt]

This might work how do I add it

[Luxurymrkt]

What about this

add variant to the right

and word select a size to the left

like so

[KetanKumar]

@Luxurymrkt

this change only mobile or both(desktop)?

[Luxurymrkt]

Just mobile is ok

[KetanKumar]

@Luxurymrkt

can you please send this part code or product page full code

[Luxurymrkt]

• form ‘product’, product, id: form_id, class: ‘product-single__form’ -%}

{%- liquid
assign enable_dynamic_buttons = false
if show_dynamic_checkout and template != ‘product.preorder’
assign enable_dynamic_buttons = true
endif
-%}

{%- if enable_dynamic_buttons -%}

{%- endif -%}

{%- liquid
assign default_text = ‘products.product.add_to_cart’ | t
assign button_text = ‘products.product.add_to_cart’ | t
if template == ‘product.preorder’
assign default_text = ‘products.product.preorder’ | t
assign button_text = ‘products.product.preorder’ | t
endif
unless current_variant.available
assign button_text = ‘products.product.sold_out’ | t
endunless
-%}

<button
{% if product.empty? %}type=“button”{% else %}type=“submit”{% endif %}
name=“add”
data-add-to-cart
class=“btn btn–full add-to-cart{% if enable_dynamic_buttons and product.selling_plan_groups == empty %} btn–secondary{% endif %}”
{% unless current_variant.available %} disabled=“disabled”{% endunless %}>

{{ button_text }}

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

{%- if enable_dynamic_buttons -%}

{%- endif -%}

{{ form | payment_terms }}

{%- for variant in product.variants -%} {%- if variant.available -%} {{ variant.title }} - {{ variant.price | money_with_currency }} {%- else -%} {{ variant.title }} - {{ 'products.product.sold_out' | t }} {%- endif -%} {%- endfor -%} {{ product.variants | json }}

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

{{ current_variant | json }}

{%- endif -%}
{%- endform -%}

[Luxurymrkt]

{%- liquid
assign isModal = false
if template == ‘product.modal’
assign isModal = true
endif
-%}

{%- render ‘product-template’,
product: product,
section_id: section.id,
blocks: section.blocks,

image_position: section.settings.image_position,
image_container_width: section.settings.image_size,
product_zoom_enable: section.settings.product_zoom_enable,
sku_enable: section.settings.sku_enable,
isModal: isModal,
thumbnail_position: section.settings.thumbnail_position,
thumbnail_arrows: section.settings.thumbnail_arrows,
mobile_layout: section.settings.mobile_layout,
video_looping: section.settings.enable_video_looping,
video_style: section.settings.product_video_style
-%}

{% schema %}
{
“name”: “t:sections.main-product.name”,
“settings”: [
{
“type”: “checkbox”,
“id”: “sku_enable”,
“label”: “t:sections.main-product.settings.sku_enable.label”
},
{
“type”: “header”,
“content”: “t:sections.main-product.settings.header_media”
},
{
“type”: “paragraph”,
“content”: “t:sections.main-product.settings.content”
},
{
“type”: “select”,
“id”: “image_position”,
“label”: “t:sections.main-product.settings.image_position.label”,
“default”: “left”,
“options”: [
{
“value”: “left”,
“label”: “t:sections.main-product.settings.image_position.options.left.label”
},
{
“value”: “right”,
“label”: “t:sections.main-product.settings.image_position.options.right.label”
}
]
},
{
“type”: “select”,
“id”: “image_size”,
“label”: “t:sections.main-product.settings.image_size.label”,
“default”: “medium”,
“options”: [
{
“value”: “small”,
“label”: “t:sections.main-product.settings.image_size.options.small.label”
},
{
“value”: “medium”,
“label”: “t:sections.main-product.settings.image_size.options.medium.label”
},
{
“value”: “large”,
“label”: “t:sections.main-product.settings.image_size.options.large.label”
}
]
},
{
“type”: “checkbox”,
“id”: “product_zoom_enable”,
“label”: “t:sections.main-product.settings.product_zoom_enable.label”,
“default”: true
},
{
“type”: “select”,
“id”: “thumbnail_position”,
“label”: “t:sections.main-product.settings.thumbnail_position.label”,
“default”: “beside”,
“options”: [
{
“value”: “beside”,
“label”: “t:sections.main-product.settings.thumbnail_position.options.beside.label”
},
{
“value”: “below”,
“label”: “t:sections.main-product.settings.thumbnail_position.options.below.label”
}
]
},
{
“type”: “checkbox”,
“id”: “thumbnail_arrows”,
“label”: “t:sections.main-product.settings.thumbnail_arrows.label”
},
{
“type”: “select”,
“id”: “mobile_layout”,
“label”: “t:sections.main-product.settings.mobile_layout.label”,
“default”: “partial”,
“options”: [
{
“value”: “partial”,
“label”: “t:sections.main-product.settings.mobile_layout.options.partial.label”
},
{
“value”: “full”,
“label”: “t:sections.main-product.settings.mobile_layout.options.full.label”
}
]
},
{
“type”: “checkbox”,
“id”: “enable_video_looping”,
“label”: “t:sections.main-product.settings.enable_video_looping.label”,
“default”: true
},
{
“type”: “select”,
“id”: “product_video_style”,
“label”: “t:sections.main-product.settings.product_video_style.label”,
“default”: “muted”,
“options”: [
{
“value”: “muted”,
“label”: “t:sections.main-product.settings.product_video_style.options.muted.label”
},
{
“value”: “unmuted”,
“label”: “t:sections.main-product.settings.product_video_style.options.unmuted.label”
}
],
“info”: “t:sections.main-product.settings.product_video_style.info”
}
],
“blocks”: [{
“type”: “@app”
},
{
“type”: “price”,
“name”: “t:product_block.price.name”,
“limit”: 1
},
{
“type”: “quantity_selector”,
“name”: “t:product_block.quantity_selector.name”,
“limit”: 1
},
{
“type”: “size_chart”,
“name”: “t:product_block.size_chart.name”,
“limit”: 1,
“settings”: [
{
“type”: “page”,
“id”: “size_chart”,
“label”: “t:product_block.size_chart.settings.page.label”
}
]
},
{
“type”: “variant_picker”,
“name”: “Variant picker”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “variant_labels”,
“label”: “t:product_block.variant_picker.settings.variant_labels.label”,
“default”: true
},
{
“type”: “select”,
“id”: “picker_type”,
“label”: “t:product_block.variant_picker.settings.picker_type.label”,
“options”: [
{
“value”: “button”,
“label”: “t:product_block.variant_picker.settings.picker_type.options.button.label”
},
{
“value”: “dropdown”,
“label”: “t:product_block.variant_picker.settings.picker_type.options.dropdown.label”
}
],
“default”: “button”
},
{
“type”: “checkbox”,
“id”: “color_swatches”,
“label”: “Enable color swatches”,
“info”: “Requires type to be set to ‘Buttons’. Learn how to set up swatches”
}
]
},
{
“type”: “description”,
“name”: “t:product_block.description.name”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “is_tab”,
“label”: “t:product_block.description.settings.is_tab.label”
}
]
},
{
“type”: “buy_buttons”,
“name”: “t:product_block.buy_buttons.name”,
“limit”: 1,
“settings”: [
{
“type”: “checkbox”,
“id”: “show_dynamic_checkout”,
“label”: “t:product_block.buy_buttons.settings.show_dynamic_checkout.label”,
“info”: “t:product_block.buy_buttons.settings.show_dynamic_checkout.info”,
“default”: true
},
{
“type”: “checkbox”,
“id”: “surface_pickup_enable”,
“label”: “t:product_block.buy_buttons.settings.surface_pickup_enable.label”,
“info”: “t:product_block.buy_buttons.settings.surface_pickup_enable.info”,
“default”: true
}
]
},
{
“type”: “inventory_status”,
“name”: “t:product_block.inventory_status.name”,
“limit”: 1,
“settings”: [
{
“type”: “range”,
“id”: “inventory_threshold”,
“label”: “t:product_block.inventory_status.settings.inventory_threshold.label”,
“default”: 10,
“min”: 0,
“max”: 20,
“step”: 2
},
{
“type”: “checkbox”,
“id”: “inventory_transfers_enable”,
“label”: “t:product_block.inventory_status.settings.inventory_transfers_enable.label”,
“info”: “t:product_block.inventory_status.settings.inventory_transfers_enable.info”,
“default”: true
}
]
},
{
“type”: “sales_point”,
“name”: “t:product_block.sales_point.name”,
“settings”: [
{
“type”: “select”,
“id”: “icon”,
“label”: “t:product_block.sales_point.settings.icon.label”,
“default”: “globe”,
“options”: [
{
“value”: “checkmark”,
“label”: “t:product_block.sales_point.settings.icon.options.checkmark.label”
},
{
“value”: “gift”,
“label”: “t:product_block.sales_point.settings.icon.options.gift.label”
},
{
“value”: “globe”,
“label”: “t:product_block.sales_point.settings.icon.options.globe.label”
},
{
“value”: “heart”,
“label”: “t:product_block.sales_point.settings.icon.options.heart.label”
},
{
“value”: “leaf”,
“label”: “t:product_block.sales_point.settings.icon.options.leaf.label”
},
{
“value”: “lock”,
“label”: “t:product_block.sales_point.settings.icon.options.lock.label”
},
{
“value”: “package”,
“label”: “t:product_block.sales_point.settings.icon.options.package.label”
},
{
“value”: “phone”,
“label”: “t:product_block.sales_point.settings.icon.options.phone.label”
},
{
“value”: “ribbon”,
“label”: “t:product_block.sales_point.settings.icon.options.ribbon.label”
},
{
“value”: “shield”,
“label”: “t:product_block.sales_point.settings.icon.options.shield.label”
},
{
“value”: “tag”,
“label”: “t:product_block.sales_point.settings.icon.options.tag.label”
},
{
“value”: “truck”,
“label”: “t:product_block.sales_point.settings.icon.options.truck.label”
}
]
},
{
“type”: “text”,
“id”: “text”,
“label”: “t:product_block.sales_point.settings.text.label”,
“default”: “Free worldwide shipping”
}
]
},
{
“type”: “text”,
“name”: “t:product_block.text.name”,
“settings”: [
{
“type”: “text”,
“id”: “text”,
“default”: “Text block”,
“label”: “t:product_block.text.settings.text.label”
}
]
},
{
“type”: “trust_badge”,
“name”: “t:product_block.trust_badge.name”,
“settings”: [
{
“type”: “image_picker”,
“id”: “trust_image”,
“label”: “t:product_block.trust_badge.settings.trust_image.label”
}
]
},
{
“type”: “tab”,
“name”: “t:product_block.tab.name”,
“settings”: [
{
“type”: “text”,
“id”: “title”,
“label”: “t:product_block.tab.settings.title.label”,
“default”: “Shipping information”
},
{
“type”: “richtext”,
“id”: “content”,
“label”: “t:product_block.tab.settings.content.label”,
“default”: “

Use collapsible tabs for more detailed information that will help customers make a purchasing decision.

Ex: Shipping and return policies, size guides, and other common questions.

”
},
{
“type”: “page”,
“id”: “page”,
“label”: “t:product_block.tab.settings.page.label”
}
]
},
{
“type”: “share”,
“name”: “t:product_block.share_on_social.name”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: “t:product_block.share_on_social.settings.content”
}
]
},
{
“type”: “separator”,
“name”: “t:product_block.separator.name”
},
{
“type”: “contact”,
“name”: “t:product_block.contact_form.name”,
“limit”: 1,
“settings”: [
{
“type”: “paragraph”,
“content”: “t:product_block.contact_form.settings.content”
},
{
“type”: “text”,
“id”: “title”,
“label”: “t:product_block.contact_form.settings.title.label”,
“default”: “Ask a question”
},
{
“type”: “checkbox”,
“id”: “phone”,
“label”: “t:product_block.contact_form.settings.phone.label”
}
]
},
{
“type”: “custom”,
“name”: “t:product_block.html.name”,
“settings”: [
{
“type”: “liquid”,
“id”: “code”,
“label”: “t:product_block.html.settings.code.label”,
“default”: “

Custom code block

Use this advanced section to add custom HTML, app scripts, or liquid.

”,
“info”: “t:product_block.html.settings.code.info”
}
]
}
]
}
{% endschema %}

[KetanKumar]

@Luxurymrkt

can you please send this file code also product-template

[Luxurymrkt]

{%- liquid
assign current_variant = product.selected_or_first_available_variant

unless thumbnail_position
assign thumbnail_position = ‘beside’
endunless

assign product_zoom_size = ‘1800x1800’
assign product_image_size = ‘620x’

case image_container_width
when ‘small’
assign product_image_width = ‘medium-up–two-fifths’
assign product_description_width = ‘medium-up–three-fifths’
assign product_image_size = ‘480x’
when ‘medium’
assign product_image_width = ‘medium-up–one-half’
assign product_description_width = ‘medium-up–one-half’
assign product_image_size = ‘620x’
when ‘large’
assign product_image_width = ‘medium-up–three-fifths’
assign product_description_width = ‘medium-up–two-fifths’
assign product_image_size = ‘740x’
endcase

assign product_img_structure = product.featured_media | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’
-%}

{%- liquid
assign connect_to_sizechart = false

for block in section.blocks
if block.type == ‘size_chart’
assign sizechart_index = forloop.index0
assign next_block_index = sizechart_index | plus: 1

if section.blocks[next_block_index].type == ‘variant_picker’ and product.has_only_default_variant == false
for option in product.options_with_values
assign size_trigger = ‘products.general.size_trigger’ | t | downcase
assign downcased_option = option.name | downcase

if downcased_option contains size_trigger
assign connect_to_sizechart = true
endif
endfor
endif

endif
endfor
-%}

{%- render ‘product-template-variables’, product: product, current_variant: current_variant -%}

{%- if image_position == 'left' -%}

{%- render 'product-images', section_id: section_id, product: product, isModal: isModal, image_position: image_position, product_zoom_enable: product_zoom_enable, product_zoom_size: product_zoom_size, product_image_size: product_image_size, thumbnail_arrows: thumbnail_arrows, thumbnail_position: thumbnail_position, video_looping: video_looping, video_style: video_style -%}

{%- endif -%}

{%- if settings.show_breadcrumbs and isModal != true -%} {%- render 'breadcrumbs' -%} {%- endif -%}

{%- if settings.vendor_enable -%}

{%- assign vendor_handle = product.vendor | handleize -%} {%- if collections[vendor_handle] != empty -%} {{ collections[vendor_handle].title }} {%- else -%} {{ product.vendor | link_to_vendor }} {%- endif -%}

{%- endif -%}

{%- if isModal -%}

{{ product.title }}

{%- else -%}

{%- unless product.empty? -%} {{ product.title }} {%- else -%} {{ 'home_page.onboarding.product_title' | t }} {%- endunless -%}

{%- endif -%}

{%- if sku_enable -%}

{%- if current_variant.sku -%} {{ current_variant.sku }} {%- endif -%}

{%- endif -%}

{%- capture form_id -%}AddToCartForm-{{ section_id }}-{{ product.id }}{%- endcapture -%} {%- for block in blocks -%} {%- case block.type -%} {%- when '@app' -%} {% render block %} {%- when 'separator' -%}

---

{%- when 'text' -%}

{{ block.settings.text }}

{%- when 'tab' -%}

{% assign tab_id = block.id | append: product.id %} {% capture tab_content %} {{ block.settings.content }} {{ block.settings.page.content }} {% endcapture %} {%- render 'tab', id: tab_id, title: block.settings.title, content: tab_content -%}

{%- when 'contact' -%}

{% assign tab_id = block.id | append: product.id %} {%- render 'tab-contact', id: tab_id, block: block -%}

{%- when 'description' -%}

{%- assign id = block.id | append: product.id -%} {%- render 'product-description', id: id, product: product, is_tab: block.settings.is_tab -%}

{%- when 'price' -%}

{%- assign hide_sale_price = true -%} {%- if product.compare_at_price_max > product.price -%} {%- if current_variant.compare_at_price > current_variant.price -%} {%- assign hide_sale_price = false -%} {%- endif -%} {{ 'products.general.regular_price' | t }} {%- if current_variant.compare_at_price > current_variant.price -%} {{ current_variant.compare_at_price | money }} {%- endif -%} {{ 'products.general.sale_price' | t }} {%- else -%} {{ 'products.general.regular_price' | t }} {%- endif -%}

{%- unless product.empty? -%}
{{ current_variant.price | money }}
{%- else -%}
{{ 1999 | money }}
{%- endunless -%}

{%- if settings.product_save_amount -%}
{%- if settings.product_save_type == ‘dollar’ -%}
{%- capture saved_amount -%}{{ current_variant.compare_at_price | minus: current_variant.price | money }}{%- endcapture -%}
{%- else -%}
{%- capture saved_amount -%}{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | round }}%{%- endcapture -%}
{%- endif -%}

{%- unless hide_sale_price -%}
{{ ‘products.general.save_html’ | t: saved_amount: saved_amount }}
{%- endunless -%}

{%- endif -%}

{%- capture unit_price_base_unit -%} {%- if current_variant.unit_price_measurement -%} {%- if current_variant.unit_price_measurement.reference_value != 1 -%} {{ current_variant.unit_price_measurement.reference_value }} {%- endif -%} {{ current_variant.unit_price_measurement.reference_unit }} {%- endif -%} {%- endcapture -%}

{{ current_variant.unit_price | money }}/{{ unit_price_base_unit }}

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}

{%- if shop.taxes_included -%} {{ 'products.product.include_taxes' | t }} {%- endif -%} {%- if shop.shipping_policy.body != blank -%} {{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }} {%- endif -%}

{%- endif -%}

{%- when 'quantity_selector' -%}

{% assign qty_id = section_id | append: product.id %} {{ 'products.product.quantity' | t }} {%- render 'quantity-input', form_id: form_id, id: qty_id, qty: 1, min: 1 -%}

{%- when 'size_chart' -%} {% if connect_to_sizechart == false %} {%- capture size_chart_title -%} {{ 'products.general.size_chart' | t }} {%- endcapture -%}

{%- render 'tool-tip-trigger', title: size_chart_title, content: block.settings.size_chart.content, context: 'size-chart' -%} {% style %} tool-tip-trigger { text-transform: uppercase; } {% endstyle %}

{% endif %} {%- when 'variant_picker' -%}

{%- unless product.has_only_default_variant -%} {%- for option in product.options_with_values -%} {%- liquid if block.settings.color_swatches assign is_color = false assign color_option_index = 0 assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase assign color_option_index = forloop.index0 assign downcased_option = option.name | downcase if downcased_option contains swatch_trigger assign is_color = true elsif swatch_trigger == 'color' and downcased_option contains 'colour' assign is_color = true endif endif -%}

{%- if block.settings.picker_type == ‘button’ -%}
{%- render ‘variant-button’,
block: block,
product: product,
form_id: form_id,
section_id: section_id,
option: option,
forloop: forloop,
variant_labels: block.settings.variant_labels,
is_color: is_color,
color_option_index: color_option_index,
connect_to_sizechart: connect_to_sizechart,
sizechart_index: sizechart_index
-%}
{%- else -%}
{%- render ‘variant-dropdown’,
product: product,
form_id: form_id,
section_id: section_id,
option: option,
forloop: forloop,
variant_labels: block.settings.variant_labels
-%}
{%- endif -%}
{%- endfor -%}
{%- endunless -%}

{%- when 'buy_buttons' -%}

{%- unless product.empty? -%}

{%- render 'product-form', form_id: form_id, product: product, show_dynamic_checkout: block.settings.show_dynamic_checkout, current_variant: current_variant -%}

{%- endunless -%}

{%- if block.settings.surface_pickup_enable -%}

{%- endif -%}

{%- when 'sales_point' -%} {%- unless block.settings.text == blank -%}

• {% case block.settings.icon %} {% when 'checkmark' %} {% when 'gift' %} {% when 'globe' %} {% when 'heart' %} {% when 'leaf' %} {% when 'lock' %} {% when 'package' %} {% when 'phone' %} {% when 'ribbon' %} {% when 'shield' %} {% when 'tag' %} {% when 'truck' %} {% endcase %} {{ block.settings.text }}

{%- endunless -%} {%- when 'inventory_status' -%} {%- render 'product-inventory', product: product, current_variant: current_variant, block: block -%} {%- when 'share' -%}

{%- render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product -%}

{%- when 'trust_badge' -%}

{%- assign img_url = block.settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{%- when 'custom' -%}

{{ block.settings.code }}

{%- endcase -%} {%- else -%}

{%- endfor -%}

{%- unless image_position == ‘left’ -%}

{%- render 'product-images', section_id: section_id, product: product, isModal: isModal, image_position: image_position, product_zoom_enable: product_zoom_enable, product_zoom_size: product_zoom_size, product_image_size: product_image_size, thumbnail_arrows: thumbnail_arrows, thumbnail_position: thumbnail_position, video_looping: video_looping, video_style: video_style -%}

{%- endunless -%}

[KetanKumar]

@Luxurymrkt

thanks for all code but i can’t see variant size code do you have any other code?