Shopify themes, liquid, logos, and UX
I am using custom line item properties on one of my products. Some are text boxes and one is a dropdown list. The problem is that when the product is added to your cart, the dropdown list value is always moved to the top of the line item properties. For example, this is the order that I have them shown on the product page:
Text box 1
Text box 2
Text box 3
Dropdown list
But when they are added to the cart, they are in this order:
Dropdown list
Text box 1
Text box 2
Text box 3
Why is this happening? Here's the relevant code from my product page:
{%- when 'custom_properties' -%} <div class="line-item-property__field product-form__input "> {% if block.settings.prop_label != blank %}<label class="form__label">{{ block.settings.prop_label }}</label>{% endif %} {% if block.settings.prop_name != blank %} {% if block.settings.multiline %} <textarea style="font-family: {{ block.settings.font }};" rows="4" cols="50" data-class="properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }}" class= "line_item_text field__input required {% if block.settings.required %}blank {% endif %}sample-font-box properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }}" {% if block.settings.required %}required{% endif %} type="text" name="properties[{{ block.settings.prop_name }}]" maxlength="{{ block.settings.item_length }}" {% if block.settings.placeholder_name != blank %}placeholder="{{ block.settings.placeholder_name }}"{% endif %}></textarea> {% if block.settings.showcharacters %} <div class= "personalization_feedback"></div> {% endif %} {% else %} <input style="font-family: {{ block.settings.font }};" data-class="properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }}" class= "line_item_text field__input required {% if block.settings.required %}blank {% endif %}sample-font-box properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }}" {% if block.settings.required %}required{% endif %} type="text" name="properties[{{ block.settings.prop_name }}]" maxlength="{{ block.settings.item_length }}" {% if block.settings.placeholder_name != blank %}placeholder="{{ block.settings.placeholder_name }}"{% endif %}> {% endif %} {% endif %} </div> {%- when 'custom_prop_dropdown' -%} <div class="product-form__input product-form__input--dropdown"> <label class="form__label">{{ block.settings.prop_drop_label }}</label> <div class="select"> <select class="select__select " name="properties[{{ block.settings.prop_drop_name }}]" form="{{ product_form_id }}"> <option value={{ block.settings.dropdown1 }}>{{ block.settings.dropdown1 }}</option> <option value={{ block.settings.dropdown2 }}>{{ block.settings.dropdown2 }}</option> <option value={{ block.settings.dropdown3 }}>{{ block.settings.dropdown3 }}</option> <option value={{ block.settings.dropdown4 }}>{{ block.settings.dropdown4 }}</option> </select> {% render 'icon-caret' %} </div> </div>
This may be part of the problem too, but I'm not sure. This is just a little farther down on the product page:
{%- form 'product', product, id: product_form_id, class: 'form', data-type: 'add-to-cart-form' -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>
{% assign block_show = false %}
{% for block in section.blocks %}
{% if block.type == "custom_properties" %}
{% assign block_show = true %}
<input type="text" style="display:none;" name="properties[{{ block.settings.prop_name }}]" data-class="properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }}" class="H_properties_{{ block.settings.prop_name | replace : " ", "_" | downcase }} H_properties_input {% if block.settings.required %}required{% endif %}" value="">
{% endif %}
{% endfor %}
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024