Changing the Display Position of Widget

v2_Change_the_widget_position

<h2>Changing the Display Position of Widget</h2>

 - Click on **Folder**, and click on **Home Page** or **Product Page**, depending on the widget you want to change.
 - Click on the **Menu** Icon in the top right corner and select **Add new Variable**
 
 ![enter image description here](http://i.imgur.com/LqDm0IN.png)

 - Replace **Untitled Variable** with any **variable name** for example **Header Page Position 1**. (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 **CSS Selector** inside which the widget should be added in the site.
 - <h3>Developer Notes</h3>
     - CSS Selector must be valid JQuery Selector present in the page.
     - for example if the parent HTML present in the page is `<div id="yfretWidget"></div>`, then the CSS selector is `#yfretWidget`  

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


----------


 - Open the widget code for which the position is has to be changed. 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 PARENT HERE**,and in the line below that, replace **Default Home Header** with the variable name of the parent created. In the example, the variable name is **Home_parent_1**.(Note that the variable name must be inside the double paranthesis **{{}}**)

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

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


##Other Customizations
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=b2bf8a1c57c337074b93f92b29c889a6&filename=V2_Adding_Custom_CSS" target="_blank"> Add Your Own CSS Changes</a></li>
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=292894a322b0321f1f554f599e873866&filename=V2_Adding_Custom_Header" target="_blank"> Add Your Own Header</a></li>

##Other Steps
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=e41aae681cb4908b97299a2fc6e36596&filename=V2_Publish_the_widgets" target="_blank">Publish The Widgets</a></li>