Shopify Setup Information

1 LIVE CHECK LIST
2 Theme Changes
- 2.1 theme Settings
  - 2.1.1 button Colour
- 2.2 h2 Font
3 Product Data
4 Meta Data
- 4.1 Metadata used for images
- 4.2 Definitions of Meta Data Categories
5 Product Import Procedure
- 5.1 Excel files
- 5.2 Process
6 Tags
7 Image Sizes
- 7.1 MainPage
- 7.2 Products
  - 7.2.1 DIY
    - 7.2.1.1 Change board Sizes in Fusion
  - 7.2.2 Stock Signs
8 File Naming Convention
9 sku

LIVE CHECK LIST

Email

reduce size if email accounts.
- backup all emails. Use Outlook to save as a .pst file.
- password protect this file as it contains email information.
- Follow this link to archive old emails
- instructions to import a .pst file
- you can Open and close a .pst file without importing it to see the contents.
- Wait for file to index you can see index status in in Search/Options/Search Tools/Indexing status.
- To archive old emails in outlook file/info/tools/clean up old items then select archive folder and all sub-folders, select older than date, and file location. If you don't change the file name it will add it to existing. you can change to a new file and it will add a new archive folder to outlook.
make new emails on Rebel
move emails to Rebel

Notes on Email changes

These changes made in Nov 2019 before moving emails to rebel

I exported .pst files of all sales and michael email files to onedrive
saved as Michaelbackup and salesbackup on business onedrive/operations/email backup
then saved both together as All2019 which is all files to Nov 5 2019 from both emails in indec/downloads (not on onedrive) 5.2gb
added all2019 to outlook as folder Outlook Data File. this took +/- an hour to index. File contains all the emails from sales and michael to nov 5 2019.
Archived 2014-2016 folder from michael to imdec\Emails\Archive. While doing this outlook automatically archived sent items to imdec/documents/outlook files/archive.pst this file(folder documents) is is synced to the personal onedrive. Both archive files now show up in archives folder in outlook.
Cleaned up michael emails this reduced size by 93 mb.
Archived all emails in michael older than Jan 1 2019 to business onedrive in archive2018Michael this removed 426 mb from michael to reduce the size to 485 mb
used outlook to cleaned up sales email. This removed 4800 emails.
Archived all emails in sales older than Jan 1 2019 to business onedrive in archive2018Sales this removed 2909 mb from sales (3.75 gb) to reduce the size to 841 mb

Summarize Outlook Email Archives

Can be found in file/info/account settings under the data files tab.

Outlook Data Folder contains All2019.pst All emails to Nov 5 2019
Archive Michael contains 2014-2016
Archive Michael contains Sent folder
Archive Michael contains Older than Jan 1 2019
Archive Sales contains Older than Jan 1 2019

Auto Archive turned off. file/options/advanced/auto archive

Found this Link that explains how to unsubscribe folders. Need to do this. Not sure this is the best way, as I should be able to unsubscribe each folder individually.

add 100 products

finish rtf product descriptions

setup payment information

complete policies

generate site map for redirects

See the following instructions to add URL's from broken links

To go Live

backup emails in outlook
add emails to rebel. ca This will turn on "advanced DNS settings" for looseletters.ca so I can point to Shopify.

Theme Changes

theme Settings

button Colour

I set the button colour in the theme settings of the debut theme to #810C70

h2 Font

A copy of the original file is saves in the shopify/code folder on my PC.

In the file theme.scss.liquid on line 1394 the original theme is:

h2 {
  font-size: em(floor($font-size-header * 0.78));
  text-transform: uppercase;
  letter-spacing: 0.1em;

  @include media-query($small) {
    font-size: em(floor(($font-size-header * 0.78) * 0.9));
  }
}

I made the following changes:

the text-transform to none.
changes the letter-spacing to 0.
the font-size-header * (factor) from 0.78 to 1.
the media-query font-size-header to 1.0
Added the colour of the button to the header.

This is how it is as of Oct 14th 2019

