>> YOU GUYS ARE HEAR ME. REGRET. 
OKAY. I'M GOING TO JUMP RIGHT IN. 
I'VE GOT A LOT TO COVER. IT WILL 
TAKE THE FULL 45 MINUTES. I'M GOING 
TO BE TALKING FAST TO MAKE SURE 
THAT I GET THROUGH IT ALL. LET'S 
JUMP IN. MY NAME IS SAM JARAWAN. 
I AM A PROGRAM MANAGER ON THE DYNAMICS 
365 COMMERCE TEAM AND I WAS PREVIOUSLY 
PART OF THE WINDOWS STORE FRONT 
TEAM AND YOU'LL SEE WHERE THAT FITS 
AS I GET TALKING. PART OF THE AGENDA 
BEFORE I JUMP INTO THE SENSIBILITY 
SIDE I WANT TO GIVE YOU A AN OVERVIEW 
OF WHAT DYNAMICS 365 COMMERCE IS. 
GIVE YOU AN ARCHITECTURAL OVERVIEW 
AND SHOW YOU THE NEW PIECES THAT 
WE'LL BE TALKING ABOUT AND WE'LL 
BE TALKING INTO THE INTENSABILITY. 
I'LL DIVE INTO THE TOO LONG.
WE HAD A 
DEEPER TALK BY A
COLLEAGUE AND THIS WOULD 
BE A GREAT TALK TO GET FURTHER INFO 
ON THAT. SO I'LL JUMP INTO THE OVERVIEW. 
OUT OF CURIOSITY HOW MANY ARE FAMILIAR 
WITH DYNAMICS 365 FOR RETAIL? MOST 
OF YOU. GREAT. IF YOU'RE NOT THAT'S 
OKAY. BUT DYNAMICS 365 COMMERCE 
IS A REBRANDING AND A BIT MORE. 
THE MAIN THING THAT YOU SEE HERE 
IS THE E-COMMERCE SOLUTION. PRIOR 
TO DYNAMICS 365 COMMERCE TO RUN 
AN E-COMMERCE OR ONLINE SITE YOU 
HAD TO RUN A THIRD PARTY PROVIDER 
OR HAVE IT BUILT IN. WE'RE IN A 
PUBLIC PREVIEW AND EARLY NEXT YEAR 
WE'LL BE GAING, TWO OTHERS. AND 
THERE ARE TWO OTHER COMPONENTS, 
AND WE'LL BE GIVING TALKS. THERE'S 
A TALK ABOUT AI AND ANOTHER TALK 
OVER HERE, CHECK THAT ONE OUT AND 
THERE'S A RATING AND REVIEWS SYSTEM. 
THESE TWO, WE KIND OF CALL THEM 
OMNICHANNEL BECAUSE THEY WORK WITH 
E-COMMERCE AND THE POINT OF SALE 
AND THE CALL CENTRE BUT HE WON'T 
GOT GET INTO DETAIL ON THOSE BUT 
THE E-COMMERCE EXTENTABILITY. I 
WON'T GO INTO DETAIL ON THE SLIDE 
AND I'LL SHOW YOU THAT LIVE IN A 
MOMENT. I'LL MOVE ON FROM HERE. 
HERE IS THE ARCHITECTURE. WHAT I'M 
SHOWING HERE IS THE EXISTING ARCHITECTURE 
FOR DYNAMICS 365 FOR RETAIL. THIS 
IS WHERE YOU USE THE HEADQUARTERS 
APP AND THIS IS WHERE YOU DO MOST 
OF YOUR MERCHANDISING CREATING PRODUCTS 
AND CREATING DISCOUNTS. CUSTOMIZING 
YOUR CHANNELS AND WHATNOT AND PRICING. 
THEN WE HAVE A LAYER ON TOP OF THAT 
THAT WE CALL OUR CRT LAYER. THIS 
IS WHERE THE BUSINESS LOGIC HAPPENS, 
YOUR ORDER CREATION, YOUR CUSTOMER 
SIGNUPS AND THERE'S ALSO A RETAIL 
INTENSABILITY PIECE. I WON'T BE 
TALKING ABOUT. THERE'S DOCUMENTATION 
ONLINE. IT'S BEEN AVAILABLE FOR 
A FEW YEARS AND NOTHING NEW IN THAT 
RESPECT BUT AS AN EXAMPLE ON THIS 
CHART THREE ITEMS, THE TAX, SHIPPING 
AND GIFT CARD EXTENSIONS THAT YOU 
CAN -- ADD. THE CRT. WE HAVE THE 
MODERN POINT OF VIEW SALE AND THE 
CLOUD POINT OF VIEW SALE. THIS IS 
WHAT EXISTS TODAY. THE NEXT PIECES 
THAT WILL SHOW UP IS WHAT IS NEW. 
THERE IS A CMS SYSTEM. FOR OUR PAGE 
OFFERING THERE IS A SET OF MARKETING 
INFORMATION. IF YOU CAN THINK OF 
A HOME PAGE ON AN ONLINE SITE YOU 
GENERALLY HAVE INFORMATION THAT 
IS NOT NECESSARILY PRODUCT SPECIFIC 
ABOUT INDIVIDUAL PRODUCTS BUT MORE 
MARKETING FOCUSSED STUFF STORED 
ON OUR NEW CMS SYSTEM. THERE'S A 
STORE FRONT ADMINISTRATION PIECE, 
THE AUTHORING TOOL I WAS JUST TALKING 
ABOUT. THEN THERE'S THE SURROUND 
APPS. THAT'S AGAIN, I CALL THOSE 
THE OMNICHANNEL FEATURES. THE RECOMMENDATIONS, 
RATINGS AND REVIEW AND FINALLY THE 
BIG E-COMMERCE WEB STORE FRONT ON 
TOP OF THAT. THE ONE THING I NOTICED 
WAS MISSING HERE NO ARROW FROM THE 
PS DOWN TO THE SURROUND APPS BUT 
AGAIN ACCESS THOSE APPS FROM THE 
POS AS WELL AS THE CALL CENTRE CHANNELS. 
LET ME JUMP OVER INTO A QUICK DEMONSTRATION 
OF THE AUTHORING TOOLS. BY THE WAY, 
I WANT TO SHOW YOU WHERE OUR DOCUMENTATION 
LIVES FOR THE PREVIEW. DOCKS DOT 
MICROSOFT/DYNAMICS 365/COMMERCE. 
I WANT WHEN YOU LEAVE HERE TO TRY 
OUT THE SDK. THERE'S A REQUEST FOR 
AN EVALUATION ENVIRONMENT AND YOU 
END UP WITH A DEPLOYED WEB SITE. 
LET ME GO BACK TO FABBRI CAM. YOU 
GET HEADQUARTERS AND ACCESS TO THE 
HEADQUARTERS TO MODIFY THE DATA 
ADD NEW PRODUCTS AND PLAY AROUND 
WITH IT AS WELL AS THE AUTHORING 
TOOL. I WANT TO GIVE A QUICK OVERVIEW 
OF THE WEB SITE AND AUTHORING TOOLS 
AND WE'LL JUMP INTO EXINTENSIBILITY. 
YOU SEE THE HOME PAGE THAT'S MADE 
UP OF MODULES. SO, FOR EXAMPLE, 
AT THE TOP WE'VE GOT A GIANT HEADER 
MODULE. THAT'S WHAT WE CALL A CONTAINER 
MODULE THAT CONTAINS OTHER MODULES. 
THERE'S A LOGO MODULE. A CHANNEL 
CATEGORY MODULE, A SEARCH AND SIGN-IN, 
ET CETERA, AND EACH INDIVIDUAL MODULES 
THAT CAN BE PLACED ANYWHERE. BELOW 
THAT IS A CAROUSEL MODULE AND AS 
I CRUISE THROUGH EACH ITEM HAS ANOTHER 
MODULE, THIS IS WITH A HERO MODULES, 
MARKETING INFORMATION LIKE THE NEW 
ARRIVAL. THAT'S WHAT GETS STORED 
IN THE CMS SYSTEM. THIS PAGE IS 
RENDERED AND IT'S CALLING INTO THE 
CMS SYSTEM AND THE RETAIL BACK-END 
TO GET THE PRODUCT DATA. I SCROLL 
DOWN THE MODULE, A
PRODUCT FEATURE AND 
JUST LINKING TO CATEGORY PAGES. 
THERE'S A VIDEO MOWEDDULE. -- MODULE. 
IT'S A STARTER KIT, 30 OR 40 MODULES 
TO BE EXTENDED OR CREATE YOUR OWN. 
I'LL SHOW YOU HOW TO DO THAT. I'M 
JUST GOING TO DRILL INTO TWO FURTHER 
PAGES. ONE IS THE CATEGORY PAGE. 
THIS IS SHOES IN THIS CASE. WHENEVER 
I LOAD A CATEGORY PAGE, THERE'S 
ONE PAGE HOSTING IT BUT EACH PAGE 
FOR EACH CATEGORY CAN BE ENRICHED. 
I BELIEVE IT WAS DISCUSSED ON NEWS 
TALK ON THE AUTHORING TOOLS IF YOU 
WANT TO LEARN ABOUT THAT BUT IT 
ALLOWS YOU TO ADD ADDITIONAL AUTHORING 
TOOLS AND YOU GET TO A PRODUCT, 
AND YOU GET TO THE PRODUCT DETAILS 
PAGE AND THIS IS WHERE YOU CAN SELECT 
THE VARIANT OF THE PRODUCT ADD IT 
TO CART AND THESE ARE ALL ATTRIBUTES 
CONFIGURED AND YOU CAN CONFIGURE 
IT ONCE IF YOU'RE USED TO USING 
THE RETAIL PRODUCT TODAY AND IT 
WILL JUST SHOW UP WITHIN THE CHANNEL 
AS LONG AS THAT PRODUCT IS RELEASED 
TO THE CHANNEL. BELOW THAT IS MARKETING 
INFORMATION FOR THIS PARTICULAR 
ONE. THIS IS ENRICHED AGAIN. BELOW 
THAT YOU SEE OUR RECOMMENDATIONS 
ENGINE CONTROL DOWN HERE AND THAT 
WILL -- IT'S USING MACHINE LEARNING 
AS TRANSACTIONS ARE COMING IN AND 
IT'S DECIDING, YOU KNOW, WHAT IS 
-- WHAT ARE RELATED PRODUCTS, WHAT 
ARE BEST-SELLERS AND WHAT GETS SOLD 
TYPICALLY WITH THIS PRODUCT AND 
UPSELL YOUR CUSTOMERS AND BELOW 
THAT IS THE RATINGS AND REVIEW. 
NOW I'M GOING TO SHIFT OVER TO THE 
AUTHORING TOOLS. WHEN YOU HIT THE 
HOME PAGE THE FIRST SELECTION IS 
A SET OF SITES. IF I GO BACK TO 
MY URL, I'M USING THE TRAINING SITE 
11 AND MAKE SURE THAT I PICK THE 
RIGHT SITES HERE. YOU CAN MANAGE 
SEVERAL DIFFERENT SITES FROM WITHIN 
THIS TOOL. I'LL PICK THE SAME ONE 
HERE. THE TOOLS ON THE LEFT ARE 
THE PAGES, URLS LAYOUTS AND TEMPLATES. 
THE WAY THAT THE SYSTEM WORKS YOU 
START OFF WITH A TEMPLATE FOR YOUR 
PAGE AND YOU BUILD PAGES ON TOP 
OF THOSE TEMPLATES. THAT'S WHAT 
THE TEMPLATES AND THE LAYOUTS IS 
FOR. BUT I'M GOING TO FOCUS ON PAGES. 
THERE'S AN ASSET TO UPLOAD THE IMAGES. 
ALL OF THIS DATA IS STORED IN THE 
CMS SYSTEM. IF I CLICK OVER TO THE 
HOME PAGE I CAN SEE THE AUTHOR EXPERIENCE, 
SO THE MIDDLE HAS A RENDERING TO 
INTERWANTING IT AND THE -- INTERACT 
WITH IT AND THE LEFT IS A PREVIEW 
SO I CAN TOUCH IT AND I'M GOING 
TO OPEN UP THIS SLOT. WE ACTUALLY 
USE MODULES THROUGHOUT THIS SO YOU 
DON'T NOTICE THIS RIGHT NOW BUT 
IN THE LAYOUT CREATED THERE IS A 
PAGE MODULE AND A CONTAINER MODULES 
CAN DEFINE DIFFERENT REGIONS THAT 
YOU CALL SLOTS. SOMEBODY HAD DECLARED 
A HEADER SLOT AND A MODULE IN IT. 
ANOTHER THING CALLED FRAGMENTS AND 
THE SET OF MODULES WAS STOREDTA 
FRAGMENT -- STORED AS A FRAG. YOU 
CAN'T EDIT IT HERE AND THAT WILL 
TAKE ME TO THE FRAGMENT EDITOR. 
DOWN HERE IS THAT CAROUSEL ODD MODULE. 
IF I HOPE THAT UP I SEE THREE HERO 
MODULES. THIS IS THE LAST THING 
I'LL CALL OUT BECAUSE I'M GOING 
TO BUILD A MODULE AND SHOW YOU THE 
CONFIGURATIONS. WHEN I SELECT THE 
MODULE, ALL OF THEM ARE PROPERTIES 
ON THE RIGHT-HAND SIDE AND YOU SEE 
THINGS LIKE INTO THE SUMMER BREEZE 
THERE'S MARKING CONTENT AND A HEADING 
HERE. I CLICK ON THE HEADING AND 
IT ALLOWS ME TO CLICK ON A HEADING, 
H1 OR 2. A TAG AND I SCROLL DOWN 
TO MORE, THERE'S THINGS LIKE IMAGES, 
WHEN I CLICK ON THE IMAGE I CLICK 
AND THE IMAGE PICKER, THERE'S A 
LINK AND IF I SET UP A LINK ON THIS 
MODULE. IT WAS ALL CONFIGURED BY 
THE MODEL EW DEVELOPER WHICH HAPPENED 
TO BE US IN THIS CASE, BELOW THAT 
AN ENUMERATOR WITH A FEW MORE ITEMS 
AND BULLION. THERE'S DIFFERENT TYPES 
THAT WE SUPPORT HERE. ALL RIGHT 
SO, THAT'S ALL FOR THAT DEMO. I'M 
GOING TO QUICKLY SWITCH BACK AND 
DIVE INTO THE E-COMMERCE SENSIBILITY 
PARTS. SO THE WAY THAT OUR SYSTEM 
WORKS WHEN A SHOPPER HITS THE END 
PAGE YOU CAN SEE OVER HERE THE SHOPPER 
ON THE LEFT, THEY WILL MAKE AN HTP 
REQUEST AND IT WILL HIT THE COMMERCIAL 
ONLINE PLATFORM AND THAT IS RESPONSIBLE 
FOR DOING THE GLOBALIZATION AND 
SECURITY AND FEDERAL ELECTION OUT 
WHAT PAGE IS BEING -- FIGURES OUT 
WHAT PAGE IS BEING THE PAGE LAY 
OUT. THE AZURE REQUEST. THE FILES, 
THE JSON FILES TO SAVED BEHIND THE 
SCENE. THE JSON GETS THROWN OVER 
TO THE PARTNER NODE CONTAINER THAT'S 
RESPONSIBLE FOR RENDERING AND RESPONSIBLE 
FOR PULLING IN ALL OF THE THESE 
MODULES AND SOMETHING CALLED DATA 
ACTIONS TO GET DATA. SO THE STARTER 
KIT AS I MENTIONED IT HAS THREE 
THINGS, MODULES WHICH I JUST SHOWED 
YOU, RESPONSIBLE FOR RENDERING EI, 
DATA ACTIONS RESPONSIBLE FOR PULLING 
IN THE DATA AND A SET OF CORE ACTIONS 
THAT CALL IN TO SEARCHERS, API OR 
THE RECOMMENDATIONS ENGINE, APIS 
OR THE RATINGS AND REVIEW APIS, 
YOU CAN EXTEND AND CREATE YOUR OWN 
MODULES AND DATA ACTIONS TO CALL 
YOUR OWN THIRD PARTY SERVICE THAT 
IS YOU WANT. SO THAT'S WHAT THE 
RIGHT-HAND SIDE SHOWS OVER HERE, 
THE CUSTOMIZATION TO ADD MODULES 
AND DATA ACTION AND YOU CAN UPLOAD 
YOUR OWN THEME. I'LL SHOW HOW THE 
STARTER KIT HAS A FABBRI CAM THEME 
TO USE TO GET STARTED. REQUIREMENTS, 
WE'RE USING A MODERN STACK IF YOU'RE 
FAMILIAR WITH A REACTING JOB DESCRIPT 
IS, MODERN -- DESCRIPT, MODERN TOOLS 
I CAN LIKE FACEBOOK AND MODERN COMPANIES 
ARE USING THESE. JOB DESCRIPT, NODE 
JS AND FAMILIARITY WITH MPM AND 
NODE IS GOOD, AND SAS FOR THEME 
DEVELOPMENT THE FOUR NODES TO GET 
START, SOURCE CODE EDITOR AND GI 
TO CLONE THE REPOSITORY YOU CAN 
DO THAT OR DOWNLOAD THE ZIP FILE 
TO BASICALLY DO THIS HIT CLONE REPO 
AND DON'T WORRY ABOUT MEMORIZING 
THIS, I'LL SHOW YOU THIS IN DOCS. 
ONCE IN IT YOU RUNT YARN COMMAND 
-- RUN THE YARN COMMAND TO PULL 
IT DOWN. THE REPOSITORY IS THE RECONFIGURATION 
FILE FOR THE STARTER KIT AND TYPE 
YARN AND IT PULL IT IS IN. I WON'T 
DO THIS BECAUSE IT TAKES FIVE OR 
SIX MINUTES TO PULL IT ALL DOWN 
ON THE SLOWER NETWORKS AND TAKES 
A WHILE HERE. SO LET'S JUMP RIGHT 
OVER HERE. OUR GOAL WAS TO CREATE 
A PRODUCT FEATURE MODULE AND YOU 
SEE AN IMAGE ON THE LEFT AND THE 
TITLE DESCRIPTION AND ALL OF THIS 
IS PULLED FROM THE RETAIL SERVER. 
WHEN YOU GUYS LEAVE HERE I WANT 
TO MAKE SURE THAT YOU CAN DO THIS 
ON YOUR OWN. I MENTIONED WHERE TO 
GET TO OUR DOCUMENTATION. IF YOU 
SEE THIS DEVELOPMENT NOTE AT THE 
BOTTOM AND INSIDE OF THERE THE ONLINE 
CHANNEL EXTENTIBILITY. A SET-UP 
DEV ENVIRONMENT IS A GREAT PLACE 
TO START AND THE TOOLS, VISUAL STUDIO 
CODE IF YOU HAVEN'T USED IT RUNS 
GREAT ALONGSIDE THE VISUAL STUDIO. 
IT'S A LOT LIGHTER WEIGHT AND GREAT 
FOR JOB DESCRIPT DEVELOPMENT. NODE 
AND YARN. ONCE YOU'RE READY TO INSTALL 
THE SDK GO TO THE GIT HUBBER RECLONE 
OR DOWNLOAD THE ZIP FILE. ONCE THAT 
IS DONE YOU RUN THE YARN COMMAND 
AND PULL DOWN THE FULL SDK. TO START 
THE NODE SERVER LOCALLY RUN YARN 
START. LET'S JUMP INTO CODING. I'VE 
DONE THE YARN AND HAVE MY SDK INSTALLED. 
WHAT I'M DOING IS LAUNCHING VISUAL 
STUDIO CODE AND HERE I'VE GOT THE 
DIRECTORY OPEN WHERE THE SDK WAS 
INSTALLED. THE IMPORTANT DIRECTORY 
IS THE SOURCE DIRECTORY WHERE ALL 
THE MODULES WILL LIVE. THERE'S A 
MODULE DIRECTORY. WHEN YOU INSTALL 
IT FOR THE FIRST TIME YOU GET A 
HELLO WORLD. I DELETED IT TO MAKE 
IT CLEAN. THERE'S A THEMES DIRECTORY 
AND A DEFAULT DOT THEME DOT SAS. 
WE'LL CREATE A NEW THEME AS WE GO. 
PAGE MOCKS ALLOWS YOU TO MOCK A 
FULL PAGE TO LOCALLY TEST A BUNCH 
OF MODEL YOU SAY. THE LAST -- MODEL 
YOU SAY. THE LAST SOMETHING AN EMV 
FILE. TO RUN THE NOTE SERVER, I'M 
RUNNING PORT 4, 000. NORMALLY THIS 
WON'T BE FILLED OUT BUT SIPS I'M 
POINTING TO -- SINCE I'M POINTING TO 
AN EVALUATION ENVIRONMENT I'M ABLE
TO POINT TO THE 
PRODUCTION ENVIRONMENT THAT I'M 
USING TO ALLOW ME TO DEBUG THE LIVE 
SITE AND HAVE IT RENDERED WITH MY 
LOCAL MODULES TO ALLOW ME TO TEST 
MY THEMES AND MODULES TO DEPLOY 
IT. IN THE END I'LL TALK DEPLOYMENT 
BUT WE HAVE A COMMAND CALLED PACK 
PROBLEM, RUN PACK AND CREATE A ZIP 
FILE AND GO TO LCS AND UPLOAD IT 
FROM THERE. ACTIVE POINTED TO THE 
RETAIL SERVER AND I'LL PULL IN LIVE 
DATA FOR MY TESTING. IF YOU DON'T 
HAVE THESE, IT'S OKAY, USE MOCKS 
AS WELL TO DEBUG OR BUILD YOUR MODULES 
SO I'M GOING TO START BY OPENING 
A TERMINAL WINDOW INSIDE A VISUAL 
STUDIO CODE AND I HAVE A CHEAT NOTE 
HERE I'M GOING TO COPY AND PASTE 
FROM SO I DON'T MAKE LIVE MISTAKES. 
WHAT I'M DOING HERE IS THIS COMMAND 
YARN. .. AND WE HAVE A SET OF CLI 
COMMANDS AND THE FIRST ONE IS ADD 
MODULE. AGAIN I TAKE YOU OVER TO 
THE DOCS TO SHOW YOU A LITTLE BIT 
LOWER UNDER PLATFORM OVERVIEWS IS 
A CLI COMMAND REFERENCE WITH A FEW 
COMMANDS IN HERE AND THE ONE THAT 
I'M SUING ADD MODULE. -- USING ADD 
MODULE. AND PREFACE THEM. I WON'T 
RUN THIS BUT ADD DATA ACTION -- 
>> -- >> WHAT'S THAT? >> -- >> OH, 
FUNNY. THANK YOU. I WILL GET THAT 
FIXED. GOOD CATCH. SO WHAT I DID 
WAS I CREATED A MODULE OVER HERE 
AND I'M GOING TO RUN YARN START 
TO KICK OFF THE NODE SERVER BUT 
THE TYPE SCRIPT GETS COMPILED INTO 
JOB DESCRIPT. THE FIRST TIME YOU 
RUN IT IT TAKES A FEW MINUTES BUT 
I'LL SHOW YOU WHAT HAPPENED. I CALLED 
MY MODULE PRODUCT FEATURE AND A 
NEW DIRECTORY POPPED UP WITH A FEW 
FILES IN THERE. THE MOST INTERESTING 
STYLE THIS DEFINITION FILE. THIS 
PROVIDES ALL THE METADATA FOR THE 
OFFERING TOOL. THE FRIENDLY NAME 
IN HERE AND THE DESCRIPTION AND 
THE TAGS AND CATEGORIES TO CATEGORIZE 
YOUR MODULES BUT WHEN YOU WANT TO 
ADD A NEW MODULE TO THE PAGE YOU 
GET A MODULE PICKER. THIS HERE VIEW 
PART JUST TELLS ME WHICH REACT VIEW 
TO USE. LISTED DOWN HERE AND BELOW 
THAT ARE THE CONFIGS. WHEN I SHOWED 
YOU THE OFFERING TOOL THE CONFIGURATIONS 
ON THE RIGHT-HAND SIDE AND THIS 
IS WHERE ALL THE CONFIGURATIONS 
GET DEFINED. THERE IS MAGIC THAT 
HAPPENS, WHEN YOU SAVE THIS FILE 
IT AUTO AGAIN RATES THIS -- GENERATES 
THIS AUTO GENERATE FILE AND ALL 
THE PROPS WILL GET ADDED TO THE 
INTERFACE. THIS I-PRODUCT CONFIG 
IN THE SHOW TEXT. THIS WILL ALLOW 
ME AND AS I TRANSITION I SHOW YOU 
THE REACT COMPONENT TO ALLOW ME 
TO GET ACCESS FROM MY REACT COMPONENT. 
SO IF YOU'VE SEEN REACT BEFORE IT 
SHOULD LOOK FAMILIAR BUT THERE'S 
A REACT FROM THE MODULE AND THERE'S 
A FAMILIAR RENDERS THAT RENDERS 
THE HTML FOR THE MODULE. THERE'S 
A DIV AND A ROW AND CONFIG VALUE. 
AS I MENTIONED YOU CAN GET THE DATA 
CONFIG OR THE MODULE. IT'S GETTING 
IT FROM THE PROP. THIS IS A SHORTCUT 
THAT YOU CAN JUST HAVE CONFIG HERE 
SO I DON'T TYPE THIS PROP DOT CONFIG 
DOT SHOW EVERY TIME. THIS AUTO GENERATE 
IS PULLED IN AS AN IMPORT UP HERE. 
I CAN SEE DOWN HERE THAT IT HAS 
COMPLETED -- WHOOPS, SO LET'S GO 
AHEAD AND RUN THIS MODULE AND SEE 
WHAT IT LOOKS LIKE. SO TO DO THAT 
YOU RUN LOCAL HOST SO THE NODE SERVER 
IS RUNNING RIGHT NOW. I'M GOING 
TO LOCAL HOST PORT 4, 000. MODULES 
AND THE TYPE EQUALS PRODUCT FEATURE. 
THE MODULE I'M WORKING ON IS DISPLAYED. 
A BORING MODULE RIGHT NOW BUT THE 
LAST THING THAT I DO WANT TO SHOW 
IN THIS MODULE BEFORE I START TO 
MAKE THE CHANGES, IF YOU NOTICE 
THE SHOW TEXT, WHERE DID IT GET 
THAT DATA FROM? I DON'T HAVE AN 
AUTHORING TOOL TO SET THAT DATA 
SO WE HAVE A MOCK FILE HERE AND 
IF I LOAD THAT UP YOU SEE THE SHOW 
TEXT HERE AND IF I CHANGE THIS TO 
HELLO IGNITE. .. SAVE, NOTICE AT 
THE BOTTOM IT'S RECOMPILING AND 
NOTICE I MADE A BIOCHANGE AND REKICKS 
OFF THE BUILD AND IN A FEW SECONDS 
IT SHOULD HAVE NEW TEXT TO IT. IT'S 
DONE. THAT'S HOW EASY IT IS TO USE 
THIS. I DON'T HAVE A FILE BUT IF 
YOU WANT TO RUN THE UNIT TEXT BUT 
SINCE I DON'T HAVE TIME TO PLAY 
AROUND WITH A TEST I'LL JUST DELETE 
THE TEST FILE. OKAY. STEP ONE OF 
BUILDING OUR MODULE, I START OFF 
WITH STATIC HDL. I WILL GO OVER 
HERE AND STEAL A CODE THAT I'VE 
ALREADY WRITTEN. THIS IS GOING TO 
REPLACE THE CODE IN THE REACT COMPONENT. 
THERE YOU GO. I'LL SAVE THAT AND 
WHILE THAT BUILDS I'LL EXPLAIN WHAT 
IS HAPPENING. UP HERE AT THE TOP, 
STATIC TEXT, NAME AND INFO AND IMAGE 
URL AND A BUTTON TEXT AND BELOW 
THAT IS A BIT OF HTML, NOTICE THIS 
COLUMN MD6 IF YOU'RE FAMILIAR ARE 
BOOTSTRAP, I'M USING BOOTSTRAP TO 
GIVE ME A GRID SYSTEM ON MY HTML 
SO BY SETTING TWO COLUMNS. IF YOU'RE 
FAMILIAR WITH BOOTSTRAP IT HAS A 
12 COLUMN GRID SYSTEM AND USE SIX 
FOR ONE COLUMN AND SIX FOR ANOTHER, 
ALLOWS ME TO SPLIT IT UP INTO TWO 
COLUMNS USING HALF. THIS WAY I HAVE 
THE IMAGE ON ONE SIDE AND THE TEXT 
ON THE OTHER SIDE. I CAN SEE IT'S 
DONE AND SEE IF THAT WORKS. GREAT 
IT WORK. BUT THIS GRID SYSTEM DOESN'T 
LOOK LIKE TWO COLUMNS. THE REASON 
FOR THAT IS ALTHOUGH I'M USING THIS 
I HAVEN'T TOLD MY -- I PULLED IN 
BOOTSTRAP AND THAT'S WHERE THE THEMES 
COME IN, THE THEME IS JUST A BOOTSTRAP 
DEFAULT THAT WE PROVIDE IN OUR SDK. 
YOU WILL DEFINITELY CHANGE THIS 
AS YOU BUILD THE MODULES BUT IMPORT 
BOOTSTRAP. THERE'S A FONT AND AWESOME 
GIT SET BUT THE IMPORTANT THING 
IS THE BOOTSTRAP. THAT'S SIMPLE, 
ADD ANOTHER PARAMETER AND THEME 
AND THE NAME OF THE THEME. A LITTLE 
LATER I'LL SHOW YOU HOW TO WRITE 
YOUR OWN THEME. THE NICE THING ABOUT 
BOOTSTRAP I GET AUTOMATIC FLOW AND 
AS I START RESIZING MY PAGE. YOU 
GET WHAT FOR FREE. ALL OF THE STARTER 
KIT MODULES HAS BOOTSTRAP BUT YOU 
CAN USE WHATEVER FRAMEWORK THAT 
YOU LIKE. THAT WAS STEP ONE. WE 
WANT TO MAKE THIS MORE CONFIGURABLE 
AND LET'S GO AHEAD AND ADD A CONFIG. 
THERE'S THREE FILES I'M GOING TO 
TOUCH. I'M GOING TO GO TO THE DEFINITION 
FILE. YOU MENTIONED -- YOU'LL REMEMBER 
THAT I MENTIONED THAT I ADD IT THAT 
IN AND TOOK OUT THE SHOW TEXT AND 
REPLACED IT WITH THIS IMAGE ALIGNMENT. 
IT'S ENUMERATED WITH BOTH LEFT AND 
RIGHT, GREAT, I'LL SAVE THAT FILE 
AND I NEED A MOCK FOR THAT AND SET 
THAT A VALUE TO SOMETHING. THIS 
IS MY TRIGGER FOR THE IMAGE RENDERING 
ON THE LEFT OR THE RIGHT. THE TEXT 
WOULD RENDER ON THE OTHER SIDE. 
SO WITHIN MY MOCK FILE NOW. I HAVE 
IMAGE ALIGNMENT AND LEFT. I START 
OUT WITH THAT. THE LISE THING IS 
IN THE REACT -- LAST THING IS IN 
THE REACT COMPONENT LEVERAGE THAT 
VALUE AND WRITE THE APPROPRIATE 
HTML BASED ON THAT SETTING. LET'S 
GO OVER HERE. I'LL SAY THAT. WHILE 
IT BUILDS I'LL EXPLAIN AND SHOW 
THE MINOR CHANGES I MADE. THIS IS 
THE BIGGEST CHANGE RIGHT HERE. VARIABLE 
FOR LEFT AND RIGHT AND WHATEVER 
HTML IS NEEDED FOR THE LEFT AND 
THE RIGHT SIDE. THANS THE CONFIG 
I -- AND THAT IS THE CONFIG I SET. 
BUT IT WILL GET ADDED TO THE AUTO 
GENERATED FILE. IF I GO OVER THERE 
AND CHECK IT OUT I HAVE THE IMAGE 
ALIGNMENT AND I WAS USING ENUM AND 
ALLOWS ME TO CHECK THAT PROPERTY 
AGAINST THE ENUM VALUE. IF THETIC 
IS LEFT I SPLIT THE HTML RENDERING 
THE IMAGE AND THE INFO, LOWER HERE. 
IT JUST STITCHES IT TOGETHER WITH 
THE HTML. IT LOOKS LIKE THAT'S DONE. 
GO OVER HERE AND REFRESH TO SEE 
IF IT WORKED. WELL, I THINK IT WORKED. 
LOOKS THE SAME BECAUSE I HAD THE 
IMAGE ON THE LEFT BEFORE. GO BACK 
TO THE MOCK AND CHANGE THAT TO THE 
RIGHT SIDE. CHANGE THAT TO RENDER 
ON THE RIGHT. IF I WAS TO DEPLOY 
THIS MODULE RIGHT NOW I WOULD HAVE 
IT SHOW UP IN THE AUTHORING TOOLS 
WITH ONE CONFIGURATION VALUE WITH 
A DROP DOWN LEFT TO RIGHT. IT'S 
SIMPLE. I'LL FRESH THIS PAGE. IT 
WORKED. SO THE NEXT STEP IS I WANT 
TO ADD SEVERAL MORE CONFIGURATIONS. 
SO THAT -- I'M BASICALLY GOING TO 
FOLLOW THE EXACT THREE STEPS I JUST 
DID AND I HAVE THREE MORE AND WALK 
YOU THROUGH THE ONES I'M JUST ADDING. 
I'LL ADD ONES FOR THE TITLE, THE 
DESCRIPTION AND THE IMAGE, ALL OPTIONS 
WITHIN THE OFFERING TOOL. I'LL GO 
TO THE DEFINITION TILE AND I HAVE 
PRODUCT TITLE NOW. THE IMAGE STAYS 
THE SAME. A TITLE, THE TYPE OF STRING, 
I HAVE DETAILS, THE RICH TEXT AND 
IN THE AUTHOR TOOLS A A RICH TEXT 
IMAGE. BY USING THIS TITLE THE TOOL 
IS GIVING ME AN IMAGE PICKER. OTHER 
TYPES I'M NOT USING HERE. A STRING 
AS WELL. THERE'S RICH STRUCTURES 
TO CREATE HERE AS WELL. YOU CAN 
HAVE A RAISE AND OTHER THINGS LIKE 
URLS AND I'LL GIVE YOU THE URL PICKER 
AND SET THE MOCK VALUE TO TEST THOSE. 
GO TO THE MOCK FILE AND JUST NOTICE. 
NOW THIS IS THE SAME TEXT. SO LET 
ME JUST THROW IN A FEW CHARACTERS, 
AA AND BB AT THE BEGINNING. SO I 
CAN SHOW YOU THAT IT'S ACTUALLY 
PULLING THE TEXT FROM HERE. LASTLY 
I NEED THE CHANGES TO MY REACT COMPONENT 
TO LEVERAGE THOSE CONFIG VALUES. 
I PASTED THIS IN THE WRONG FILE. 
LET ME BACK THAT OUT, GO BACK HERE. 
THERE WE GO. OKAY. SO LET'S WALK 
THROUGH THE MINOR CHANGES I HAVE 
MADE. THIS TIME INSTEAD OF HARD 
CODING THE TEXT TO THE NAME I'M 
PULLING IT OUT OF THE CONFIG. MAKE 
SURE THAT A VALUE EXISTS, I SET 
IT. SAME FOR THE PRODUCT INFO, IMAGE 
AND BUTTON AS WELL. ONCE IT LOOKS 
LIKE IT'S DONE. SEE IF THAT WORKED. 
YOU WILL NOTICE THE AA AND THE BB 
SO THAT'S PULLED FROM THE MOCK FILE 
NOW. I'M JUST GOING TO QUICKLY REMOVE 
THAT. SO NOW AT THIS POINT IN TIME 
IT'S A FULLY CONFIGURABLE MODULE. 
ALL THE DATA WOULD BE STORED IN 
THE CMS SYSTEM FOR THE TITLE AND 
DESCRIPTION BUT AS I MENTIONED AT 
THE BEGINNING I WANTED TO PULL DATA 
FROM OUR RETAIL SERVER. THIS IS 
WHERE DATA ACTIONS COME IN. SO I'LL 
SHOW YOU HOW TO USE A DATA ACTION. 
I'M GOING TO AGAIN COPY AND PASTE 
AND SHOW YOU WHAT I'M DOING. SO 
IN MY DEFINITION FILE THE FIRST 
THING I'M GOING TO DO WHENEVER WE 
ADD A NEW DATA ACTION I NEED TO 
RESTART THE NODE SERVER, TURN IT 
OFF, HIT CONTROL C TWICE TWICE AND 
REPLACE THIS. WHAT I ADDED IS A 
NEW SECTION, DATA ACTIONS. THIS 
SELLS THE SERVER TO RUN THIS DATA 
ACTION AND NOTICE THIS DIRECTORY, 
POINTING TO GET DATA PRODUCTS. FIRST 
IN THE DOCUMENTS HOW TO SEE A LIST 
OF THESE. AGAIN BACK TO OUR ONLINE 
SDK AND UNDER SHOULD BE A DATA ACTION 
SECTION HERE, DEVELOP DATA ACTIONS 
AND A LIST OF COORDINATED ACTIONS. 
SO THERE ARE DATA ACTIONS THAT GET 
THINGS LIKE THE CATEGORY HIERARCHY 
OR JUST LOOK AT CATEGORIES. BUT 
THE ONE I'LL BE SUING GET SIMPLE 
PRODUCTS. I WANT TO CALL AND GET 
A LIST OF PRODUCT INFORMATION. SO 
I'LL BE USING THAT, ALSO NOTICE 
THIS PATH, COMMERCE MODULES RETAIL 
ACTIONS AND I CAN GO AND OPEN UP 
THAT FILE. SO IF I GO BACK UP ABOVE 
THE SOURCE LEVEL UNDER NODE MODULES, 
COMMERCE MODULES, RETAIL ACTIONS, 
DIS, LIB. JOB DESCRIPT AND LOAD 
IT UP TO ACHE A LOCKE AT IT -- TO 
TAKE A LOOK AT IT. THIS IS GREAT 
IF YOU WANT TO CUSTOMIZE AND MAKE 
YOUR OWN DATA ACTIONS. THIS IS A 
GOOD SAMPLE CODE AS WELL. THIS IS 
THE DATA HOOD AND YOU CAN ADD YOUR 
OWN BUSINESS LOGIC TO DATA ACTIONS 
ON TOP OF THIS AS WELL. UP WITH 
THING TO NOTE HERE. IF YOU LOOK 
IN THIS CODE I KNOW WHERE TO LOOK 
BUT IT'S GOING TO PASS IN THE CONFIG 
DOT PRODUCT IDS. SO I NEED TO MAKE 
SURE THAT I
HAVE A PRODUCT IDS STRING 
AND THAT'S WHAT THE DATA ACTION IS
GOING TO 
USE TO TALK TO THEM AND
SAY GET ME THE PRODUCT
INFORMATION FOR 
THOSE PRODUCTS. SO AGAIN I'M GOING 
BACK TO THE
DEFINITION FILE THAT 
I CHANGED AND AT THE VERY BOTTOM I 
SLIPPED IN THE PRODUCT IDS. IN THE 
OFFERING TOOL IT'S A STRING TO PASS 
ON THE PRODUCT ID. THE NEXT THING 
TO SUPPORT THIS IS THE MOCK SO WE'LL 
GO OVER TO THE MOCK FILE. I'M JUST 
SETTING A PRODUCT ID. I THIS IS 
A KNOWN PRODUCT ID FROM THE PRODUCT 
FILE, AGAIN USE MOCKS AND THE FILE 
TO POINT TO THE SERVER I GET TO 
THIS DATA. DO THAT. THEN ONE MORE 
FILE I HAVEN'T TALKED ABOUT IS THIS 
DATA FILE. SO RIGHT HERE THIS IS 
USED BY DATA ACTIONS AND THIS IS 
THE RETURN VARIABLE FOR THE DATA. 
SO WHEN THE PRODUCT COMES BACK IT'S 
GOING GIVE ME BACK AN ARRAY OF SIMPLE 
PRODUCTS AND PUT IT IN THE PRODUCTS 
VARIABLE. IF I GO BACK TO MY DEFINITION 
FILE AND YOU DIDN'T NOTICE IT HERE 
BUT I DECLARED IT RIGHT HERE SO 
THAT NEEDS TO MATCHUP. ONCE WE HAVE 
THAT THE LAST THING TO DO FOR THE 
REACT COMPONENT TO USE THAT DATA. 
ONCE I HAVE ALL OF THAT, I'LL WALK 
THROUGH THAT BUT I WANT TO KICK 
OFF THE YARN START. WHILE THAT GOES 
I'LL SHOW YOU THE CHANGES TO THE 
REACT COMPONENT. IF YOU RECALL I 
HAVE ADDED PULLING THE PRODUCT NAME 
FROM THE CONFIG VALUES. I KEPT THAT 
IN AND I CHECK TO SEE IF A PRODUCT 
WAS PULLED BACK OR NOT SO UP HERE 
AGAIN I COULD JUST ACCESS THE PRODUCT 
INFORMATION FROM THIS DOT PROPS 
DOT DATA. THIS IS A SHORTCUT TO 
JUST REFERENCE IT VIA THE PRODUCTS 
VARIABLE HERE. SO WHAT I'M DOING 
IS SEEING IF THE PROJECTS SOUTHBOUND 
TRAFFIC RETURNED AS LONG AS IF SOMETHING 
IS IN IT. BUT I'M ONLY EXPECTING 
ONE BACK AND I JUST CHECKED TO SEE 
IF THERE'S A RESULT IN THE FIRST 
ARRAY OF PRODUCT. IF SO I DISTRACT 
THE NAMES AND THE DESCRIPTION AND 
THE URL. THE PRICE COMES BACK AS 
WELL AND I ALSO ABSTRACT THE PRICE 
AND I'M PASSING THE PRICE IN TO 
MY HELPER FUNCTIONS TO DISPLAY THE 
PRICE, SO I'LL GIVE THIS ANOTHER 
FEW SECONDS TO FINISH COMPILING. 
WHEN YOU RUN CREATE DATA ACTION 
FROM THE CLI, YOU GET JUST LIKE 
YOU HAVE MODULES HERE YOU'LL GET 
ANOTHER TOP LEVEL DIRECTORY FOR 
DATA ACTION. SO THAT'S ONE OF THE 
MAIN THREE THINGS WE'RE BUILDING. 
AGAIN WE HAVE MODULES AND DATA ACTIONS 
AND THEMES. ONCE THIS IS DONE WE'LL 
JUMP RIGHT INTO THE THEMES. IT LOOKS 
LIKE WE ARE DONE. I WILL GO AND 
REFRESH. THE NEXT THING THAT WORKS 
IS A SHOE THAT COMES UP. WE PULLED 
THIS FROM RETAIL AND JUST TO SHOW 
YOU IF I GO BACK TO YOUR HOME PAGE 
AND JUST GRAB A DIFFERENT SHOE AND 
IN THE URL UP HERE, WE HAPPEN TO 
HAVE THE PRODUCT NUMBER AND ALL 
I HAVE TO DO IS GO BACK INTO MY 
MOCK FILE AND CHANGE THAT PRODUCT 
I. D. TO SOMETHING ELSE. SAVE IT. 
REFRESH. THERE YOU GO. NOW IT'S 
PULLED RIGHT FROM THE RETAIL DATABASE. 
ALL RIGHT, SO NOW I WANT TO JUMP 
INTO THEMES. SO ONE THING I THINK 
I DIDN'T SHOW EARLIER THAT I WANT 
TO SHOW YOU AS WELL. THIS FROM THE 
TOP.. . IS THE ABILITY TO LOOK AT 
MY LIVE SITE AND I MENTIONED YOU 
CAN RENDER YOUR LIVE SITE LOCALLY 
SO TO DO THAT YOU WOULD JUST TYPE 
IN, ACTUALLY REMOVE ALL OF THIS 
AND POINT TO THE ROOT. OUR SITES 
ARE USING AD RIGHT NOW SO IT WILL 
ASK ME TO SIGN IN. NOW THIS, MY 
WEB SITE IS BEING PULLED FROM MY 
LIVE SITE AND THE JAY SON FILE REPRESENTDERED 
LOCALLY. -- RENDERED LOCALLY. I'LL 
SHOW YOU THEMES. I'M CREATING NEW 
THEMES. I'LL STOP MY YARN START 
AND UNDERNEATH THE THEME DIRECTORY 
I CREATE A NEW THEME. WE START WITH 
THE FOLDER AND CALL THIS THE SPRING 
THEME THEN UNDERNEATH THAT IT'S 
SPRING DOT THEME DOT SAS. IF YOU'RE 
FAMILIAR WITH SAS, A VARIABLES FILE, 
CREATE ONE OF THOSE, UNDERSCORE 
VARIABLES DOT SCSS. A CODE SNIPPET. 
THIS IS GOING TO BE REALLY BASIC 
JUST CHANGING THE FONT AND THE BACKGROUND 
COLOUR AND THE MAIN COLOUR. SO IN 
MY SPRING THEME I WILL SET THIS 
TEXT HERE AGAIN, JUST SETTING THE 
FONT AND TELLING IT TO USE BOOTSTRAP 
AND SETTING THE BACKGROUND COLOUR 
BUT I'M USING VARIABLES AND THOSE 
GO IN THE VARIABLE FOLDER HERE. 
SAVE THOSE. BEFORE I RUN YARN START 
I WANT TO SHOW YOU A BETTER WAY 
TO CREATE A THEME. THIS THEME IS 
VERY BASIC BUT YOU MIGHT WANT TO 
RESTYLE ALL OF THE MODULES. SOME 
OR ALL OF THE MODULES IN THE STARTER 
KIT. TO DO THAT I'LL CREATE ANOTHER 
DIRECTORY AND WE WILL CALL THIS 
THE IGNITE THEME BUT I'LL START 
WITH FABBRI CAM. MY MOUSE JUST DIED. 
THAT'S OKAY. WE'LL CALL THIS IGNITE 
AND THEN INSTEAD OF COPYING -- SORRY, 
INSTEAD OF CREATING NEW FILES I'LL 
COPY THE FABBRI CAM THEME IN HERE. 
TO DO THAT I'M GOING TO GO TO MY 
FOLDER WHERE THE SDK IS INSTALLED. 
UNDER NODE MODULES THE FABBRI CAM 
THEME GOT INSTALLED UNDER THE COMMERCE 
THEME. THEN FABBRI CAM AND I'M JUST 
GOING TO COPY THE FILES OVER. I'LL 
JUST COPY THOSE TWO AND GO BACK 
TO MY SOURCE DIRECTORY THEMES. AND 
THE IGNITE THEME AND I'LL CREATE 
MY IGNITE THEME HERE. TWO DIRECTORIES 
AND I'LL JUST GRAB THE FILES OUT 
OF MY DIRECTORY. A VARIABLE FILE 
ONE AND I'LL JUST BRING IT UP A 
LEVEL AND GRAB THESE FILES AND BRING 
IT UP A LEVEL AS WELL. I'LL GET 
RID OF THESE TWO EMPTY FOLDERS AND 
THE LAST THING I NEED IS TO RENAME 
THE FABBRI CAM THEME TO IGNITE. 
SAVE THAT. THERE IS ONE MORE THING 
THROUGH VISUAL STUDIO IF I OPEN 
UP THE FOLDER IN THE IGNITE THEME, 
DO YOU REMEMBER TWO DIRECTORIES, 
ONE HAD A VARIABLE FILE REFERENCING 
IT WITH A PATH DOT DOT. I'M GOING 
TO GET RID OF THAT SINCE I'VE GOT 
IT ALL IN ONE DIRECTORY. I'M GOING 
TO RUN YARN START NOW TO SHOW YOU 
THE TWO THEMES IN ACTION AND SHOW 
YOU HOW TO CHANGE THE THEME. BEFORE 
I START THAT, AN OVERVIEW OF WHAT 
YOU'LL FIND INSIDE. UNDER THE MODULES 
DIRECTORY YOU'LL FIND A SAS FILE 
FOR EACH OF THE STARTER KIT MODULES. 
YOU CAN CHANGE THE THEME OF EACH 
OF OUR MODEL YOU SAY. IF YOU WANT 
THE HERO MODULE TO LOOK DIFFERENT 
GO IN AND OVERRIDE THE CSS. FOR 
EXAMPLE, SHEER HERO AND YOU CAN 
SEE THE CSS IN HERE TO START CHANGING 
THINGS OR GLOBALLY IF I CLOSE THAT 
FOLDER THERE, THERE IS A VARIABLES 
FILE HERE. I'LL SHOW YOU THIS IN 
A MOMENT BUT, FOR EXAMPLE, IF YOU 
NOTICE THE GREEN, OVER HERE THE 
BUTTON IS RENDERING IN GREEN, THAT'S 
THE PRIMARY COLOR HERE. AS SOON 
AS THIS IS DONE I'LL SHOW YOU HOW 
TO CHANGE THIS AND CREATE YOUR THEMES 
LOCALLY AGAINST YOUR LIVE SITE AND 
SEE THEM LIVE. WHILE THAT IS FINISHING 
I DO WANT SHOW YOU IN THE OFFERING 
TOOLS HOW TO CHANGE THE THEME. IF 
YOU REMEMBER I WAS ON THIS HOME 
PAGE AND AT THE VERY TOP OF THE 
PAGE YOU CAN SET THE THEME AT THE 
RIGHT SIDE AND THERE'S A DROPDOWN 
FOR THE THEME. YOU CAN SET THE THEME 
AT THE SITE SETTING PAGE, I WON'T 
SHOW YOU NOW BECAUSE OF LACK OF 
TIME. AND ANY PAGE DRIVEN FROM THAT 
TEMPLATE WILL DRIVE THE THEME OR 
ON ANY OF THE SINGLE PAGES. ALL 
THE SITE DOESN'T HAVE TO USE THE 
SAME THEME BUT JUST WOMEN'S WOMENSWEAR 
FOR A WEEK OR A MARKETING CAMPAIGN 
YOU WANT TO HAVE A DIFFERENT THEME 
YOU CAN DO THAT. THE BUILD IS ALMOST 
DONE. THAT'S ALMOST DONE. OKAY, 
I WANT TO GO BACK FOR A PROJECT 
FEATURE MODEL THIS. DOESN'T HAVE 
A THEME AND I WAS USING THE THEME 
EQUALS DEFAULT AND NOW IT'S CHANGED 
TO SPRING. IT'S JUST GOING TO HAVE 
AN UGLY PURPLE BACKGROUND. NOT TOO 
EXCITING BUT JUST TO DRIVE THE POINT 
HOME THAT YOU CAN CREATE IT. A LITTLE 
MORE TRAGIC IF I'M RENDERING MY 
REAL SITE RIGHT NOW IT'S USING THE 
FABBRI CAM THEME BY DEFAULT AND 
IF I CHANGE THAT HERE AND THEME 
EQUALS -- IN THIS CASE I DON'T WANT 
A QUESTION MARK, BUT THEME EQUALS 
IGNITE. RIGHT NOW IT LOOKS THE SAME 
BECAUSE I HAVEN'T CHANGED ANYTHING. 
I'LL MAKE IT A PRIMARY COLOR AND 
I'LL PICK BLUE AND THAT'S THE VARIABLES. 
IF I GO TO THE FOUNDATION, YOU'LL 
SEE WHERE YOU CAN PICK THE BODY 
BACKGROUND FOR EXAMPLE. A GREY ONE 
AND I'LL CHANGE IT TO GREY, I THINK 
THERE'S A 500 AND LOOK HERE, A GREY 
500 DEFINED HERE. WE SHOULD COMPILE 
QUICKLY. WHEN IT'S DONE I'LL REFRESH 
AND WE'LL SEE A DIFFERENT PRIMARY 
COLOR. I'M GOING TO REFRESH THAT. 
DO YOU KNOW WHAT I NOTICED I SAW 
SOME RED OVER HERE AND THIS IS TELLING 
ME -- WHAT'S THAT? TYPO. THANK YOU. 
SO THIS A GOOD THING WHEN YOU'RE 
COMPILING YOU CAN SEE YOUR ERRORS 
RIGHT DOWN THERE. I SHOULD HAVE 
PICKED THAT ONE UP BEFORE. SAVE 
THAT. WHILE THAT'S HAPPENING, THAT'S 
ESSENTIALLY HOW YOU CREATE THEMES. 
NOW I WAS MENTIONING DEPLOYING THIS, 
ALL OF THIS WILL GET STORED AS ONE 
SINGLE CONFIGURATION PACKAGE. TO 
CREATE THE PACKAGE -- LET'S SEE 
IF THAT WORKED. .. I MIGHT HAVE 
DONE SOMETHING ELSE WRONG BUT YOU 
END UP SEEING A BLUE BUTTON HERE. 
IF I I HAVE A SPARE MINUTE I'LL 
TRY THAT AGAIN. TO PACKAGE THIS 
UP NOW YOU WOULD JUST CALL A COMMAND, 
MSD -- YARN MSDYN PACK. I'M DOWN 
TO A MINUTE AND A HALF LEFT AND 
I'LL SHOW YOU DOCUMENTATION WHICH 
HAS ALL THE SCREEN SHOTS IN IT. 
AT THE BOTTOM OF THE SECTION IS 
A DEPLOY AND MAINTENANCE SECTION 
AND PACKAGE CONFIGURATION AND DEPLOY. 
SO IN HERE, THE COMMAND I WAS MENTIONING, 
YARN MSDYM PACK. THAT TAKES A FEW 
MINUTES TO BUILD. LCS. IF YOU'VE 
USED THIS BEFORE YOU'RE FAMILIAR 
AND INSIDE THERE IS AN ASSET MANAGER 
TO PICK THE ENVIRONMENT YOU'RE WORKING 
IN OR THE PROJECT AND AN ASSET MANAGER 
TO UPLOAD. YOU CLICK THE NEW IMMERSE 
TAB ON LEFT AND A PLUS AND YOU CAN 
PICK YOUR FILE UPLOAD IT AND THIS 
ACTUALLY TAKES A LITTLE OVER AN 
HOUR TO UPLOAD BECAUSE IT DOES A 
FULL PROCESSING OF ALL THE COMPONENTS 
AND MODULES AND DOES A FULL TEST 
CHECK. IT'S STILL NOT DEPLOYED. 
YOU THEN PICK THE ENVIRONMENT YOU 
WANT TO DEPLOY TO. IF YOU WANT IT 
DEPLOYED TO SANDBOX, YOU CAN THEN 
GO TO THE AUTHORING TOOLS AND SEE 
ALL THE NEW MODULES SHOW UP. ACTUALLY 
I HAVE ANOTHER MINUTE THIS. MODULE 
I'VE DEPLOYED IT ALREADY AND IT 
LOOKS SO. .. I'M GOING BACK TO TEMPLATES 
AND I BELIEVE IN THE TEMPLATE ALREADY 
CREATED I CAN OPEN UP BODY AND I'LL 
SHOW AND OPEN UP THE SLOT AND CLICK 
THE ADD MODULE UP HERE THAT WILL 
GIVE ME OF THE FULL LIST OF ALL 
THE MODULES AND IN HERE I SHOULD 
BE ABLE TO SEE MY PRODUCT FEATURE 
RIGHT AT THE TOP HERE, ADD THAT 
AND ALL OF THOSE CONFIGS I ADDED 
WERE ON THE RIGHT-HAND SIDE. THIS 
IS THE SELL PLAIT AND THERE'S NO 
PAGE AND THAT'S WHY I DON'T HAVE 
A PAGE PREVIEW IN THE MIDDLE. A 
DROP DOWN FOR THE IMAGE LEFT, RIGHT, 
THE TITLE AND THE RICH TEXT IMAGER 
AND THE IMAGE PICKER AND THE PRODUCT 
I. D. SO I AM OUT OF TIME. I SEE 
A RED LIGHT BUZZING OVER HERE. THANK 
YOU SO MUCH. I'LL SHOW YOU TWO LAST 
SLIDES. OH, BY THE WAY, OUR PREVIEW 
WENT LIVE 101. IF YOU WANT TO REQUEST 
