Add an Off Canvas widget to a Loop Grid

Loop Grids can incorporate Off Canvas widgets. For instance, in an online store, you can create a loop item that displays a product and a short product description. You can then use an Off Canvas widget to create a More info button that, when clicked will show the full description and price.

Add an Off Canvas widget to a Loop Grid

1. Create a loop grid and template. For details, see Build a loop grid.
   
   Note

   If your loop grid will be displaying products, make sure the template type is set to Products.
   
   
   
2. Add Featured Image to the template.
3. Add Product Title to the template.
   
4. Add Off Canvas widget to the template.
   
5. Add Product Content to the Off Canvas widget.
6. Add Product Price to the Off Canvas widget.
   
7. Click the shaded area on the right to access the Off Canvas widget options.
   
8. In the Off Canvas Name text box, enter Expanded Display.
   There are a number of options you can change in the Off Canvas widget. For details, see Off Canvas widget. For this example, we’ll use the default options.
   
9. In the panel, toggle Editing mode to Off.
   This returns you to the regular editing screen.
   
10. Add a Button widget to the Loop Grid.
    This button is used to trigger the off canvas widget.
11. In the panel, rename the button Learn More.
    
12. In the Link field, click the dynamic tag icon.
    
13. Select Off Canvas from the dropdown menu.
    
14. Click the wrench icon.
    This opens the options box.
    
15. Choose the widget from the dropdown menu. In this example, the name of the widget is Off Canvas. 
16. On the canvas, click Save & Back.

The Loop Grid now displays Featured Images, Product Images and a Learn More button which, when clicked, reveals a product description and price.