/*=====Start of changes made by MVR Oct 14 2019========*/
h2 {
  font-size: em(floor($font-size-header * 1.00));
  text-transform: none;
  letter-spacing: 0;
  color: #810C70;
  @include media-query($small) {
    font-size: em(floor(($font-size-header * 1.00) * 1.0));
  }
}
/*=====End of changes made by MVR Oct 14 2019========*/

Product Data

HS Tariff Code

HS (Harmonized System) code Used by border officers to classify this product.

Finished signs 970190 --Arkwork, collages and similar decorative plaques
RTF products 940560 --Illuminated signs, name plates and the like.

Sale to RTF

in locales file en.default.json on line

336 "on_sale": "Sale", 337 "sale_price": "Sale price",

changed "Sale" to "RTF" --MVR (talk) 18:50, 28 September 2019 (CDT)

Variants

IMAGE update

To change the variant by clicking the image.

Make the changes by following these instructions: https://help.shopify.com/en/themes/customization/products/variants/select-variants-by-clicking-images

From your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit, and then click Actions > Edit code.
In the Sections folder, open the product-template.liquid template. (If your theme is Venture, see the note above.)

{% comment %}
Place this in your product.liquid template, at the bottom.
{% endcomment %}
{% if product.variants.size > 1 %}
<script>
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    optionValue,
    productOptions = [];
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
         
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
         	
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
       }
       productOptions.push(variant);
    {% endfor %}
</script> 
{% endif %}

4 Paste the copied code at the bottom of the product-template.liquid template.
Click Save.
Open the theme.js or theme.js.liquid file in your Assets folder.

$(document).ready(function() {
  thumbnails = $('img[src*="/products/"]').not(':first');
  if (thumbnails.length) {
    thumbnails.bind('click', function() {
      var arrImage = $(this).attr('src').split('?')[0].split('.');
      var strExtention = arrImage.pop();
      var strRemaining = arrImage.pop().replace(/_[a-zA-Z0-9@]+$/,'');
      var strNewImage = arrImage.join('.')+"."+strRemaining+"."+strExtention;
      if (typeof variantImages[strNewImage] !== 'undefined') {
          productOptions.forEach(function (value, i) {
           optionValue = variantImages[strNewImage]['option-'+i];
           if (optionValue !== null && $('.single-option-selector:eq('+i+') option').filter(function() { return $(this).text() === optionValue }).length) {
             $('.single-option-selector:eq('+i+')').val(optionValue).trigger('change');
           }
        });
      }
    });
  }
});

DESCRIPTION Update

Change the description to match the variant.

https://community.shopify.com/c/Shopify-Design/Demo-change-description-in-product-with-different-variants/m-p/276269

need to figure out how to establish Option number so display can be triggered on Option #

When you edit the product description, go into "Show HTML" mode. You need to create some panels. Each panel should contain the ID and description of that variant:

<p class="description" id="7397573253">Description for variant 1</p>
<p class="description" id="7397573317" style="display: none;">Description for variant 2</p>
<p class="description" id="7397573381" style="display: none;">Description for variant 3</p>

Where:

id is the variant ID can be seen in URL when variant is selected
productOptions[0].id will also give the variant id where [0] is the array index.

document.getElementById("test0").id = productOptions[0].id.toString()

style="display: none" tells the browser not to show that description
class="description" its a hook we need to use for the callback

Having this done in the description you need to edit the product.liquid (or wherever your variant change is) and add this:

Line 729 of Theme.js is place to add change to descriptions.

// selectCallback is the callback name in Timber
var selectCallback = function(variant, selector) {

   // Simply toggle on/off the panel according to the variant selected
    $('.description').css('display', 'none');
    $('#' + variant.id).css('display', 'block');
// rest of the Timber code
}

Variant choices for name signs

Choose how you want it...

It's Perfect -- I want the sign in the Picture (ships within 2 days),
Unfinished -- I want to Paint it myself (ships within 2 days),
I love the Style -- I want different Colours (ships within 4 weeks),
I love the Colours -- I want a different Name (ships within 4 weeks)

