FashionCraft Design Studio Instructions (LABELS)

Our personalized items can be displayed on your site the same way we display them here. These can be set up using our Standard interface or our Standard With Autofill interface.*

Standard Interface

  • Designer is displayed in separate window.
  • Shoppers design item there, then manually fill out their choices on your product page.

Standard With Autofill

  • Designer is displayed in overlay.
  • Shoppers design item there, then the system automatically fills in their choices on your product page.

 

Instructions


1. Choose your display method:

STANDARD

Choose the item/type you are displaying, and use the supplied link. Replace "productCode" with the actual product code of the item.

<a class="fashioncraftDesignerLink" href="http://www.fashioncraft.com/fashioncraftDesignStudio/?standard&labelType=productCode" target="_blank">Click here to design this item</a>

<a class="fashioncraftDesignerLink" href="http://www.fashioncraft.com/fashioncraftDesignStudio/?standard&labelType=vintage&itemNumber=productCode" target="_blank">Click here to design this item</a>

<a class="fashioncraftDesignerLink" href="http://www.fashioncraft.com/fashioncraftDesignStudio/?standard&labelType=wanderlust&itemNumber=productCode" target="_blank">Click here to design this item</a>

STANDARD WITH AUTOFILL

Standard with Autofill: add the following javascript code to your product page. If your site already uses jQuery and/or jQueryUI, you can omit those lines:


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){jQuery("<link/>").attr({ "type": "text/css", "rel" : "stylesheet", "id" : "fashioncraftJQueryUIStylesheet"
}).appendTo("head");jQuery("#fashioncraftJQueryUIStylesheet").attr("href","//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/start/jquery-ui.min.css");});</script>
<script type="text/javascript" src="//www.fashioncraft.com/fashioncraftDesignStudio/studio/js/java.js"></script>


2. Choose the item/type you are displaying, and use the supplied link. Replace "productCode" with the actual product code of the item.


<a class="fashioncraftDesignerLink" href="http://www.fashioncraft.com/fashioncraftDesignStudio/?standard&labelType=productCode" target="_blank">Click here to design this item</a>

<a class="fashioncraftDesignerLink" href="http://www.fashioncraft.com/fashioncraftDesignStudio/?standard&labelType=vintage&itemNumber=productCode" target="_blank">Click here to design this item</a>

<a class="fashioncraftDesignerLink" href="http://www.fashioncraft.com/fashioncraftDesignStudio/?labelType=wanderlust&itemNumber=productCode" target="_blank">Click here to design this item</a>

notes:*The Advanced (downloadable) interface has been discontinued as of 2016. All personalized items are being transitioned to the Design Studio's Standard with Autofill interface, as it has been upgraded to display similarly to the downloadable version.


'Dummy' Form Field Options

Our personalized glassware and Design Your Own systems must search for and pinpoint the dropdown menus on your website. One way to make this much more precise is to include 'dummy' options that serve as markers. For example in the dropdown menu for Background Colors, we add a 'dummy' option called 'fashioncraftBackgroundColors'. When the page loads, our javascript searches for that option, and marks the dropdown menu. Then it instantly removes the option so humans will not see it.

This greatly improves the accuracy of menu pinpointing, so we highly recommend using the dummy options. Simply add the appropriate option to each of your dropdown menus to improve accuracy. Here is the list of options:

  • designs menu (glassware and DYO labels): 'fashioncraftDesigns'
  • fonts menu (glassware and DYO labels): 'fashioncraftFonts'
  • color menu (glassware): 'fashioncraftColors'
  • shape menu (tags): 'fashioncraftShapes'
  • background color menu (DYO labels and PE labels): 'fashioncraftBackgroundColors'
  • border color menu (DYO labels): 'fashioncraftBorderColors'
  • border pattern (DYO labels, some PE labels): 'fashioncraftBorderPattern'
  • pattern color (DYO labels): 'fashioncraftPatternColor'
  • layout menu (DYO labels): 'fashioncraftLayout'
  • line 1 color (DYO labels): 'fashioncraftLine1Color'
  • lines 2/3 color (DYO labels): 'fashioncraftLines23Color'
  • tags or stickers (tags): 'fashioncraftLabelsTagsOrStickers'
  • center letter (greek glassware): 'fashioncraftCenterLetter'
  • left letter (greek glassware): 'fashioncraftLeftLetter'
  • right letter (greek glassware): 'fashioncraftRightLetter'
  • Yes/No (glassware boxes, etc): 'fashioncraftYesNo'
  • optional LED candles (glassware): 'fashioncraftAddCandles'






TOP