Website Documentation

Table of Contents

• Grouping 100+ SKU Products
• Similar / Related Items
• Checkout Promotions
• Partners
• Partner Pricing
• Partner Embellishments
• Auto Discount
• Product Descriptions
• CSS / JavaScript Resource Files

GROUPING 100+ SKU PRODUCTS

Shopify only allows 100 SKU's per product. Our Pants have way more than 100 SKU's so development has been done to display a group of products together on the same product page.

Products utilizing this feature have already been created so there are plenty of examples.Please look at any of our Tactix or Specialist Tactical Pants.

Step 1:

• Create the primary product.
• The information added to this product is what the customers sees.
• Give it the Title of the product name you want to show on the category and product page, please do not include a color name.
• Add the description, collection filter tags, and all of the images for colors that this product comes in here.
• Only create the SKU's for the first color.
• For the other colors please add just one SKU and add '[Group]' after the color name.
• For any other options, such as Size or Length, please set to 'Hide'.
• Tag this product with 'Product Group'

Step 2:

• Create a secondary product for each color.
• Make sure that the product title matches that of the primary product, but also add a '/' and then the color name.
  Example: Men's Tactix BDU Pants / Midnight Navy
• Make sure the URL handle for the page includes the primary product url, and then the color handle at the end.
  Example: mens-tactix-bdu-pants-midnight-navy
• Add the SKU's for the color of this product, and like the primary, add one SKU for the other colors with Group and Hide.
• Only include one image for this product, and set all of the SKU's to this one image.
• Tag the product with Product Group.

SIMILAR / RELATED ITEMS

How to create similar items or related items for each product. This will show up on the product page in the Similar Items section.

• Tag the main product with pr:[Term].
• Tag any products you want to show up for that product with product with r:[Term]
  Examples: pr:tactical-pants or r:tactical-pants

CHECKOUT PROMOTIONS

Buy X, Get Y for $XX.XX promotions that are displayed during checkout if the qualifying product is in the cart.

An example promotion has been created for KNIFE. Add a pair of pants to your cart and enter KNIFE in the Discount Code field and click Apply. You will see an offer for a free Copperhead Knife. You can choose either the Tanto or Spear blade.

How to set up the Checkout Promotion:
Go to the Theme Settings and click on the Promotions Tab under General Settings. There will be places to put up to 10 promotions. 

The Checkout Promotions are based on offering up a free or discounted product during checkout. A discount will need to be created first offering 0% off. 

Fill out the following information:

• Promotion Code Prefix
  3 digit prefix for a promotion code that activates this offer. You can put in the full promotion code here, but only the first 3 digits are used. If you are creating unique one time use codes offering this promotion make sure that they all start with the prefix.
• Promotion Header
  Large text that is displayed in the promotion offer.
• Promotion Description
  This is the smaller text that is displayed below the Promotion Header.
• Promotion Button Text
  Text inside the button that is below the Promotion Description
• Qualifying Products
  A comma delimited list of product handles that qualify this promotion
  Example: mens-tactix-tactical-pants,mens-specialist-tactical-pant
• Qualifying Collection
  The handle of a collection that qualifies the product
  
  Example: pants-men
• Promo Products
  Comma delimited list of products to offer at a discounted price
  Example: copperhead-knife-spear,copperhead-knife-tanto
• Discount Amount
  The discount you want to offer on the promo products. Must be $XX or XX%.
• Active Promo Message
  This message is displayed when the promo is active.
• Expiration Date (MM/DD/YY)
  When the promotion expires. Should align with the expiration date on the Discount Code created. If the promotion does not expire, put a date way far in the future like 12/31/99

PARTNERS

Offer a custom set of collections, products and homepage graphics for a partner.You can see an example of a partner site at http://seattlefire.firsttactical.com

In the Theme settings you will see Partner:Partner name.This is a block of theme settings that can be replicated and changed within the settings_schema file. This will require some JSON knowledge and the ability to edit this schema file.

Here are the fields to set up a partner:

Partner Info

• Partner Display Name
  Name is displayed below the first Tactical Logo in the header
• Partner Handle
  The handle for the partner can really be anything, but should be the partner name in lower case and hyphens instead of spaces. This handle is used when declaring partner pricing. See Partner Pricing section below.
  Example: seattlefire
