To open these 4 fields, click an item in the menu tree to open the Edit item panel, scroll to the More block at the bottom and click See more. Two groups appear: Motion (with the Animation field) and Advanced (with the Class names (reusable), CSS and Attributes fields). Each field is a line “Name: value”; click the line or the pencil icon to edit it. If any other field in this group already has a non-default value, the group opens by itself.
This is advanced material. If you only want to change a color or text size, see Custom look for one item.
Every setting here only applies to the one menu item you have open. To write CSS for the whole menu, see CSS for the menu, reusable classes and fonts.
Add a motion effect to the item
Animation
Where: Edit item → More → See more → Motion group → Animation field. It adds a motion effect to this item when it is drawn on the store.
Options / default: a dropdown list. The default is Inherit (empty), which means the item has no effect of its own.
Applies to: all 6 menu types, every item level, every plan. Item types with this field: Icon + image + text, Big image + text, Image banner, Card, Custom HTML. Not available for Group title, Blank space, Line or Tab.
What shoppers see when you change this field: the effect you choose is attached to the inside of the item, so the item moves in that style when it appears. Leave it empty and the item stays still.
- The available effects are grouped: Popular (bounce, flash, pulse, rubberBand, shakeX, shakeY, headShake, swing, tada, wobble, jello, heartBeat) and entrance/exit groups such as Back, Bouncing, Fading… Click the Demo link next to a group name to open the animate.style page and preview each effect.
- When to use it: when you want to draw attention to an important item, for example making a Sale item wobble lightly. Use only a few, because many moving items at once are distracting.
To change the effect when a submenu panel opens, go to Submenu → Animation in Custom look for one item. The effect for the whole menu is on Arrows and animation.
Attach reusable classes to several items
Class names (reusable)
Where: Edit item → More → See more → Advanced group → Class names (reusable) field. It attaches one or more classes to the menu item. Items with the same class share one style, so you only edit the style once and the whole group changes.
- How to use it: type into the field Type to suggest classes or add custom. The app suggests the reusable classes you created in the Configure step, under Reusable Classes. Choose a suggestion, or type any name and press Enter or the + sign to add it. Each selected class appears as a small tag that you can click to remove.
- Where to create a class: write its style in the Configure step, under Reusable Classes (CSS). See CSS for the menu, reusable classes and fonts for how. If the class has no style written there yet, attaching it changes nothing.
- Default: empty.
- Applies to: all 6 menu types, every item level, every plan. Supported item types: Icon + image + text, Big image + text, Group title, Image banner, Card, Custom HTML. Not available for Blank space, Line or Tab.
- What shoppers see when you change this field: the classes you choose are added to the outer frame of the item on the store. An item whose class has a written style takes on that style; if the style isn’t written yet, it looks no different.
Write CSS for one item
The CSS field — its full name is Internal Stylesheet / CSS — lets you write CSS that only applies to the one item you have open.
- How to write it: use the
&symbol to refer to this item, for example&{color:red}. To change the parts inside the item, use.inner,.name,.icon, for example.inner{padding:4px}. If you write something plain likecolor:red;, the app also applies it to the item. - To enlarge the input area: click the Expand editor button at the corner of the field to open a bigger editor.
- To look up the part names inside an item: see Look up the menu’s CSS class names.
- Default: empty. Items created from a ready-made template often come with some CSS; if you’re not sure what it does, leave it as is.
- Supported item types: Icon + image + text, Big image + text, Group title, Image banner, Card, Custom HTML. Not available for Blank space, Line or Tab.
Wrong CSS can shift an item out of place or make it disappear. After you save, check the store with Test before you publish. If you're not sure, ask the support team.
Add HTML attributes to an item
Attributes
Where: Edit item → More → See more → Advanced group → Attributes field. It attaches extra HTML attributes to the menu item. You only need this field when a piece of JavaScript or CSS from outside — for example from your theme or another app — needs to find the menu item by its attributes.
- How to enter: type in the form
name=value. For several attributes, separate them with a semicolon;or a comma,, for exampleattr1=value1;attr2=value2. - Default: empty.
- Applies to: all 6 menu types, every item level, every plan. Supported item types: Icon + image + text, Big image + text, Card, Custom HTML. Not available for Group title, Image banner, Blank space, Line or Tab.
- Attribute names may only contain letters, numbers,
_and-; values can’t contain spaces. Any pair in the wrong format is skipped, and the correct pairs are still attached. - What shoppers see when you change this field: nothing changes that you can see. The attributes are attached to the outer frame of the item in the page code, so the theme or another app can find the item.
Quick summary of the fields
| Field | Use it to | Default |
|---|---|---|
| Animation | Add an effect when the item appears | Inherit (none) |
| Class names (reusable) | Attach reusable classes | Empty |
| Internal Stylesheet / CSS | Write CSS for this item only (&{…}) |
Empty |
| Attributes | Add HTML attributes in name=value form |
Empty |
All 6 menu types have these fields, but each item type only shows some of them. For details, see Menu item types.
Other platforms
The steps above are for Shopify — the default way.
The fields are exactly the same as on Shopify.
The fields are exactly the same as on Shopify.