help center

Search
Close this search box.
On this page

Add an Off Canvas widget to a Loop Grid

Last Update: December 15, 2024

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.

    image 1 Add an Off Canvas widget to a Loop Grid 1
  2. Add Featured Image to the template.
  3. Add Product Title to the template.
    image 2 Add an Off Canvas widget to a Loop Grid 3
  4. Add Off Canvas widget to the template.
    image 3 Add an Off Canvas widget to a Loop Grid 5
  5. Add Product Content to the Off Canvas widget.
  6. Add Product Price to the Off Canvas widget.
    image 72 Add an Off Canvas widget to a Loop Grid 7
  7. Click the shaded area on the right to access the Off Canvas widget options.
    image 73 Add an Off Canvas widget to a Loop Grid 9
  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.
    image 74 Add an Off Canvas widget to a Loop Grid 11
  9. In the panel, toggle Editing mode to Off.
    This returns you to the regular editing screen.
    image 4 Add an Off Canvas widget to a Loop Grid 13
  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.
    image 75 Add an Off Canvas widget to a Loop Grid 15
  12. In the Link field, click the dynamic tag icon.
    image 76 Add an Off Canvas widget to a Loop Grid 17
  13. Select Off Canvas from the dropdown menu.
    image 77 Add an Off Canvas widget to a Loop Grid 19
  14. Click the wrench icon.
    This opens the options box.
    image 78 Add an Off Canvas widget to a Loop Grid 21
  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.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Platinum popup banner