Font preview box

New Member
73 0 0

I sell personalized products and some of them have multiple fonts that the customer can choose to have their custom text engraved in.

Can anyone point me in the right direction on the code required to make this happen?

I would like an effect similar to how Amazon does it---the customer chooses the font, and then when they type in their custom text, the text shows up next to the input box in the font they selected.

Thanks!

0 Likes
Shopify Partner
1346 22 208

Hi,

I've made a basic example with few fonts. Hope its what you are looking for:

https://jsfiddle.net/gzv55q1k/

The code should be self explaining 

https://sections.design tips, tricks & Shopify sections
1 Like
New Member
73 0 0

Yes, that's just what I'm looking for!

I have my products set up so that the variants are the different font names.  Would I just need to change this:

var TextInput = document.getElementById('TextInput');

to this:

var TextInput = document.getElementById('variant.title');

This is the variant section from my product:

<div id="product-variants" class="{% if hide_default_title %} hidden{% endif %} product-detail">
              <select id="product-select" name="id">
              {% for variant in product.variants %}
                <option{% if variant == product.selected_or_first_available_variant %} selected{% endif %} value="{{ variant.id }}">
                {{ variant.title }} - {{ variant.price | money }}
                </option>
              {% endfor %}
              </select>
            </div>        

            <form id="add-item-form" action="/cart/add" method="post" class="variants clearfix">
        &nbsp;
         <div>
           <p><strong>Engraved Text</strong></p>
          <p><input required type="text" maxlength="75" Placeholder="Line 1" id="Line1" name="properties[Line 1:]" /></p>
          <p><input type="text" maxlength="75" Placeholder="Line 2 (optional)" id="Line2" name="properties[Line 2:]" /></p>
        </div>

 

0 Likes
Shopify Partner
1346 22 208

Can you please post a link to a page that have this set up? I can't debug without seeing the actual code.

https://sections.design tips, tricks & Shopify sections
0 Likes
Shopify Partner
1346 22 208

Assuming you have the IDs set up right, you are running this function before those elements exists. The fonts option select element is dynamically generated, you need to run after it has been added to the DOM.

In the product page look for this function: new Shopify.OptionSelectors 

Place the code after "$('.selector-wrapper:eq(0)').prepend('<label>Font</label>');"

https://sections.design tips, tricks & Shopify sections
0 Likes
New Member
73 0 0

I appreciate your help.  I tried that but it still doesn't work. 

It looks like this may be above my skill level and I may need to hire someone.

0 Likes
Shopify Partner
1346 22 208

You are almost there.

You need now to set up the CSS classes but some will not work due to how the options are set up.

.Brush.Script {
  font-family: Brush Script;
}

.Freehand {
  font-family: Freehand;
}

For example "Allura (shown)" will not ba a valid class name. For that you will need some extra code.

Add the CSS like above and we will take it from there.

https://sections.design tips, tricks & Shopify sections
0 Likes
New Member
73 0 0

Ok, I added the CSS code to the bottom of my page. (I can add the other fonts later, it's still not changing the input text to either Brush Script or Freehand).

Do I have this set up right?  This snippet is where I pasted your code after $('.selector-wrapper:eq(0)').prepend('<label>Font</label>');:

jQuery(function($) {

    new Shopify.OptionSelectors('product-select', { product: {{ product | json }}, onVariantSelected: selectCallback, enableHistoryState: true });

    // Add label if only one product option and it isn't 'Title'.
    {% if product.options.size == 1 and product.options.first != 'Title' %}
      $('.selector-wrapper:eq(0)').prepend('<label>{{ product.options.first }}</label>');
                                           
                                           
  
  var TextInput = document.getElementById('Line1');
var Fonts = document.getElementById('product-select-option-0');
var Preview = document.getElementById('Preview');

TextInput.addEventListener('keyup', textChange, false);
function textChange(){
  Preview.textContent = TextInput.value;
}

Fonts.addEventListener('change', fontChange, false);
function fontChange(){
  Preview.className = this.value;
  console.log(this.value)
}
  
 
  
    {% endif %}

This is from the live page and is where I got the "product-select-option-0" from:

<select class="single-option-selector" data-option="option1" id="product-select-option-0">

<option value="Allura (shown)">Allura (shown)</option>
<option value="AR Julian">AR Julian</option>
<option value="Bookman Old Style">Bookman Old Style</option>
<option value="Brush Script">Brush Script</option>
<option value="Freehand">Freehand</option>
<option value="Impact">Impact</option>
<option value="Olde English">Olde English</option>
<option value="Other (see description)">Other (see description)</option></select>

 

0 Likes
New Member
73 0 0

Just realized that when I added the CSS code to the page, it made my "Product Details" tabs stop working.

0 Likes