How to create a Customer Display using HTML

This will show you how to create a customer display using HTML. You will have control whether the image will stretch, cover the entire container or you can set it up to repeat.

In this sample we are going to set the image to object-fit: contain which will display the full image without cropping 

Preparing the assets

1. Download the "HTML Customer Display.html" attached to this article 
2. Image file size should have the height of you display resolution 
3. Locate your image file you want to attach to the customer display

Upload the image to your Cloud Retailer instance

1. Go to your back office. yourinstance.cloudretailer.com
2. Click on Admin > Global Attachments
3. Click on Add new attachment at the very bottom
4. Select the image. Mine is CR logo.png
5. Click on Save 
6. Scroll down to the image that you uploaded
7. Click on the box beside the x bottom to make the image accessible to public
8. Click on None and select ALL from the drop down list
9. Click save

   Note: you can also use a third party site that will link directly to the image 

Edit the HTML file 

1. Open the "HTML Customer Display.html" you downloaded earlier using your text editor
2. Make sure the object-fit is set to contain

3.   img {
               width: 100vw;
               height: 100vh;
               object-fit: contain; /* Displays full image without cropping */
               display: block;
   }

4. Replace the {youinstance} with your instance and replace the imagefilename.fileextension with your image file. Mine is CR logo.png

   <img src="https://youinstance.cloudretailer.com/Attachments/GetGlobalAttachment?attachmentName=CR logo.png">

5. Save your HTML file

Upload the HTML file

1. Go to your back office. yourinstance.cloudretailer.com
2. Click on Admin > Global Attachments
3. Click on Add new attachment at the very bottom
4. Select the "HTML Customer Display.html"
5. Click on Save 
6. Scroll down to the html file that you uploaded
7. Click on the box beside the x bottom to make the image accessible to public
8. Click on None and select ALL from the drop down list
9. Click on the HTML file to open a new tab. We are going to use the link in the next step

Create an new customer display schedule

1. Click on Admin > Customer Display Schedules
2. Click on Create New Customer Display Schedule
3. Enter description and a code. The code can be the same as the description or an abbreviation of it
4. Click on Add new entry
5. Copy the link from step 9 of the Upload the HTML file section
6. Paste the link to the Resource Url textbox
7. Select Page in the type column
8. Click on Save 

Set the Register to use the Customer Display Schedule 

You have to do this for all the registers available in the store. 

1. Click on Admin > Device / Register List 
2. Select the register you want to assign the Customer Display Schedule 
3. Click on the Edit Selected Register button
4. Scroll down to the very bottom of the page
5. Select the Customer Display Schedule you created in the drop down list
6. Click Save 

Apply Changes to the Register

1. Sync your Cloud Retailer register 
2. Exit out of Cloud Retailer and Reopen it.
3. Log in and you will see the new Customer Display you created.