Shopify Design

gunnar-1 · ‎08-04-2021

Hi There,

I'm currently switching my shop to the new Dawn theme and my original theme was based on Debut. It seems that the Dawn theme uses an Ajax cart to submit an add to cart action, but I'm unable to add the chosen line item properties. Can anybody help me with the code I need to change, or add to the product-form.js file to achieve this?

Thank you in advance.

LamQSolutions · ‎08-04-2021

Hi,

To add the line in the Dawn theme, you can follow these steps below

1. Go to file sections/main-product.liquid, find <div class="product-form__input product-form__quantity"> and insert the following under that line

<div>
   <style>
      .product__info-container--sticky {
      position: static !important;
      }
   </style>
   <label class="form__label" for="pinfel-select">Pinfel pack</label>
   <div class="select" id="pinfel-select">
      <select required class="select__select required" id="pinfel">
         <option class="fruta" value="Fruta">{{ 'products.product.fruit' | t }}</option>
         <option class="jogos" value="Jogos">{{ 'products.product.games' | t }}</option>
         <option class="rock" value="Rock">Rock</option>
         <option class="espaco" value="Espaço">{{ 'products.product.space' | t }}</option>
      </select>
      {% render 'icon-caret' %}
   </div>
</div>
</div>

2. Go to the file assets/product-form.js, find const body = JSON.stringify({ and add the following code under that line

properties: { Pinfel: $('#pinfel-select select').val() },

Found my answer helpful? Please LIKE or Accept Solutions.
You may be interested in our apps
Scrolly Telling - Create scroll-based animations visually.
Ultimate Sections - Slideshow, Gallery, Collection, FAQs, Brand, Info box, Testimonial and more

View solution in original post

Oupas · ‎11-18-2021

Thank you @Scott-WebWizard this worked out great! Much simpler and less messy 🙂

I was having the same issue as others here: Adding the product to cart didn't work if I had with several forms, and, in case I had different product types/pages that did not require that specific form, I had to include the form code in that page anyway, but hide through css in order to work. With Scott's answer was much simpler and works with all types of forms. My code below for a dropdown menu and a text form:

{% if product.type == 'ProductExample' %}
              <div class="product-form__input product-form__input--dropdown">
              <p>
                <label class="form__label">Choose a card</label>
              <select class="select__select" id="Card" name="properties[Card]" form="product-form-{{ section.id }}">
              <option value="Love" >Love</option>
              <option value="Friends">Friendship</option>
              <option value="Blank">Blank</option>
              <option  value="Custom">Custom</option>
              </select>
                </p>
              </div>
              <p class="line-item-property__field ">
                <label class="form__label">Custom Message</label>
                <input class="select__select" id="Message" type="text" name="properties[Message]" form="product-form-{{ section.id }}">
              </p>
{% endif %}

adam_mm · ‎02-14-2023

This is far and away the easiest and safest way to do this. You can then just drop custom liquid blocks into your templates and away you go. No mucking around with core files. Thanks Scott!

Talha_dl112 · ‎08-02-2023

Hi,

I cn't find const body = JSON.stringify({ line in product-form.js
"2. Go to the file assets/product-form.js, find const body = JSON.stringify({ and add the following code under that line"

Shopify Design

Line item properties in Dawn Theme

Community Blog Articles

Shopify Community

Support

Shopify

Quick Links