Difference between revisions of "Shopify Setup Information"

Revision as of 22:21, 6 November 2019

LIVE CHECK LIST

Email

1. 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.

2. make new emails on Rebel
3. move emails to Rebel

add 100 products

finish rtf product descriptions

setup payment information

complete policies

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:

1. the text-transform to none.
2. changes the letter-spacing to 0.
3. the font-size-header * (factor) from 0.78 to 1.
4. the media-query font-size-header to 1.0
5. 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

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, and then click Actions > Edit code.
3. 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 %}

1. 4 Paste the copied code at the bottom of the product-template.liquid template.
2. Click Save.
3. 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

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.

1. Product Export Sheet.xlsb
2. Product1.csv
3. Inventory18.xlsb

Process

ENTER the information:

1. 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.
2. Excel will look up name and location in Inventory file. These can be overridden by entering new values to the right of displayed values
3. Enter the Height and width of sign in whole inches round up.
4. Enter the height of board or leave blank for no board. This is a list with error checking so only valid heights are accepted.
5. 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.
6. Enter the weight of the sign in grams.
7. 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.
8. 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.
9. Select the shapes on the sign. Adds tags for shapes and description for some shapes.
10. Select descriptive tags for sign (adds tag and wording to description) Use sparingly.
11. Select the Colour summary radio button to best describe the sign.
12. Select the glitter or sparkles on the sign (this will add a tag, change the price, and be added to the description)
13. Select all the colours that are used in the sign.

REVIEW the information.

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

SAVE the information:

1. confirmed the data by pressing the SAVE button and the MACRO will complete the following steps:
2. the macro will copy the CSV data to the Products1.csv file and save that file.
3. 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.
4. the macro will return to the Input screen and reset all the values to the default ready to Input the next sign.

Tags

These are the product tags that allow products to be sorted or grouped together.

Catagories

Select ONE that defines Catagory for Product:

Letter Count

Select ONE for the number of letters on the sign:

Letter Sizes/Styles

Select ONE style:

Board Sizes

Select ONE board height:

Select ONE board width for 3.5 height boards:

Select ONE Width for 5.5 9.5 and 13.5 height boards:

Shapes

Select ALL that apply:

Colours

Select ALL colours that apply:

Select ALL Twinkles that apply:

• Glitter
• Sparkle

Select ONE best describes:

• two-tone
• one-colour
• two-colour-mix
• three-colour-mix
• multi-colour-mix

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

1. Roll history marker to begining.
2. Change parameters of board Sizes
3. Roll history to display sketch
4. edit display sketch to update array of shelves
5. render individual boards
6. roll history to end, move dividers if changing board lengths
7. 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

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