Adding Custom Header

V2 Adding Custom Header

<h2> Creating a Customizable Widget Header </h2>
To add a customizable header to widget, follow the steps below.

 - Click on **Folder**, **widget titles**
 - Click on the **Menu** Icon in the top right corner and select **Add new Variable**
 
 ![enter image description here](http://i.imgur.com/Noqc7IL.png)

 - Replace **Untitled Variable** with any **variable name** for example **Trending Products Header**. (Keep Note of this **variable name** as it will be used again) Click on **Variable Configuration**
 
 ![enter image description here](http://i.imgur.com/wnwjKqD.png)  

 - In **Choose variable type** page, scroll down and select **Constant**
![enter image description here](http://i.imgur.com/BtQyo3x.png) 
 - A constant variable will be created, click on **Constant**, the **value** field should be visible.
 - In the value field, enter the widget title that should be displayed in the site, for example **Top Trends**

 ![enter image description here](http://i.imgur.com/CUo5WVT.png)
 - Click on **Save**
 
 


----------


 - Open the widget code for which the created header is to applied. The created widgets can be found either in **Home Page Folder** or **Product Page Folder**, for example **Trending Products Widget**

 ![enter image description here](http://i.imgur.com/nTG0KL5.png)
 - In the widget code, look for **ADD WIDGET HEADER HERE**,and in the line below that, replace **Deafult Header** with the variable name of the header created. In the example, the variable name is **Trending Products Header**.(Note that the variable name must be inside the double paranthesis **{{}}**)

 ![enter image description here](http://i.imgur.com/WrWlHl9.png)

 ![enter image description here](http://i.imgur.com/wMN9cpA.png)
 
 - Click on **save**


##Other Customizations
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=15e62bf1219d05a34b8c1b0fcb597219&filename=V2_Adding_Custom_CSS" target="_blank"> Add Your Own CSS Changes</a></li>
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=c1a727a828d7c62e33e33079c0213e83&filename=v2_Change_the_widget_position" target="_blank"> Change the Display Position of the Widget</a></li>
##Other Steps
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=b28b8929085eb6c6e8b1797b02531567&filename=V2_Publish_the_widgets" target="_blank">Publish The Widgets</a></li>



 

V2_Adding_Custom_Header

<h2> Creating a Customizable Widget Header </h2>
To add a customizable header to widget, follow the steps below.

 - Click on **Folder**, **widget titles**
 - Click on the **Menu** Icon in the top right corner and select **Add new Variable**
 
 ![enter image description here](http://i.imgur.com/Noqc7IL.png)

 - Replace **Untitled Variable** with any **variable name** for example **Trending Products Header**. (Keep Note of this **variable name** as it will be used again) Click on **Variable Configuration**
 
 ![enter image description here](http://i.imgur.com/wnwjKqD.png)  

 - In **Choose variable type** page, scroll down and select **Constant**
![enter image description here](http://i.imgur.com/BtQyo3x.png) 
 - A constant variable will be created, click on **Constant**, the **value** field should be visible.
 - In the value field, enter the widget title that should be displayed in the site, for example **Top Trends**

 ![enter image description here](http://i.imgur.com/CUo5WVT.png)
 - Click on **Save**
 
 


----------


 - Open the widget code for which the created header is to applied. The created widgets can be found either in **Home Page Folder** or **Product Page Folder**, for example **Trending Products Widget**

 ![enter image description here](http://i.imgur.com/nTG0KL5.png)
 - In the widget code, look for **ADD WIDGET HEADER HERE**,and in the line below that, replace **Deafult Header** with the variable name of the header created. In the example, the variable name is **Trending Products Header**.(Note that the variable name must be inside the double paranthesis **{{}}**)

 ![enter image description here](http://i.imgur.com/WrWlHl9.png)

 ![enter image description here](http://i.imgur.com/wMN9cpA.png)
 
 - Click on **save**


##Other Customizations
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=1f97f508ab0ae07e4500ad16879d575a&filename=Step1_GTM_Import" target="_blank"> Add Your Own CSS Changes</a></li>
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=7dd84a04aa692e269fd5e3c2e2e0227a&filename=Step2_adding_your_own_widget" target="_blank"> Change the Display Position of the Widget</a></li>