ShineOn now has beautiful and profitable ring products available in 18K gold and stainless steel finishes. You can now design your own unisex signet rings. Available in sizes 4-13 (size 3 coming soon).

With the introduction of rings to your product line, there is one important step to consider. You are responsible for collecting the ring size from your customer. We cannot fulfill orders until you have a process to do so.

There are 2 ways to automate this. 

  1. (Recommended) If you're using the ShineOn Product Page (our theme upgrade), then you're already all set! Congratulations, we know you can crush it selling rings! This method will also be ready for when we launch engraving and Buyer Upload features for rings!
  2. (Advanced) If you prefer to use your own product page, you will need to make a slight modification to it so your sales capture a custom property "Size (US)". This can be accomplished by placing a liquid code snippet where you want the property to appear on your product page.

Option 2: Liquid Snippet

In your product.liquid file, this snippet must appear in between the <form>HERE</form> tag.

Output will vary depending on your theme, please consult with a HTML / CSS expert for help styling.

{% if product.selected_or_first_available_variant.metafields.shineon.type == 'ring' %}
{% assign ring_sizes = '3,4,5,6,7,8,9,10,11,12,13' | split: ',' %}
{% assign ring_fmrs_enabled = true %}

<div class="field-wrap option-ring-size">
  <label for="ring-size-select" class="option-label option-label-ring">
      CHOOSE YOUR RING SIZE (US)&nbsp;
  </label>
  <div class="row row-ring-size">
    <div {%- if ring_fmrs_enabled -%}style="width: 50%;"{%- else -%}style="width: 100%;"{%- endif -%}>
      <div>
        <select id="ring-size-select" class="ring-size-select" name="properties[Size (US)]" required>
          <option disabled="disabled" selected="selected">Please select your size</option>
          {% for ring_size in ring_sizes %}
          <option value="{{ ring_size }}">Size {{ ring_size }}</option>
          {% endfor %}
        </select>
      </div>
    </div>{%- if ring_fmrs_enabled -%}<div style="width: 50%">
      <!--FMRS-BUTTON:BEGIN-->
      <a id="ringsizer"
         class="fmrs-button-host"
         href="//shineonjewelry.findmyringsize.com"
         target="_blank">
        FIND MY SIZE
      </a>
      <!--FMRS-BUTTON:END-->
    </div>
  </div>
  <!--FMRS-POPUP:BEGIN -->
  <script src="//findmyringsize.com/Shared/Embed/fmrs-1.0.js" async></script>
  <script>
    document.addEventListener("DOMContentLoaded", function (event) {
      jQuery(document).ready(function () {
        if (typeof jQuery.fn.size === 'undefined') {
          jQuery.fn.size = function () {
            return this.length;
          }
        }
        var ringsizer = new FMRS();
        ringsizer.initialize({
          'client': 'shineonjewelry',
          'mode': 'overlay',
          'overlaySettings': {boxTheme: 'facebook', shadowOverlay: true}
        });
        ringsizer.bind();
      });
    });
  </script>
  <!--FMRS-POPUP:END-->
  {% endif %}
</div><!-- END so-field-wrap so-option-ring-size -->
{% endif %}


Did this answer your question?