• Partner Name Color
  The color of the name text that is displayed below the first Tactical Logo in the header
• Partner Domain
  The domain that triggers the partner to load. The domain will need to point to the store, and be entered into the Domains list in the Domains section under Online Store in the Admin.
  Example: seattlefire.firsttactical.com
• Show Free Shipping Banner
  If disabled, the Free Shipping and Free Returns banner will not display
• Partner Our Story Page:
  The Our Story page is on the top left of the site. If a different Our Story Page has been created explaining the relationship between First Tactical and this partner, then select this page in the dropdown.

Login/Registration

• Requires Login?
  Requires registration and login to access any part of the site. Customer will be redirected to login page upon entering the site.
• Login Header Page
  Select a page you want to display on the header of the login page. 
• Custom Login / Registration Snippet
  If a custom registration process is required, create it as a snippet in the Theme files and select the file name from the dropdown.
• Show Header / Footer on Login
  Unless checked Header and Footer is disabled until logged in.

Home Page

• Custom HTML Home Page
  Select a page with specific content you want to display on the homepage after they login.
• Banner 1 & 2 HTML
  Homepage banner HTML that is displayed on the homepage slider Limit of 2 banner slides.

Home Page: Collections

• Show Approved Categories
  Displays Thumbnails of the Approved Categories on the Homepage
• Approved Categories Header Text
  The text to display above the Approved Categories Thumbnails.
• Show Off Duty Categories
  Displays Thumbnails of the Off-Duty or Unapproved categories on the Homepage
• Off Duty Categories Header Text
  The text to display above the Off Duty Categories Thumbnails.
• Featured Products Collection
  Select a collection from the list to display on a product slider on the homepage.

Home Page: Articles

There are 2 spots on the homepage Articles. These can be about anything and link to anywhere.

• Article Image
  Image displayed on the top of the article
• Article Bold Text
  Bold Text displayed beneath the Image
• Article Sub Text
  Smaller non-bold text displayed underneath the bold text.
• Article CTA
  Call to Action link underneath the Sub Text
• Article URL
  The URL that the Call To Action links to.

Navigation

• Alternate Navigation
  Put the handle of an alternate navigation you want to display in the header.
• Show Nav Dropdowns
  If unchecked, sub menus will not be displayed on the main navigation on the header of the site.
• Show Nav Ads
  If unchecked, the ads that display to the right of the Navigation sub Menus will not be displayed.
• Off Duty Menu
  Select the Navigation Menu from the dropdown you want to display as the off duty menu. This will list unapproved or off duty products.
• Off Duty Title
  The text displayed for the Off Duty Menu
• Off Duty Excluded Collections
  A comma delimited list of collection handles to not show on the off Duty Menu Dropdown.

Collections

• Approved Collections List
  Select a Navigation Menu from the dropdown. This Navigation should include all navigation points that are approved for this partner. If left blank then the standard menu will be displayed.
• Approved Collections Header Text
  When viewing a collection page, this is the text that is displayed above the products. Use [[ Category ]] to display the category Name.
  Example: Approved [[ Category ]] for Administration Personnel Only. This will show "Approved Pants for Administration Personnel Only" when on the pants category.
• Show Collection Header Images 
  Each collection has a header image. If unchecked, these images images will not be displayed. 

Products

• Approved Products Collection 1 & 2 
  Create Collections of approved products you want to display on the site. This will allow you to display only specific pants, exclude knives, etc. There is a limit of 50 products per collection, so create 2 if there are more than 50.
• To show only specific colors for products: Tag Products with '[partner-handle] approved: [color name 1] [color name 2]'
  Example: seattlefire approved: black khaki
• Excluded Colors 
  A comma delimited list of colors you do not want to display across all approved products on the site. These are color handles so all lower case, and hyphens for spaces. Ex: midnight-navy
• Approved Colors 
  A comma delimited list of colors you only want to show across all approved products on the site.

Promotions

• Allow Checkout Promotions 
  If disabled, the discount code field will not be displayed during checkout.
• Active Cart Promotion 
  Input the 3 character promotion prefix from the Promotions section. This code will be activated in the Cart instead of checkout. 

