Difference between revisions of "Shopify Setup Information"

From MVR Designs
Jump to: navigation, search
(→‎Change the description to match the variant)
(→‎Change the description to match the variant)
Line 85: Line 85:
 
====Change the description to match the variant====
 
====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
 
https://community.shopify.com/c/Shopify-Design/Demo-change-description-in-product-with-different-variants/m-p/276269
 +
 +
Line 729 of Theme.js is place to add change to descriptions.
 +
 +
need to figure out how to establish Option number so display can be triggered on Option #
  
 
====Variant choices for name signs====
 
====Variant choices for name signs====

Revision as of 23:17, 7 October 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

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');
           }
        });
      }
    });
  }
});

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

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

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

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.

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/

Tags

Catagories

  • part
  • stock
  • custom

Letter Sizes/Styles

2 2on8 2on12 3 3on8 3on12 3-2 3-2on8 3-2on12 8 8-2 8-3 12 12-2 12-3 12-8

Board Sizes

3.5 board height 3.25 board Width 5.25 board width 7.25 board width 9.25 board width 11.25 board width 13.25 board width 15.25 board width 17.25 board width 19.25 board width 21.25 board width 23.25 board width 15.25 board width

5.5 board height 9.5 board height 13.5 board height 5.5 board width 8.5 board width 11.5 board width 14.5 board width 17.5 board width 20.5 board width 23.5 board width 26.5 board width 29.5 board width 32.5 board width 35.5 board width 38.5 board width

Shapes

heart flower star treble-cleft note horseshoe dog paw accent

ampersand plus hash slash at dollar

Colours

rtf Black White Gold Silver Fuchsia Red Yellow Green Blue Purple Pink Orange Rose Lemon Mint Sky Mauve Blossom Peach

Glitter Sparkle

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

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
Retrieved from "https://mvrdesigns.ca/index.php?title=Shopify_Setup_Information&oldid=126"