change the description per variant

In the assets folder find theme.js. At the bottom of the file ~ line 3998 add the javascript to add variant descriptions if the div tag exists.

  //ADDED BY MVR TO UPDATE VARIANT ID'S
  if (document.getElementById("test0")) {
    
    document.getElementById("test0").innerHTML = "<h3>Purchase this sign! </h3>"+
      "<p>In stock signs are <strong>ready to ship</strong> and will be shipped within 2 business days, subject to prior sale.  </p>"+
      "<p><em>If this sign is sold out, don't worry, we can make one like it just for you."+
      ' Choose the I Love the Colours option above and order the same name in the same colours.  Custom orders will take up to 4 weeks.</em></p>'+
	  "<p> </p>"    
    
    document.getElementById("test0").id = productOptions[0].id.toString();
  	//alert("test0");
  }
  if (document.getElementById("test1")) {
    document.getElementById("test1").innerHTML = "<h3>Paint your own!</h3>"+
	"<p>You can <strong>purchase the unfinished pieces </strong>and paint it yourself. "+
      "This order include the letters shapes and board you see in the picture. "+
      "Finishing instructions and tips can be found at the DIY Tips tab at the top of this page. "+
      "These are in stock and your order will be shipped within 2 business days. </p>"+
	  "<p> </p>"
    
    document.getElementById("test1").id = productOptions[1].id.toString();
  	//alert("test1");
  }
  if (document.getElementById("test2")) {
    document.getElementById("test2").innerHTML = "<h3>Custom Colours!</h3>"+
	"<p>Like the sign, want different colours. "+
    "Custom orders take up to 4 weeks to complete and ship.  A short time to wait, for something that will last a lifetime.</p>"+
	"<h4>Notes for Custom Colours:</h4>"+
	"<ol>"+
	"<li>The colour chart shows the 19 colours we offer.</li>"+
	"<li>Include your colour instructions in the comments box of the shopping cart before you check out!</li>"+
	"<li>We will send you a layout for your approval before we make your perfect sign.</li>"+
	"<li>We are happy to make changes to the layout, free of charge, until you are happy with your order. </li>"+
	"</ol>"+
	"<p> </p>"
    
    
    document.getElementById("test2").id = productOptions[2].id.toString();
  	//alert("test2");
  }
  if (document.getElementById("test3")) {
    document.getElementById("test3").innerHTML = "<h3>Change the Name!</h3>"+
    "<p>If you want a <strong>different name</strong> you can have that as well.</p>"+
	"<h4>To order a Different Name: </h4>"+  
	"<ol>"+
	"<li>A different name needs to have the same amount of letters as this sign.</li>"+
	"<li>Include the new name in the comments box of the shopping cart before you check out! </li>"+
	"<li>We will send you a layout of the new name for your approval before we make your perfect sign.  </li>"+
	"</ol>"+
    "<p>Custom orders take up to 4 weeks to complete and ship. "+
    "A short time to wait, for something that will last a lifetime.</p>"+
    "<p> </p>"
    
    document.getElementById("test3").id = productOptions[3].id.toString();
  	//alert("test3");
  }
  if (document.getElementById("notes1")) {
    document.getElementById("notes1").innerHTML = "<p><em>Be sure to check the dimensions shown in the photos with the rulers. "+
      "The rulers show both inches and centimetres.</em></p>"+
      "<p>Before adding to the cart select how you want your sign from the choices above.</p>"     
    
    
    
    
  }

The javascript checks to see if the div is present in the product description and if it is adds the inner html to the div. It replaces all the innerHTML The tags that is looks for are:

<div class="description" id="test0"></div>
<div class="description" id="test1"></div>
<div class="description" id="test2"></div>
<div class="description" id="test3"></div>
<div class="description" id="notes1"></div>

Meta Data

For the full spec see [1]

Metadata used for images

Add / Edit Metadata in Adobe Bridge

