Using line item properties to add an engraving option to a product.

In this tutorial, we will use the new Shopify feature that is line item properties to capture engraving text on the product page.

Click here to see the demo

We want our engraving to be optional, so we will create a Shopify option for it and reveal our text box only when our customer wants the engraving option.

When we land on the engravable product page, we want to see this:

We need an Engraving option with 2 values: No Engraving, and With Engraving:

When the With Engraving option is selected, we want to reveal a text box to capture the monogram text, like so:

Once the engraved product has been added the the cart, we want to see the Monogram text like so on the cart page:

Click here to see the demo

First step: adding the Engraving option to your product

Go to your product page in your admin and add an Engraving option to your product. Give it a default value of No Engraving. Then save. After that, under Inventory, select all of your variants and duplicate them in another Engraving value, this time, With Engraving. Now, all of your variants come with and without engraving. Adjust the price of the variants that come with engraving, they will likely be more expensive.

How to add options to your products (YouTube video).

Second step: creating an alternate product template for your product

Go to Themes > Template Editor > Templates and create a new product template called 'product.monogram.liquid'. Then go back to your product page and assign the new template to your product.

How to create alternate templates and assign them to your content.

Third step: adding the text box to your product template

In product.monogram.liquid, add the following code below the select#product-select element on line no 58. Move down the {% if settings.show_qty %} condition, add your code above that, make room!

<div class="property-wrapper hidden" id="monogram-wrapper" style="clear:both; padding-top:20px; margin:0;">
  <label for="monogram-property">Monogram</label>
  <input class="text" type="text" id="monogram-property" name="properties[Monogram]" value="" disabled="disabled" />
</div>

The text in bold will become your property label on the cart page.

For now, the wrapper is hidden and the text box is disabled. We'll need to toggle that.

Fourth step: adding the logic to toggle the visibility of your text box

Still in product.monogram.liquid, scroll down to line no 288. Right after the call to new Shopify.OptionSelectors, add this:

// Toggle monogram text box.
jQuery('.single-option-selector:eq({{ product.options.size | minus: 1 }})').change(function() {
  if (jQuery(this).val() === 'With Engraving') {
    jQuery('#monogram-wrapper').removeClass('hidden').fadeTo(200,1);
    jQuery('#monogram-wrapper input').removeAttr('disabled').removeClass('disabled');
  }
  else {
    jQuery('#monogram-wrapper').fadeTo(200,0).addClass('hidden');
    jQuery('#monogram-wrapper input').addClass('disabled').attr('disabled', 'disabled'); 
  }
});

Make sure that the value in bold corresponds to the exact option value that is with engraving.

Click here to see the demo



Comment on this post (26 comments)

  • Iva says...

    Richard Crawford Jersey.Welcome to 23 Kyle Fuller Jersey shop – one of the best suppliers on the
    Internet. We specialise in the manufacture and supply of top quality
    cheap 47 Jake Ryan Jersey.

    August 18, 2017

  • benji says...

    Hi Caroline,
    just clicked on your demo and it seems it doesnt work anymore. ( no custom field appears )

    cheers
    benjamin

    August 08, 2017

  • Lupe says...

    purchase black friday jerseys | Professional 57 C.J.
    Mosley Jersey Outlet Sale, clean cyber monday jerseys From China
    Store for NFL Fans. Buy Discount NFL Football Jerseys,
    Hockey jerseys here.

    August 04, 2017

  • Cliff says...

    21 Alterraun Verner Jersey.Wholesale Nike Texans 99 J.J. Watt
    Navy Blue Team Color With 10th Patch Womens Stitched
    NFL Elite Jersey Directory. You can Online 23 Marcus Murphy Jersey,
    Wholesale jersey plain,aj mccarron jersey,cheap custom jersey

    July 19, 2017

  • Sammy says...

    cheap college jerseys.Visit the official Jerseys store of the NFL,NHL,NBA,MLB,soccer,NCAA, supply 35 Dashaun Phillips Jersey from China.
    Discount all kinds of where to get jerseys for cheap, free
    shipping.

    June 11, 2017

  • Leticia says...

    70 Ja’Wuan James Jersey.Buy 96 Henry Anderson Jersey china for authentic,
    wholesale football stitched 21 Brent Grimes Jersey here to get
    free shipping. Sell high quality low price.

    June 11, 2017

  • Astrid says...

    91 Kasim Edebali Jersey.Nike Cowboys 4 Dak
    Prescott White Mens Stitched NFL Elite Rush Jersey site is the best site to buy Nike Giants 90 Jason Pierre-Paul
    Royal Blue Team Color Mens Stitched NFL Elite Jersey!
    A complete selection of American football jerseys, Cheap Authentic hockey
    Jersey and baseball.

    June 11, 2017

  • cheap nfl nike jerseys china says...

    Discover what’s the deal with ingbacks? According to Wikipedia, WP supports automatic pingbacks where all the links in a published article can be pinged when the article is published?we supply cheap nfl jerseys That explains why I get messages about new comments? when posting an edit that cross-references another post of my own. Info on trackbacks and pingbacks in WP here.
    cheap nfl nike jerseys china http://www.usacheapnfl.com/nfl-jerseys-c-561/

    June 03, 2017

  • Aaronzwep says...

    viagra 5mg canada joined
    http://viagra-withoutdoctorsprescriptions.org – viagra no prescription
    viagra 20mg online registered users
    viagra no prescription
    – viagra 5mg in total there are
    viagra vs viagra drugs comments.asp

    January 22, 2017

  • Dani says...

    I have used this code for the engraving option to pop up when a certain size is selected, but I want it to show up with size ‘large’ and ‘one size’ are selected in the drop down menu… When I add the jQuery for both option, only one will work… is there a way for the input field to become visible when either the ‘large’ or ‘one size’ is selected?

    December 20, 2014

  • Leave a comment