Add Custom Textfield / Dropdown in Dawn Theme Shopify 2.0 - No APP needed

{% if youLike === true %} Hit Subscribe {% endif %}

With the Dawn theme, adding a custom product attribute or textbox was made simple. You can add multiple Shopify UI elements, just make sure the name and ID are unique. Follow instructions below. 

Note: If you have the Dawn-Debut product page, this is also going to work. 

1. Go to Shopify UI elements generator. Link here.

2. Choose the line-item-property. Make sure you click the "show at checkout" if you want the information shown upon check-out. Click "copy to clipboard"

3. Go to your Online store > Themes > Actions > Edit code

4. Go to Section folder and open the main-product.liquid

5. Find this code below . It is should be under the "{%- when 'buy_buttons' -%}

 {%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}

 

6. Paste the code after the {% form ...... %}. See image below, where to paste it. 

product-attribute

 

See customize code for custom style.

Add the code in blue to your Shopify UI Element code

For text-short (see image below how it looks):

<p class="line-item-property__field">
<label for="your-name">Your name</label><br>
<input id="your-name" type="text" name="properties[Your name]" style="width: 100%; line-height: 2;">
</p>

text-short

For text-long (see image below how it looks):

<p class="line-item-property__field">
<label for="your-name">Your name</label><br>
<textarea id="your-name" name="properties[Your name]" style="width:100%"></textarea>
</p>

text-long

 

For drop-down (see image below how it looks):

<p class="line-item-property__field">
<label>Your name</label><br>
<select id="your-name" name="properties[Your name]" style="font-size: 1.5rem; width: 100%; padding: 2%;">
<option value="Red">Red</option>
<option value="White">White</option>
<option value="Blue">Blue</option>
</select>
</p>

drop-down

That is it (",) If you want custom designs, just message me in "chat with us."

Deixe um comentário