How to browse the widget library

In short. When you open a Footer column or sidebar slot in the Theme Editor, a widget-type dropdown lists four options: Paragraph (short text), Image (clickable image tile), Code (raw HTML), and Embed (Video) (YouTube / Vimeo / Google Maps). These four types are the widget library — a fixed, curated set that covers every common Footer and sidebar use case. Pick the type that matches the slot's role, and the configuration form rebuilds instantly for that type. That's the full picture — read on for role-fit guidance and steps.

On this page: The four widget types · Role-fit guidance · How this connects · Steps — browse the library · What to do if it does not work

How to browse the widget library

What is this for?

When you open a Footer column or sidebar slot in the Theme Editor and click the widget-type dropdown at the top of the configuration panel, the list you see — Paragraph, Image, Code, Embed (Video) — is the widget library: a fixed, curated set of building blocks for any widget slot across your site.

Knowing the four types lets you plan a Footer layout before touching a single config screen. "Column 1 gets Paragraph, Column 2 gets Embed, Column 3 gets Code" — once you've mapped each slot to a type, configuration is fast. The library appears wherever a widget slot exists; the four entries are always the same, in the same order, in every session.

Scope

The widget library contains exactly four widget types: Paragraph, Image, Code, and Embed (Video). It appears in Footer column slots and sidebar widget zones exposed by the active theme. Social feeds are achieved via the Code widget with an embed snippet; maps via the Embed widget with a Google Maps URL. The library order is fixed (Paragraph → Image → Code → Embed) across all slots and sessions.

Examples

Good use cases

• Planning a 3-column Footer before touching the config. Before opening Theme Editor, map each column to a widget type: "Column 1 = Paragraph (brand description), Column 2 = Embed (brand video), Column 3 = Code (three image-link tiles)." With the four types memorized, that planning takes 30 seconds and the configuration is focused.
• Reaching for Embed instead of an iframe paste. For a Vimeo or YouTube video in a sidebar, pick Embed (Video) and paste the URL. The platform builds a responsive player automatically — no iframe markup, no responsive-video CSS.
• Preferring Image over Code-with-img for a clickable logo tile. The Image widget has structured fields (Media Library picker, alt text, link URL) that are easier to maintain than raw <a><img> markup in a Code widget.

What NOT to use this for

• Don't expect a Form widget. No Form entry exists. To add a form to a Footer or sidebar, use the Code widget and paste a form embed shortcode.
• Don't expect Menu, Gallery, or social-feed widgets. Use Code with the right HTML for those.
• Don't try to combine two types in one slot. A slot holds one widget of one type. For "an image and a paragraph" together, use a Code widget with HTML that combines both, or split into two slots.
• Don't expect the library to grow with custom types. The library is platform-provided and fixed. To extend beyond the four built-in types, paste custom HTML into a Code widget.

Fields

All four widget types are always available in every slot. The library order is fixed: Paragraph → Image → Code → Embed (Video).

How this connects to other features

• Footer chrome (Theme Editor → Footer → Columns) — the primary place the widget library appears. Each Footer column's dropdown lists the same four types.
• Sidebar widget zones (theme-dependent) — themes that expose sidebar slots use the same library.
• Adding a widget — after picking a type from the library, fill the configuration form that loads. Full detail: Add a widget to a sidebar or footer slot.
• Custom Codes — the Code widget renders HTML as visible markup in the slot. For site-wide scripts (analytics, tracking), use Custom Codes under its own sidebar entry — different surface, different purpose.
• Page Builder components — for page-body content, use Page Builder components. The widget library is for slot-shaped content (Footer columns, sidebar zones) only.

Before you start

• Identify the slot type. Footer column or sidebar zone? Both use the same library, but layouts differ (column width, position).
• Pick the role for the slot. Brand description? Clickable image? Video? Custom HTML? The role guides the widget-type choice.
• Match role to type. Paragraph → description / brand text. Image → single clickable image. Code → verbatim HTML. Embed → video or map.

Where to go

The widget library appears the moment a widget slot loads. Common entry points:

1. Theme Editor → Footer → Columns — every Footer column's widget-type dropdown shows the library.
2. Theme Editor → Sidebar (theme-dependent) — sidebar widget slots use the same library.
3. Page Builder (theme-dependent) — some themes expose page-level widget slots that use the same library.

Steps — Browse the widget library on a Footer column

1. Open Theme Editor → Footer → Columns

Click Sidebar → Appearance → Theme Editor → Footer → Columns. The Footer column configuration loads.

2. Click into a column's widget area

If the column already has a widget, its configuration form is displayed with the widget-type dropdown at the top. If the column is empty, the dropdown sits at the top of an otherwise-empty form area.

3. Open the widget-type dropdown

Click the dropdown. The library expands as a list of four entries: Paragraph, Image, Code, Embed (Video).

4. Read each entry's label

Each entry shows the type name. Some themes also show a short description ("- heading + body text" next to Paragraph).