IPTC Core	Site Images	RTF Product	Finished Product
Creator	Michael Van Raay	Michael Van Raay	Michael Van Raay
Web URL(s)	https://www.looseletters.ca	https://www.looseletters.ca	https://www.looseletters.ca
Headline	Canadian made quality letters, boards and shapes	Great letters for your door or wall creative fun project.	Canadian made unique individual name signs
Description	Quality MDF wooden individual letters for your creative craft project	Individual 3 inch MDF DIY Wall Letters	Quality MDF wooden individual letters paint your own or purchase finished product
Keywords	letters alphabet wooden MDF DIY name sign craft individual	letters alphabet wooden DIY name sign craft individual	wooden MDF DIY name sign mounting board plaque craft looseletters
IPTC Subject Code
State/Province	Ontario	Ontario	Ontario
Country'	Canada	Canada	Canada
Title		Bedroom wall door name sign
Credit Line	LooseLetters.ca	LooseLetters.ca	LooseLetters.ca
Copyright Notice	©2019 Michael Van Raay	©2019 Michael Van Raay	©2019 Michael Van Raay
Copyright Status	Copyrighted	Copyrighted	Copyrighted
Rights Usage Terms	Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)	Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)	Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)
Copyright Info URL: ???	http://creativecommons.org/licenses/by-nc-nd/4.0/

Definitions of Meta Data Categories

Copyright Notice - ©2019 Michael Van Raay

Contains any necessary copyright notice for claiming the intellectual property for this photograph and should identify the current owner of the copyright for the photograph. Other entities like the creator of the photograph may be added in the corresponding field. Notes on usage rights should be provided in "Rights usage terms". Enter a Notice on the current owner of the Copyright for this image, such as ©2008 Jane Doe

Creator - Michael Van Raay

Definition Contains the name of the photographer, but in cases where the photographer should not be identified the name of a company or organisation may be appropriate. Enter the name of the person that created this image.

Credit Line - LooseLetters.ca

Definition The credit to person(s) and/or organisation(s) required by the supplier of the image to be used when published. This is a free-text field. Enter who should be credited when this image is published.

Description - Individual 3 inch MDF Letter

Definition A textual description, including captions, of the image. Enter a "caption" describing the who, what, and why of what is happening in this image, this might include names of people, and/or their role in the action that is taking place within the image.

Description Writer - Michael Van Raay

Definition Identifier or the name of the person involved in writing, editing or correcting the description of the image. Enter the name of the person involved in writing, editing or correcting the description of the image.

Headline - great letters for your wall

Definition A brief synopsis of the caption. Headline is not the same as Title. Enter a brief publishable synopsis or summary of the contents of the image.

Keywords - letters alphabet wooden DIY name signs

Definition Keywords to express the subject of the image. Keywords may be free text and don’t have to be taken from a controlled vocabulary. Codes from the controlled vocabulary IPTC Subject NewsCodes must go to the "Subject Code" field. Enter any number of keywords, terms or phrases used to express the subject matter in the image.

Rights Usage Terms - Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)

see this thread [2]

Definition The licensing parameters of the image expressed in free-text. Enter instructions on how this image can legally be used

Source - ???

Definition The name of a person or party who has a role in the content supply chain. This could be an agency, a member of an agency, an individual or a combination. Source could be different from Creator and from the entities in the Copyright Notice.

Subject Code ???

Definition Specifies one or more Subjects from the IPTC Subject-NewsCodes taxonomy to categorise the image. Each Subject is represented as a string of 8 digits in an unordered list. Enter only values from the IPTC Subject NewsCode Controlled Vocabulary (see: [3])

Title --

Definition A shorthand reference for the digital image. Title provides a short human readable name which can be a text and/or numeric reference. It is not the same as Headline. Enter a short verbal and human readable name for the image, this may be the file name. Many use the Title field to store the filename of the image, though the field may be used in many ways. Formal identifiers are provided by the Digital Image Id, or the Registry Entry property of the IPTC Extension.

Contact Information structure - Definition A generic structure providing a basic set of information to get in contact with a person or organisation. It includes an Address, a City, a Country, Email address, Phone number, a Postal Code, a State or Province and Web URL.

