Skip to content

Instantly share code, notes, and snippets.

@gautham20

gautham20/v2 Change the widget position

Last active May 28, 2017 22:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gautham20/c1a727a828d7c62e33e33079c0213e83 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gautham20/c1a727a828d7c62e33e33079c0213e83 to your computer and use it in GitHub Desktop.
Download ZIP
Changing the Display Position of Widget
Raw
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=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=6f696be1d0d5780be3965c34d76c4483&filename=V2_Adding_Custom_Header" target="_blank"> Add Your Own Header</a></li>
##Next Steps
###<li><a href="https://stackedit.io/viewer#!provider=gist&gistId=6f696be1d0d5780be3965c34d76c4483&filename=V2_Adding_Custom_Header" target="_blank"> Publish Widgets</a></li>
Raw
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=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"> Add Your Own Changed</a></li>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment