Shopify Setup Information

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)

Meta Data

For the full spec see [1]

Metadata used for images

Add / Edit Metadata in Adobe Bridge

IPTC Core	Site Images	RTF Product
Creator	Michael Van Raay	Michael Van Raay
Web URL(s)	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.
Description	Quality MDF wooden individual letters for your creative craft project	Individual 3 inch MDF DIY Wall Letters	Quality MDF wooden mounting boards for your creative craft project
Keywords	letters alphabet wooden MDF DIY name sign craft individual	letters alphabet wooden DIY name sign craft individual	wooden DIY name sign mounting board plaque craft
IPTC Subject Code
State/Province	Ontario	Ontario
Country'	Canada	Canada
Title
Credit Line	LooseLetters.ca	LooseLetters.ca
Copyright Notice	©2019 Michael Van Raay	©2019 Michael Van Raay
Copyright Status	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)
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/

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

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

Meta Data

Metadata used for images

Definitions of Meta Data Categories

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