READY TO SHIP IF YOU WANT.

NEEDS TO SHIP WITH ASSETS SECTIONS AND TEMPLATES.

USE CASE

Create a Customizable product with SPIFF.

• Find the product in the the Shopify Admin menu under 'Products'.
• Select the Customizable product made.
• Scroll to bottom and select 'Product Template' field.
• Save Product.
• Go to Shopify Admin Theme Customizer.
• Find Product/s with the Spiff Product Template applied.
• Add Dynamic Blocks in whichever order you please.

You can also view the template for the live site in action here You can also check out the customize options implemented into Shopifys front-end via the theme editor and visiting the 'boardshorts' product.

---

Section Settings & Block Settings.

• Product Title
• Product Price
• Product Gallery OPTIONS
  • Embed Spiff 3D into Product Image? - Embeds SPIFF into place of gallery.
  • Enable Customize Badge above product gallery? - puts a CSS pseudo class above gallery with "customize me"
• Product Description
• Product Form OPTIONS
  • Enable Quantity? - Enables Quantity Selector for Products
  • Redirect to Cart? - Enables Cart Redirection on cart add.
• Standard Customize Button / Normal Add To Cart Button OPTIONS
  • Tick me to enable design products. - Enables Design Products by changing onclick function to spiffCaptureDesign() from spiffCaptureStandard()
  • Button Width - Change button width, measured in % defaults to 100%
  • Button Height - Change button height, measured in PX defaults to 50px
  • Button Color - Change button background
  • Button Text Color - Change button Text Color
  • Button Text - Change Button text
  • Sold Out Text - Checks for product availability then displays this value
  • Font Size - Measured in PX defaults to 16px
  • Font Weight - Defaults to 100
  • Border Color - Select a color for Button Border.
  • Border Top Type - Select a CSS type for Top Border
  • Border Right Type - Select a CSS type for Right Border
  • Border Bottom Type - Select a CSS type for Bottom Border
  • Border Left Type - Select a CSS type for Left Border
  • Border Width - Change border width, measured in PX defaults to 0px
  • Border Top Right Radius - Change border radius, measured in PX defaults to 0px
  • Border Bottom Right Radius - Change border radius, measured in PX defaults to 0px
  • Border Bottom Left Radius - Change border radius, measured in PX defaults to 0px
  • Border Top Left Radius - Change border radius, measured in PX defaults to 0px
  • Margin Top - Change Margin Top, measured in PX defaults to 25px
  • Margin Right - Change Margin Right, measured in PX defaults to 0px
  • Margin Bottom - Change Margin Bottom, measured in PX defaults to 0px
  • Margin Left - Change Margin Left, measured in PX defaults to 0px

---

TODO

• Start production of template files and assets.
• Logic for embed/customize buttons.
• Upload start of codebase to GIT.
• Coditional styling for Design Products button.
• Conditional layouts ~ Columns/Rows (flexbox or grid?).
• Component Styling (Quantity, description etc).
• [] Product Thumbnails.
• Carousel (Slick & or flickity.)
• Media queries/Responsiveness.
• Probably more conditionals.
• [] Test on multiple stores/themes.
• [] Finalize testing.
• [] Ship with SPIFF.