Symbol Variables

Symbols in Webflow are fantastic and in widespread use. The ability to pass in variables to Symbols would increase their use cases immeasurably, here some examples:

1. Within a Collection Template

Given I have collections called "Products", "Basic Pages" and "Blog Articles", I would like to display Products relating to the content within individual Basic Pages or Blog Articles.

Basic Pages and Blog Articles can multi-reference Products via "Related Products".

I create a symbol called "Related Products" containing a Products collection list. Within the Symbol settings, I can add a named variable called "products", and set it's value requirement to a field-type of multi-reference.

Within the collection templates for Basic Pages and Blog Articles, I place the Related Products symbol in the sidebar, and set the variable to use data from the "Related Products" field in each instance.

Now when I update the structure of the "Related Products" symbol, it updates across both collection templates (like a current symbol), but uses dynamic data from individual collection items within two different collections.

2. Used in conjunction with Global Variables per Site

I have a global variable called "Phone Number".

I have a navbar symbol, containing a click to call link.  Within the Symbol settings, I can add a named variable called "Phone Number" and set it's value requirement to the Global Variable.

When I copy and paste this symbol to another site, Webflow backend voodoo checks if the symbols variable requirements exist, and if not, asks me if I would like to create a Global Variable called "Phone Number".

  • Tim Daff
  • Nov 7 2018