Address -- LooseLetters.ca Michael Van Raay Box 1791 15 John Street East

Definition The contact information address part. Comprises an optional company name and all required information to locate the building or postbox to which mail should be sent. To that end, the address is a multiline field. Enter Address for the person that created this image.

City -- Exeter, Ontario

Definition The contact information city part. Enter the City for the address of the person that created this image

Country -- Canada

Definition The contact information country part. Enter the Country name for the address of the person that created this image.

Email address(es) sales@looseletters.ca

Definition The contact information email address part. Enter the work Email address(es) for the person that created this image, such as name@domain.com

Phone number(s) +1 519-235-3633

Definition The contact information phone number part. Enter the work Phone number(s) for the person that created this image, using the international format, such as +1 (123) 456789

Postal Code -- N0M 1S7

Definition The contact information part denoting the local postal code. Enter the Postal Code for the address of the person that created this image.

State/Province -- Ontario

Definition The contact information part denoting regional information such as state or province. Enter the State for the address of the person that created this image.

Web URL(s) -- https://www.looseletters.ca

Definition The contact information web address part. Multiple addresses can be given. May have to be separated by a comma in the user interface. Enter the work Web URL(s) for the person that created this image, such as http://www.domain.com/

Product Import Procedure

Excel files

Open the following files and enable macros.

Product Export Sheet.xlsb
Product1.csv
Inventory18.xlsb

Process

ENTER the information:

Enter the Inventory Item number. If the sign is not listed in Inventory18.xlsb OR has already been added to Shopify, you will get an error.
Excel will look up name and location in Inventory file. These can be overridden by entering new values to the right of displayed values
Enter the Height and width of sign in whole inches round up.
Enter the height of board or leave blank for no board. This is a list with error checking so only valid heights are accepted.
Enter the Character size of board. 1 to 12. the width in inches will be displayed to the right. This is a list with error checking so only valid heights are accepted.
Enter the weight of the sign in grams.
Enter the count of each size of shapes (this is used to calculate the prices of the sign) If more shapes are checked than added here, an error will show in the price.
Select the radio button for the style. The existing style is shown for reference but may not be correct. The style determines the price and description of the product.
Select the shapes on the sign. Adds tags for shapes and description for some shapes.
Select descriptive tags for sign (adds tag and wording to description) Use sparingly.
Select the Colour summary radio button to best describe the sign.
Select the glitter or sparkles on the sign (this will add a tag, change the price, and be added to the description)
Select all the colours that are used in the sign.

REVIEW the information.

the descriptive product title will be beside the save button
the tag list is below the product
the price for RTF, Stock and Custom
scroll down to see the written description.

SAVE the information:

confirmed the data by pressing the SAVE button and the MACRO will complete the following steps:
the macro will copy the CSV data to the Products1.csv file and save that file.
the macro will add an entry in the Inventory18.xlsb file to move the location of the sign, update the style, and record the dimensions and tags selected. and save the Inventory18.xlsb file.
the macro will return to the Input screen and reset all the values to the default ready to Input the next sign.

Image Sizes

MainPage

Banner Image has 3 size choices:

short height 33% 2048 wide by 675px
medium height 50% 2048 wide by 1024px
tall height 66% 2048 wide by 1372px

Logo is adjustable between 50px and 250px wide

Favicon is 32 x 32

Slide show images set to Large 1200 wide x 756 wide

Shopify recommends 2:1 aspect ratio is 1200 wide x 600 tall

Products

DIY

Change board Sizes in Fusion

Roll history marker to begining.
Change parameters of board Sizes
Roll history to display sketch
edit display sketch to update array of shelves
render individual boards
roll history to end, move dividers if changing board lengths
render rack of boards.

RTF items are rendered in Fusion

Product Catagory Banner is 2048 x 400 save as jpeg
Product Images are 2048 x 2048 saves as jpeg
Show 2" and 8" as 2/3 of full screen
Show 3" and 12" as full screen (90%)