Partner Pricing

Partner pricing lets you change the price of a product for a given partner.

To enable partner pricing, tag a product with '[partner handle] price: [price]'

Example: seattlefire price: 49.95

If there is an upcharge price for larger sizes, then tag the product with '[partner handle] upcharge price: [price]'

Example: seattlefire price: 54.95

Partner Embellishments

Partner Embellishments gives you the ability to add embellishment options to a product page. Embellishment fees for all products in a cart are summed up and put into a line item in the cart called 'Embellishment Fees' that is not visible to the customer.

To enable Partner embellishments on a product, tag a product like this: '[partner handle] | [location] | [feature] | [embellishment fee]

Example: fremontpd | Right Sleeve | Patch | 1.50

Available Locations:
The location that you put in the tag will be passed throughout the order and displayed to the customer. The naming convention for the locations should be any of the following:

• Left Chest
• Right Chest
• Left Sleeve
• Right Sleeve
• Left Shoulder
• Right Shoulder
• Shoulders
• Center Back
• Rank - This lets customers choose their rank

Available Embellishment Features:

• Epaulets - Epaulets are always on shoulders so use 'Shoulders' for the location.
• Patch
• Name Embroidery ([Describe parts of Name])
  When describing parts on name you can use things like 'First Initial Last Name' or 'Last Name'
• Name Tape ([Describe parts of Name])
  When describing parts on name you can use things like 'First Initial Last Name' or 'Last Name'
  
• Badge Holder
• Cloth Badge
• Rank - Could be any rank such as Officer, Commander, Sergeant, etc.

Tag a product with 'Embellishment Delay' to display the Shipment delay notice which looks like this:

Shipment Delay Notice:
The {{ product.title }} is a fully customized product.
Please allow up to 10 business days for it to ship.

This notice can be changed in the Locale File.

Auto Discount

Auto Discount gives you the ability to visually display promotion code enabled discounts on collection, product, and cart pages.

A customer can enable an Auto Discount by clicking on a link with a promotion code at the end of the URL for any page on the site. The promotion code will be passed all the way to checkout and enabled automatically. You can also enable an Auto Discount that triggers a Checkout Promotion.

To create an auto discount, Navigate to the Auto Discount section in the Theme Settings and put in a value in one of the 20 slots available for Auto Discounts. Follow the following format when entering your discount:

Auto Promo Code: Value | Discount Amount: Value | Limit: Value | Message: Value | Collection: Value

• Auto Promo Code: 
  The Full length promo Code created in the Discounts section of the Admin.
• Limit:
  Put a 1 in here if the promotion code only applies once to an order. Otherwise the discount will be multiplied by the quantity of the qualified item.
• Message:
  Put in the message you would like to display on the cart page. This message is displayed below the 'Proceed To Checkout' button. You can add HTML to this message as well. 
• Collection:
  Put in the handle for the collection that qualifies this promotion.

Here is a completed example of a Auto Discount entry:

Auto Promo Code: FTP15KP50 | Discount Amount: 15% | Limit: 0 | Message: SALE: 15% off Select Pants<br><span style="font-size:0.7em; font-weight:200;">Plus save 50% off 1 pair of knee pads with pants purchase</span> | Collection: pants-sale

Product Description

This Theme needs product descriptions to be in a precise format in order for the product page to render properly. Please use the following excel file to generate the HTML for the product descriptions.

Link to Product Description Template Excel File

Each of the columns in the spreadsheet represent content points on the product page. Please see the following image for reference showing where each of those content points go.

Link to Product Description Reference Image

On the excel sheet, modify content in columns A thru T, and then copy the HTML generated in column U.

Paste that HTML into the description field when editing a product. Since it contains HTML, be sure to click on the Show HTML button <> first then paste the generated code in there.

CSS / JavaScript Resource Files

A number of the HTML Templates, CSS and JavaScript files in this theme were created using Webstorm. It utilizes the following tools and technologies: SASS, Bourbon, Neat, UglifyJS, and YUI Compressors.

To download the Webstorm Project please visit the developers GitHub Repository here: https://github.com/Innov8Partners/First-Tactical

To Purchase Webstorm, please visit https://www.jetbrains.com/webstorm/