5. Decide which type fits your column's role

Match the column's planned role to one of the four types using the role-fit table in the Fields section above.

6. Pick a widget type

Click the type you want. The dropdown closes and the configuration form below rebuilds to match the chosen type.

Steps — Compare widget types side-by-side

1. Open the widget library

Open any widget slot's widget-type dropdown.

2. Read the labels

Each label is short and purpose-named: Paragraph, Image, Code, Embed.

3. (Optional) Test each one to see its configuration form

Click each widget type in turn to preview its form. The form rebuilds in place each time. Switching back doesn't trigger a save — but switching does discard any content typed in the previous form.

4. Pick the right one for your role

After comparing, settle on the type that matches the slot's planned content.

Steps — Plan a Footer's widget layout before configuring

1. Sketch the Footer layout

On a notepad or wireframe, draw the Footer columns and label each with its role: "About text", "Brand video", "Image link".

2. Match each role to a widget type

For each column, pick the matching type from the library: "About text" → Paragraph. "Brand video" → Embed. "Image link" → Image. "Custom HTML" → Code.

3. Open Theme Editor → Footer

Open the actual configuration. You already know which widget you want in each column.

4. Configure column 1 first

Open Column 1, pick the type, fill the form, save. Move to Column 2.

5. Repeat for each remaining column

Each column's configuration is independent. Column 1's choice doesn't affect Column 2.

What success looks like

A successful library browse produces:

1. The dropdown shows all four widget types. Paragraph, Image, Code, Embed — always in this order.
2. Each entry is labeled clearly. Some themes show a short description next to the type name.
3. Picking a type rebuilds the configuration form below. The form is purpose-built for the chosen type.
4. The library is consistent across every slot. Footer Column 1 dropdown = Footer Column 2 dropdown = sidebar slot dropdown.

What to do if it does not work

The widget-type dropdown is empty

• Reload the page. A hard reload (Ctrl+Shift+R / Cmd+Shift+R) restores the dropdown.
• Check that you're on a Theme Editor screen. The widget library is only exposed on Theme Editor surfaces (Footer, sidebar).
• Try a different browser tab. A long-running tab can accumulate stale state.

The dropdown shows fewer than four entries

• Reload the page. The library should always have four entries. Fewer likely means the page is in a broken state.
• Contact support if the count remains wrong after reload.

I don't see the widget type I expected (Form, Menu, Gallery)

• The library doesn't include those types. See What NOT to use this for above for fallback strategies.
• Use a Code widget for custom HTML. A Code widget can hold any HTML, so it can stand in for a Form, Menu, or Gallery if you have the markup.

The dropdown shows the four types but one is grayed out or disabled

• Try clicking the disabled entry. If a click does nothing, reload the page. If it works on a different slot but not this one, the original slot has a glitch — reload.

The library entry I picked doesn't load its configuration form

• Wait a moment. The form swap takes a brief moment on slow connections.
• Switch types twice. Pick a different type, then switch back. Sometimes the second pick triggers the form load.
• Reload the page if the form still won't load.

Example 1: Planning a Footer before configuring

Your Store's marketing manager has never built a Footer in SGEN. Instead of clicking through trial and error, they spend 5 minutes with the library first:

1. They open Theme Editor → Footer → Columns and click the widget-type dropdown on Column 1 to see all four options.
2. They list on a notepad: "Paragraph for text, Image for picture, Code for HTML, Embed for video."
3. They sketch the Footer: Column 1 = About paragraph, Column 2 = Vimeo brand video, Column 3 = three image-link tiles in HTML.
4. They match each to a type: Paragraph, Embed, Code — then configure all three columns.

Outcome: 5 minutes of library browsing → a clear plan → 15 minutes of configuration. Zero trial-and-error reverts.

Example 2: Choosing Code when Embed is better — and correcting it

A common mistake: picking Code for a video when Embed is purpose-built for it.

Your Store's marketing manager wants a Vimeo video in the Footer. They pick Code and paste the Vimeo iframe HTML. The Footer renders the video — but at a fixed size that overflows on mobile.

The fix: Reopen the widget. Switch to Embed (Video). Paste the Vimeo URL (just the URL, not the iframe). Save. The platform builds a responsive embed automatically.

The lesson: When the library has a purpose-built widget (Embed for videos, Image for images), prefer it over Code with raw HTML. The purpose-built widget handles responsiveness and structure.

Known limitations

• The library is fixed at four entries. No way to add a new widget type from the admin.
• No Form, Menu, Gallery, or social-feed widgets. Use Code for those if needed.
• Library order isn't customizable. The four entries always appear in the same sequence.
• No "preview the widget" before picking. Picking the type loads the configuration form, but doesn't render a public-site sample. Check the live site after saving.
• No bulk operations. Each column's widget is configured separately.

Next steps

• Full detail on filling a widget's configuration form: Add a widget to a sidebar or footer slot
• Full Footer end-to-end: Edit your site footer