Variables selection not reflected in checkout

[ellylla]

I am using the theme Narrative and added 3 variable to my product page - size, bottom and sleeve. As well as custom coded 4 variables. 

When choosing my variables and adding them to cart, my cart doesn't reflect my selections. What I see in the checkout page is, the default selection - XS, Harem, Basic even when I changed those selections and add them to cart. 

Does anyone know why this would happen? 

This is what my cart.liquid looks like: 

{% comment %}
The contents of the cart.liquid template can be found in /sections/cart-template/
{% endcomment %}

{% section 'cart-template' %}

[LitCommerce]

Hi @ellylla,

Please send your site and if your site is password protected, please send me the password. I will check it for you.

[ellylla]

Hi - I'd really appreciate that! The page is: https://wearellylla.com/products/evolve-top-set. When I change the variables, it's not reflected in the checkout. 

Another note, is I created a custom section for this product page with this extra code:

<div class="product-form__item">
<label class = "single-option-selector__label" for "top color">Top Color
</label><br>
<select id="top-colour" name="properties[Top Colour]" class="single-option-selector" data-option-input="padding-left: 71.9219px; opacity: 1;">
<option value="Black">Black</option>
<option value="White">White</option>
</select>
</div>
<div class="product-form__item">
<label class = "single-option-selector__label" for "sleeve color">
Sleeve Color
</label>
<select id="sleeve-colour" name="properties[Sleeve Colour]" class="single-option-selector" data-option-input="padding-left: 71.9219px; opacity: 1;">
<option value="Black">Black</option>
<option value="White">White</option>
</select>
</div>
<div class="product-form__item">
<label class = "single-option-selector__label" for "sleeves">Sleeve Extension Color</label><br>
<select class="single-option-selector" data-option-input="padding-left: 71.9219px; opacity: 1;" id="sleeve-extension-color" name="properties[Sleeve Extension Color]">
<option value="Black">Black</option>
<option value="White">White</option>
</select>
</div>
<div class="product-form__item">
<label class = "single-option-selector__label" for "sleeves">Bottom Color</label><br>
<select class="single-option-selector" data-option-input="padding-left: 71.9219px; opacity: 1;" id="bottom-color" name="properties[Bottom Color]">
<option value="Black">Black</option>
<option value="White">White</option>
</select>
</div>

I am assuming that this is why it's not working because when I use another product template, the variables reflect. 

Thanks so much! 

[LitCommerce · Accepted solution]

Hi @ellylla,

Please remove 'data-option-input' for properties, it will work fine: https://i.imgur.com/XjmrDZB.png

Hope it helps!

[ellylla]

Yes! It works! Thanks so much for the help 🙂 

[Elisaw]

@LitCommerceI am having a similar problem but I can't figure out why. Would you be able to help me? I am using Debut Theme on this website: https://tartar-berlin.com. Thank you so much!