Create Text Box in Cart For Customized Products

New Member
11 0 0

I am using an app that allows customers on certain products to add Engraving as an option.  I would like to have a text box in the cart limited to 16 characters for customers to input the engraving text.  I only want the box when the product "Engraving" is in the cart.  I already have the Add Order Notes box active all of the time.

0 Likes
Highlighted
Shopify Staff
Shopify Staff
114 0 4

Hello Jeff! 

Kassey here from the Shopify Guru Team! We have some awesome apps in the Shopify App Store that would help you enable that type of feature for your products! I would recommend checking out:

I hope this helps, but if you have any further questions - be sure to reach out to Shopify support!

Kassey S
Shopify Guru
support@shopify.com

0 Likes
New Member
11 0 0

Thanks Kassey.  My product has an upcharge so Infinite Options doesn't work since that isn't part of their product.  I tried using variants and adding a monogram box on the product which worked well.  I installed the W3 cross sell app which then doubled up the engraving on the product.  I really like the W3 app so I want to keep it.  I worked around the issue by making Engraving a product that the W3 app will pop as an option to add to the product.  It all works great except I need a box on the shopping cart or the product that includes the box for engraving only when engraving is selected.

0 Likes
Shopify Partner
2536 31 563

Hi Jeff, 

this can easily be done by modifying your cart template. 

It is not clear what is your logic when there are several engraveable products added to cart and some of them should have engraving(s) and some are not, but you can start with something like this code:

{% for item in cart.items %}
 {% if item.product.title == "Engraving" %}
    <p class="cart-attribute__field">
	  <label for="engraving-text">Engraving Text</label>
	  <input required 
             class="required" 
             id="engraving-text" 
             type="text" 
             name="attributes[Engraving Text]" 
             value='{{ cart.attributes["Engraving Text"] }}'>
	</p>
 {% endif %}
{% endfor %}

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
11 0 0

Thanks Tim, this looks exactly like what I want. I am new to Shopify and not real savvy with the coding.  I assume this would go in the footer field?  I tried to put it into several areas but couldn't get it to work.  Here is my code.  Where should I insert it?

 <footer class="cart__footer">
        <div class="grid">
          {% if section.settings.cart_notes_enable %}
            <div class="grid__item medium-up--one-half cart-note">
              <label for="CartSpecialInstructions" class="cart-note__label small--text-center">{{ 'cart.general.note' | t }}</label>
              <textarea name="note" id="CartSpecialInstructions" class="cart-note__input">{{ cart.note }}</textarea>
            </div>
          {% endif %}
          <div class="grid__item text-right small--text-center{% if section.settings.cart_notes_enable %} medium-up--one-half{% endif %}">
            <div>
              <span class="cart__subtotal-title">{{ 'cart.general.subtotal' | t }}</span>
              <span class="cart__subtotal">{{ cart.total_price | money }}</span>
            </div>
            {% if cart.total_discounts > 0 %}
              <div class="cart__savings">
                {{ 'cart.general.savings' | t }}
                <span class="cart__savings-amount">{{ cart.total_discounts | money }}</span>
              </div>
            {% endif %}
            <div class="cart__shipping">{{ 'cart.general.shipping_at_checkout' | t }}</div>
            <a href="collections/all" class="btn btn--secondary cart__update cart__continue--large small--hide" >{{ 'cart.general.continue_shopping' | t }}</a>
            <input type="submit" name="update" class="btn btn--secondary cart__update cart__update--large small--hide" value="{{ 'cart.general.update' | t }}">
            <input type="submit" name="checkout" class="btn btn--small-wide" value="{{ 'cart.general.checkout' | t }}">
            {% if additional_checkout_buttons %}
              <div class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
            {% endif %}
          </div>
        </div>
      </footer>
    </form>
  {% else %}
    <div class="empty-page-content text-center">
      <h1>{{ 'cart.general.title' | t }}</h1>
      <p class="cart--empty-message">{{ 'cart.general.empty' | t }}</p>
      <div class="cookie-message">
        <p>{{ 'cart.general.cookies_required' | t }}</p>
      </div>
      <a href="/" class="btn btn--has-icon-after cart__continue-btn">{{ 'general.404.link' | t }}{% include 'icon-arrow-right' %}</a>
    </div>
  {% endif %}
</div>

0 Likes
Shopify Partner
2536 31 563

Try somewhere above <label for="CartSpecialInstructions"...

There were couple typos, including missing closing quote in the if line. Try the amended code.

It would be great to see the actual storefront if it does not help (including the password from the Onnline Store->Preferences->Password Page).

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
0 Likes
New Member
11 0 0

Hi Tim, I still can't get it to work for some reason.  Here is the code: l8I133d2x17)

You brought up something I didn't think about and is a good question on multiple engraving orders.  What would really be best is to add code in the products template to require a 16 digit text field to be entered when "Engraving" is selected.  I am using the W3 app to add the "Select to Add Accessories" section.  Engraving is a product I set up.  Here is a product where they can select Engraving.

https://penplace.myshopify.com/collections/fountain-pen/products/cross-atx-matte-chrome-fountain-pen

0 Likes
New Member
11 0 0

Tim, I did add a field to the engraving product to enter engraving.  I could do it that way if somehow the engraving text would pop up when the customer selects the engraving option. 

0 Likes