Add Background Color Selection on Site Builder WebStore

Scenario

The background color selection allows a shopper the ability to control the website background color for an enhanced shopping experience. When a shopper hovers their mouse over a certain color option, the website background color will reflect the selected color

Solution

1. Navigate to Commerce > Site Builder > Themes
2. Link next to the current theme: Click Edit
3. Click the Body tab
4. Logo and Tabs Template: Enter the following code:

   • <!-- Start of Script to Set background color (User control) -->
     Choose Background Color:
     [<a href="/"onmouseover="document.bgColor='green'">Green</a>]
     [<a href="/"onmouseover="document.bgColor='seagreen'">Sea Green</a>]
     [<a href="/"onmouseover="document.bgColor='red'">Red</a>]
     [<a href="/"onmouseover="document.bgColor='magenta'">Magenta</a>]
     [<a href="/"onmouseover="document.bgColor='pink'">Pink</a>]
     [<a href="/"onmouseover="document.bgColor='purple'">Purple</a>]
     [<a href="/"onmouseover="document.bgColor='navy'">Navy</a>]
     [<a href="/"onmouseover="document.bgColor='blue'">Blue</a>]
     [<a href="/"onmouseover="document.bgColor='royalblue'">Royal Blue</a>]
     [<a href="/"onmouseover="document.bgColor='Skyblue'">Sky Blue</a>]
     [<a href="/"onmouseover="document.bgColor='yellow'">Yellow</a>]
     [<a href="/"onmouseover="document.bgColor='brown'">Brown</a>]
     [<a href="/"onmouseover="document.bgColor='white'">White</a>]
     [<a href="/"onmouseover="document.bgColor='black'">Black</a>]
     [<a href="/"onmouseover="document.bgColor='coral'">Coral</a>]
     [<a href="/"onmouseover="document.bgColor='olivedrab'">Olive Drab</a>]
     [<a href="/"onmouseover="document.bgColor='orange'">Orange</a>]
     
     <!-- End of Script to Set background color (User control) -->

5. Click Save
   Note: The code can be modified so that the color options will appear horizontally or vertically.