Thanks, Guleria. I’m not 100% sure where I should place this in product_form.liquid:
{% form 'product', product %}
{{ form | payment_terms }}
{% comment %}
Display variant options for a product
@param product
@param selected_variant
@param style
@param enable_swatches
@param swatches_shape
@param swatches_option_trigger
@param swatches_option_style
@param swatches_product_page_size
@param swatch_colors
{% endcomment %}
{% liquid
assign style = ‘select’
if settings.product_form_style == ‘radio’
assign style = ‘radio’
endif
assign product = product
assign sold_out_options = sold_out_options
assign selected_variant = selected_variant
assign enable_swatches = settings.enable_swatches
assign swatches_shape = settings.swatch_style
assign swatches_option_trigger = settings.swatch_trigger
assign recipient_form_input_classes = ‘input’
assign recipient_form_textarea_rows = 0
assign recipient_form_textarea_classes = ‘textarea’
%}
{% comment %}Inject @pixelunion /shopify-variants-ui/variant-selection begin{% endcomment %}
{% comment %}
Display variant options for a product
@param product
@param selected_variant
@param variant_selection_id
@param sold_out_options
@param style
@param enable_swatches
@param swatches_shape
@param swatches_option_trigger
@param swatches_option_style
@param swatches_product_page_size
@param swatches_custom_colors
{% endcomment %}
<variant-selection
{% if variant_selection_id != blank %}id=“{{ variant_selection_id }}”{% endif %}
class=“variant-selection”
product-url=“{{ product.url }}.js”
variant=“{% if selected_variant %}{{ selected_variant.id }}{% else %}not-selected{% endif %}”
data-variant-selection
{% if product.has_only_default_variant %}
<input
class=“variant-selection__variants variant-selection__variants–default”
name=“id”
type=“hidden”
value=“{{ product.variants.first.id }}”
data-variants
{% else %}
.variant-selection__variants {
display: block !important;
}
{{ 'product.variants.choose_variant' | t }}
{% for variant in product.variants %}
{{ variant.title }} - {{ variant.price | money }}
{% endfor %}
{% comment %}Inject @pixelunion /shopify-variants-ui/options-selection begin{% endcomment %}
{% comment %}
Display variant options for a product
@param product
@param selected_variant
@param variant_selection_id
@param sold_out_options
@param style
@param enable_swatches
@param swatches_shape
@param swatches_option_trigger
@param swatches_option_style
@param swatches_product_page_size
@param swatches_custom_colors
@param swatch_file_type
{% endcomment %}
<options-selection
{% if variant_selection_id != blank %}variant-selection=“{{ variant_selection_id }}”{% endif %}
style=“display: none;”
{% if sold_out_options == ‘disabled’ %}disable-unavailable{% endif %}
{% if sold_out_options == ‘hidden’ %}remove-unavailable{% endif %}
data-options-selection
{% for option in product.options_with_values %}
{% assign option_index = forloop.index0 %}
{% assign show_swatches = false %}
{% if enable_swatches %}
{%- assign swatches_option_trigger = swatches_option_trigger | strip | downcase -%}
{%- assign option_name = option.name | strip | downcase -%}
{% if option_name == swatches_option_trigger %}
{% assign show_swatches = true %}
{% assign swatch_option_key = ‘option’ | append: forloop.index %}
{% endif %}
{% endif %}
{% if style == ‘select’ and show_swatches == false %}
{%
render ‘options-select’,
product: product,
selected_variant: selected_variant,
option: option,
option_index: option_index
%}
{% elsif style == ‘radio’ or show_swatches == true %}
{%
render ‘options-radios’,
product: product,
selected_variant: selected_variant,
option: option,
option_index: option_index,
show_swatches: show_swatches,
swatch_option_key: swatch_option_key,
swatch_size: swatches_product_page_size,
swatches_option_style: swatches_option_style,
swatch_file_type: swatch_file_type,
swatches_custom_colors: swatches_custom_colors,
swatches_shape: swatches_shape,
%}
{% endif %}
{% endfor %}
{% comment %}Inject @pixelunion /shopify-variants-ui/options-selection end{% endcomment %}
{% endif %}
{% comment %}Inject @pixelunion /shopify-variants-ui/variant-selection end{% endcomment %}
{% if product.available %}
{% if settings.display_inventory_left %}
{% if selected_variant.inventory_management != blank and selected_variant.inventory_quantity > 0 %}
{% capture items_left_text %}
{% if selected_variant.inventory_quantity == 1 %}
{{ 'products.product.items_left_count.one' | t }}
{% else %}
{{ 'products.product.items_left_count.other' | t }}
{% endif %}
{% endcapture %}
{% if selected_variant.inventory_quantity <= settings.inventory_threshold %}
{{ selected_variant.inventory_quantity }} {{ items_left_text }}
{% endif %}
{% endif %}
{% endif %}
{% unless show_payment_button %}
{% comment %}Inject @pixelunion /pxs-gift-card-recipient-form/recipient-form begin{% endcomment %}
{% comment %}
@param form {Object}
The form object
@param section {Object}
The section object
@param show_recipient_form {Boolean}
If true, show the gift card recipient form
@param show_recipient_form_placeholders {Boolean}
If true, show recipient form placeholder attributes
@param show_recipient_form_labels {Boolean}
If true, show recipient form input labels
@param show_recipient_form_max_characters_message {Boolean}
If true, show the recipient form max characters message
@param recipient_form_textarea_rows {Number}
A numerical value to specify the number of textarea rows
@param recipient_form_textarea_classes {String}
A space separated list of class names added to recipient form textarea
@param recipient_form_input_classes {String}
A space separated list of class names added to recipient form inputs
@param recipient_form_label_classes {String}
A space separated list of class names added to recipient form labels
@param recipient_form_label_position {String}
The recipient form input label position, either ‘top’, or ‘bottom’
{% endcomment %}
{% liquid
assign show_recipient_form_placeholders = show_recipient_form_placeholders | default: false
assign show_recipient_form_labels = show_recipient_form_labels | default: true, allow_false: true
assign show_recipient_form_max_characters_message = show_recipient_form_max_characters_message | default: true, allow_false: true
assign recipient_form_textarea_rows = recipient_form_textarea_rows | default: 5
assign recipient_form_label_position = recipient_form_label_position | default: ‘top’
%}
{%- if show_recipient_form and product.gift_card? -%}
{%- render ‘recipient-form-disclosure-icon’ -%}
{{- 'recipient.form.checkbox_label' | t -}}
{%- if show_recipient_form_labels -%}
{%- capture recipient_email_label -%}
{{- 'recipient.form.email_label' | t -}}
*
{%- endcapture -%}
{%- endif -%}
{%- capture recipient_email_input -%}
<input
class="
recipient-form__input
recipient-form__input–email
{{ recipient_form_input_classes }}
"
id=“recipient-email-{{ section.id }}”
type=“email”
{%- if show_recipient_form_placeholders -%}
placeholder=“{{- ‘recipient.form.email_placeholder’ | t -}}”
{%- endif -%}
{%- unless show_recipient_form_labels -%}
aria-label=“{{- ‘recipient.form.email_placeholder’ | t -}}”
{%- endunless -%}
name=“properties[Recipient email]”
value=“{{ form.email }}”
data-recipient-form-input
data-recipient-form-email-input
{%- endcapture -%}
{%- capture recipient_error_message -%}
{{- ‘recipient.form.error_message’ | t -}}
{%- endcapture -%}
{%- if recipient_form_label_position == ‘top’ -%}
{{- recipient_email_label -}}
{{- recipient_email_input -}}
{{- recipient_error_message -}}
{%- else -%}
{{- recipient_email_input -}}
{{- recipient_email_label -}}
{{- recipient_error_message -}}
{%- endif -%}
{%- if show_recipient_form_labels -%}
{%- capture recipient_name_label -%}
{{- 'recipient.form.name_label' | t -}}
{%- endcapture -%}
{%- endif -%}
{%- capture recipient_name_input -%}
<input
class="
recipient-form__input
recipient-form__input–name
{{ recipient_form_input_classes }}
"
id=“recipient-name-{{ section.id }}”
type=“text”
{%- if show_recipient_form_placeholders -%}
placeholder=“{{- ‘recipient.form.name_placeholder’ | t -}}”
{%- endif -%}
{%- unless show_recipient_form_labels -%}
aria-label=“{{- ‘recipient.form.name_placeholder’ | t -}}”
{%- endunless -%}
name=“properties[Recipient name]”
value=“{{ form.name }}”
data-recipient-form-input
{%- endcapture -%}
{%- if recipient_form_label_position == ‘top’ -%}
{{ recipient_name_label }}
{{ recipient_name_input }}
{%- else -%}
{{ recipient_name_input }}
{{ recipient_name_label }}
{%- endif -%}
{%- liquid
assign max_characters_length = 200
if show_recipient_form_max_characters_message
assign max_characters_message = ‘recipient.form.max_characters’ | t: max_characters: max_characters_length
endif
-%}
{%- if show_recipient_form_labels -%}
{%- capture recipient_message_label -%}
<label
class="
recipient-form__label
{{ recipient_form_label_classes }}
"
for=“recipient-message-{{ section.id }}”
{{- ‘recipient.form.message_label’ | t -}}
{%- endcapture -%}
{%- endif -%}
{%- capture recipient_message_input -%}
{{- form.message -}}
{%- endcapture -%}
{%- if recipient_form_label_position == ‘top’ -%}
{{ recipient_message_label }}
{{ recipient_message_input }}
{%- else -%}
{{ recipient_message_input }}
{{ recipient_message_label }}
{%- endif -%}
{%- if show_recipient_form_max_characters_message -%}
{{- max_characters_message -}}
{%- endif -%}
{%- endif -%}
{% comment %}Inject @pixelunion /pxs-gift-card-recipient-form/recipient-form end{% endcomment %}
{% endunless %}
{% if settings.display_product_quantity %}
{%
render 'quantity-box',
variant: selected_variant,
%}
{% endif %}
{% if show_payment_button %}
{% comment %}Inject @pixelunion /pxs-gift-card-recipient-form/recipient-form begin{% endcomment %}
{% comment %}
@param form {Object}
The form object
@param section {Object}
The section object
@param show_recipient_form {Boolean}
If true, show the gift card recipient form
@param show_recipient_form_placeholders {Boolean}
If true, show recipient form placeholder attributes
@param show_recipient_form_labels {Boolean}
If true, show recipient form input labels
@param show_recipient_form_max_characters_message {Boolean}
If true, show the recipient form max characters message
@param recipient_form_textarea_rows {Number}
A numerical value to specify the number of textarea rows
@param recipient_form_textarea_classes {String}
A space separated list of class names added to recipient form textarea
@param recipient_form_input_classes {String}
A space separated list of class names added to recipient form inputs
@param recipient_form_label_classes {String}
A space separated list of class names added to recipient form labels
@param recipient_form_label_position {String}
The recipient form input label position, either ‘top’, or ‘bottom’
{% endcomment %}
{% liquid
assign show_recipient_form_placeholders = show_recipient_form_placeholders | default: false
assign show_recipient_form_labels = show_recipient_form_labels | default: true, allow_false: true
assign show_recipient_form_max_characters_message = show_recipient_form_max_characters_message | default: true, allow_false: true
assign recipient_form_textarea_rows = recipient_form_textarea_rows | default: 5
assign recipient_form_label_position = recipient_form_label_position | default: ‘top’
%}
{%- if show_recipient_form and product.gift_card? -%}
{%- render ‘recipient-form-disclosure-icon’ -%}
{{- 'recipient.form.checkbox_label' | t -}}
{%- if show_recipient_form_labels -%}
{%- capture recipient_email_label -%}
{{- 'recipient.form.email_label' | t -}}
*
{%- endcapture -%}
{%- endif -%}
{%- capture recipient_email_input -%}
<input
class="
recipient-form__input
recipient-form__input–email
{{ recipient_form_input_classes }}
"
id=“recipient-email-{{ section.id }}”
type=“email”
{%- if show_recipient_form_placeholders -%}
placeholder=“{{- ‘recipient.form.email_placeholder’ | t -}}”
{%- endif -%}
{%- unless show_recipient_form_labels -%}
aria-label=“{{- ‘recipient.form.email_placeholder’ | t -}}”
{%- endunless -%}
name=“properties[Recipient email]”
value=“{{ form.email }}”
data-recipient-form-input
data-recipient-form-email-input
{%- endcapture -%}
{%- capture recipient_error_message -%}
{{- ‘recipient.form.error_message’ | t -}}
{%- endcapture -%}
{%- if recipient_form_label_position == ‘top’ -%}
{{- recipient_email_label -}}
{{- recipient_email_input -}}
{{- recipient_error_message -}}
{%- else -%}
{{- recipient_email_input -}}
{{- recipient_email_label -}}
{{- recipient_error_message -}}
{%- endif -%}
{%- if show_recipient_form_labels -%}
{%- capture recipient_name_label -%}
{{- 'recipient.form.name_label' | t -}}
{%- endcapture -%}
{%- endif -%}
{%- capture recipient_name_input -%}
<input
class="
recipient-form__input
recipient-form__input–name
{{ recipient_form_input_classes }}
"
id=“recipient-name-{{ section.id }}”
type=“text”
{%- if show_recipient_form_placeholders -%}
placeholder=“{{- ‘recipient.form.name_placeholder’ | t -}}”
{%- endif -%}
{%- unless show_recipient_form_labels -%}
aria-label=“{{- ‘recipient.form.name_placeholder’ | t -}}”
{%- endunless -%}
name=“properties[Recipient name]”
value=“{{ form.name }}”
data-recipient-form-input
{%- endcapture -%}
{%- if recipient_form_label_position == ‘top’ -%}
{{ recipient_name_label }}
{{ recipient_name_input }}
{%- else -%}
{{ recipient_name_input }}
{{ recipient_name_label }}
{%- endif -%}
{%- liquid
assign max_characters_length = 200
if show_recipient_form_max_characters_message
assign max_characters_message = ‘recipient.form.max_characters’ | t: max_characters: max_characters_length
endif
-%}
{%- if show_recipient_form_labels -%}
{%- capture recipient_message_label -%}
<label
class="
recipient-form__label
{{ recipient_form_label_classes }}
"
for=“recipient-message-{{ section.id }}”
{{- ‘recipient.form.message_label’ | t -}}
{%- endcapture -%}
{%- endif -%}
{%- capture recipient_message_input -%}
{{- form.message -}}
{%- endcapture -%}
{%- if recipient_form_label_position == ‘top’ -%}
{{ recipient_message_label }}
{{ recipient_message_input }}
{%- else -%}
{{ recipient_message_input }}
{{ recipient_message_label }}
{%- endif -%}
{%- if show_recipient_form_max_characters_message -%}
{{- max_characters_message -}}
{%- endif -%}
{%- endif -%}
{% comment %}Inject @pixelunion /pxs-gift-card-recipient-form/recipient-form end{% endcomment %}
{% endif %}
{% 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 %}
<button type=“submit” name=“add” class=“button {% if settings.cart_action == ‘mini_cart’ or settings.cart_action == ‘drawer’ %} ajax-submit {% endif %}action_button button–add-to-cart {% if show_payment_button %} action_button–secondary {% endif %}” data-label={{ add_to_cart_label | json }} data-add-to-cart-trigger>
{% if settings.button_cart_icon != blank and settings.button_cart_icon_position == ‘left’ %}
{%
render ‘icon’,
name: settings.button_cart_icon,
icon_class: ‘icon–cart’
%}
{% endif %}
{{ add_to_cart_label }}
{% if settings.button_cart_icon != blank and settings.button_cart_icon_position == ‘right’ %}
{%
render ‘icon’,
name: settings.button_cart_icon,
icon_class: ‘icon–cart icon–right’
%}
{% endif %}
{% if show_payment_button %}
{{ form | payment_button }}
{% endif %}
{% endif %}
{% endform %}