Rendered in Fusion

Render Value	Products	Banner	Brightness	1000lx	1700 lx
Ground Plane	Check	Check
Position	-63 deg	-19.9 deg
Focal length	65mm	67mm
background	Solid white	Solid White/gray
Exposure	9.2EV	9.5 EV
Aspect Ratio	1:1 Square	Custom
Custom Render
*width	2048	2048
*Height	2048	675
*Filetype	jpeg	jpeg
*Render	Local	Local
*Quality	Final	Final

Meta Data

Title = Individual Letters
Subject = DIY 2 inch letters
Authors = LooseLetters.ca
Copyright = Michael Van Raay

Stock Signs

File Naming Convention

For groupings

website use "-setV#"
products use -catV#"
RTF Components --
- Letters LooseLetters-DIY-wooden-mdf-craft-letter-L02A.jpg
- Boards LooseLetters-DIY-wooden-mdf-craft-board-B001.jpg
- Shapes LooseLetters-DIY-wooden-mdf-craft-shapes-S02flw.jpg
Stock Signs -- Name-Wall-Door-Sign-decor.jpg
Website Pictures -- LooseLetters-sell-letters-name-signs-???.jpg
Customer Creations -- fan-creation-idea-paint-your-own-submission-???.jpg
Shapes -- LooseLetters-wooden-mdf-DIY-shapes-2inch-Set

sku

Letters

L02A - Z 1.75 x 1.2 = 2.10
L03A - Z 2.50 x 1.2 = 3.00
L08A - Z 6.00 x 1.2 = 7.20
L12A - Z 9.00 x 1.2 = 10.80

Shapes

replace number with size

S02dgr (head on right side)
S02dgl (head on Left Side
S02flw
S02hrt
S02hsh
S02not
S02paw
S02str
S02tbc

Punctuation

M02amp -- &
M02aps -- ,
M03crt -- ^
M02dsh -- -
M02plu -- +
M02pnd -- #
M02prd -- .
M02sls -- sls

boards

B001 -- B012 3-1/2" tall boards 3-1/2 to 25-1/2 wide
- price base 1.75 * 1.20 =2.10 + 0.25 per increment

 2.10 2.35 2.60 2.85 3.10 3.35 3.60 3.85 4.10 4.35 4.60 4.85

B101 -- B112 5-1/2" tall boards 5-3/4 to 38-3/4 wide
- price base 3.50 x 1.20 =4.20 + 0.50 per increment

 4.20 4.70 5.20 5.70 6.20 6.70 7.20 7.70 8.20 8.70 9.20 9.70

B201 -- B212 9-1/2" tall boards 5-3/4 to 38-3/4 wide
- price base 6.00 x 1.20 =7.20 + 1.00 per increment

 7.20 8.20 9.20 10.20 11.20 12.20 13.20 14.20 15.20 16.20 17.20 18.20

B301 -- B312 13-1/2" tall boards 5-3/4 to 38-3/4 wide
- price base 7.50 x 1.20 =9.00 + 1.50 per increment

 9.00 10.50 12.00 13.50 15.00 16.50 18.00 19.50 21.00 22.50 24.00 25.50

Shopify Setup Information

Contents

LIVE CHECK LIST

Email

Notes on Email changes

Summarize Outlook Email Archives

add 100 products

finish rtf product descriptions

setup payment information

complete policies

generate site map for redirects

To go Live

Theme Changes

theme Settings

button Colour

h2 Font

Product Data

HS Tariff Code

Sale to RTF

Variants

IMAGE update

DESCRIPTION Update

Variant choices for name signs

change the description per variant

Meta Data

Metadata used for images

Definitions of Meta Data Categories

Product Import Procedure

Excel files

Process

Tags

Catagories

Letter Count

Letter Sizes/Styles

Board Sizes

Shapes

Colours

Image Sizes

MainPage

Products

DIY

Change board Sizes in Fusion

Stock Signs

File Naming Convention

sku

Letters

Shapes

Punctuation

boards

Navigation menu

Search