gautham20

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 38,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [

gautham20

gautham20

Adding Custom Web Widgets Using Google Tag Manager
==================================================

Importing GTM scripts
---------------------
To add custom widgets import the file provided into GTM by following these steps.

 1.  Login to your [google tag manager console](https://tagmanager.google.com/#/home)
 2.  Click on **Admin** tab
 3. Click on **Import Container**

gautham20

Adding Custom Web Widgets Using Google Tag Manager
==================================================

Importing GTM scripts
---------------------
To add custom widgets import the file provided into GTM by following these steps.

 1.  Login to your [google tag manager console](https://tagmanager.google.com/#/home)
 2.  Click on **Admin** tab
 3. Click on **Import Container**

gautham20

Adding Custom Web Widgets Using Google Tag Manager
==================================================

Importing GTM scripts
---------------------
To add custom widgets import the file provided into GTM by following these steps.

 1.  Login to your [google tag manager console](https://tagmanager.google.com/#/home)
 2.  Click on **Admin** tab
 3. Click on **Import Container**

gautham20

Adding Your Own Widget
======================

Any Product List created in the Yfret portal can be added as a custom widget to the Home Page of your site.

<h2>Creating a Product List</h2>

 - Login to your **Yfret Portal**.

gautham20

<h2> Adding Custom CSS for a Widget </h2>
To add a customizable header to widget, follow the steps below.

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

 - In the Create Tag page replace **untitled tag** with any widget name.For Example **Trending Product CSS** And click on the **Tag Configuration**
 ![hpw](http://i.imgur.com/tATgb8b.png)

gautham20

<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**
 

gautham20

<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)  

gautham20

<h2>Preview the Widgets</h2>

 - Click on **Preview** button

 ![enter image description here](http://i.imgur.com/Sd8D5Pe.png)
 > If any steps were off-target in the process, you might face errors at this point. kindly contact us for further assistance.
 - A Preview mode bar will appear in the dashboard

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