How to add a widget to a sidebar or footer slot

In short. Widgets are small configurable blocks — Paragraph, Image, Code, or Embed — that you drop into Footer columns or sidebar slots in the Theme Editor. Pick the widget type from the dropdown, fill in its form (which swaps in real time when you change the type), and save the enclosing Footer or sidebar form to publish it to your site.

On this page: What this is for · Fields by widget type · Steps · What success looks like · Troubleshooting · Limitations

How to add a widget to a sidebar or footer slot

What is this for?

Footer columns and sidebar slots in SGEN are filled with widgets — small, configurable content blocks. Four types are available: Paragraph (heading + body text), Image (image from the Media Library, alt text, optional link), Code (a code-area field rendered as a code block on the public site), and Embed (a video URL rendered as a responsive player). Each type has its own form, but the workflow is identical: pick the type, fill the form, save.

When you switch the widget type, the configuration form swaps in real time — no reload, no save required. The previous type's content is discarded, so copy anything you want to keep before switching.

Scope

Each slot holds one widget at a time. The actual save is performed by the enclosing Footer or sidebar form — not by the widget picker itself. Drag-and-drop reordering between columns is not supported. The standalone Widgets page is non-functional on the current version — use the Footer panel instead.

Examples

Good use cases

• Footer "About" column. Open Theme Editor → Footer → Columns, pick Paragraph for Column 1, type a 60-100-word intro, save. Done in under 5 minutes.
• Brand video in a sidebar slot. Pick Embed, paste the Vimeo or YouTube URL, save. The slot renders a responsive player sized to the column width.
• Swap a widget type without rebuilding the slot. Had a Paragraph in Column 2, now want an Image? Switch the type — the form rebuilds in real time. The old content is discarded; the new fields appear immediately.

What NOT to use this for

• Don't use a widget for full-page content. A widget is a small, slot-sized building block (Footer column, sidebar). For a complete page (a "Blog Post", "About Us", "Privacy Policy"), use Pages under Sidebar → Pages. Pages have full layouts; widgets are slot-shaped.
• Don't use a Paragraph widget for long-form content. Paragraph widgets are for 1-3 short paragraphs. For long-form content (multi-paragraph essays, listicles), use the Page Builder's Text component with full editor controls. The widget's plain textarea isn't built for long writing.
• Don't use a Code widget to inject site-wide JavaScript or CSS. A Code widget renders code on the public site as a code block (visible to readers, not executed). For site-wide scripts or CSS injection, use Custom CSS or Custom Codes (under their respective sidebar entries).
• Don't use an Embed widget for image embeds. The Embed widget is for video embeds (YouTube, Vimeo). For images, use the Image widget — it has dedicated fields for image picker, alt text, and link.
• Don't expect the widget form to validate every field for you. The platform stores whatever you type. If you type a malformed URL into the Embed field, the public site may render a broken embed. Test on the public site after saving.
• Don't try to drag widgets between Footer columns. Each Footer column has its own widget. To "move" a widget from Column 1 to Column 2, copy the configuration values manually — no drag-and-drop between columns.

Fields

Changing the widget type clears the current slot's content fields. Select the correct type first, then fill the fields, then save.

How this connects to other features

• Theme Editor → Footer → Columns — the most common entry point for the widget loader. Each column is a widget slot. The widget type and its config are saved with the Footer.
• Sidebar widget zones — many themes expose sidebar slots that also use the widget loader. The placement varies by theme; the loader is identical.
• Custom Fonts — if you add a Paragraph widget that uses a custom font, the typography pulls from your Custom Fonts registration.
• Media Library — Image widgets pick their image from the Media Library. Upload images there first, then reference them in the widget.
• Custom Codes — for site-wide scripts (analytics, tracking pixels), use Custom Codes, not the Code widget. The Code widget renders code as visible code-block content.
• The Browse the widget library doc — the picker that lists available widget types is documented separately. This doc covers the form-fill-and-save workflow for one widget at a time.

Before you start

• Decide which slot to fill. A Footer column? A sidebar zone? Different surfaces have slightly different layouts but the widget configuration is identical.
• Decide the widget type. Paragraph for plain text. Image for an image (with optional link). Code for a code snippet (visible to readers). Embed for a video URL.
• Have your content ready. For Paragraph, draft the text first. For Image, upload to Media Library first. For Embed, copy the video URL. For Code, copy the snippet.
• Know the slot's width. Footer columns are typically 1/3 of the Footer width. Sidebar slots are typically narrow. Plan your widget content to fit. A long paragraph that's 80 words can fit a Footer column. A 200-word essay won't read well there.

Where to go

The widget loader is reached from many places. The most common entry point:

1. Theme Editor → Footer → Columns — every Footer column is a widget slot. Click into a column to open the widget loader.
2. Theme Editor → Sidebar zones (if your theme uses them) — open the sidebar configuration and click into a slot.
3. Page Builder — some themes expose page-level widget slots in addition to component-driven content. Check your specific theme.

The widget loader's UI is the same everywhere: a widget-type dropdown at the top, the configuration form below, and Save / Cancel buttons at the bottom.

Steps — Add a Paragraph widget to Footer Column 1

1. Open Theme Editor → Footer → Columns

Click Sidebar → Appearance → Theme Editor → Footer → Columns. The Footer column configuration loads. Each column has a widget area.

2. Click into Column 1's widget slot

The widget loader opens. At the top, a dropdown labeled Widget type (or similar) shows the four available types. Below the dropdown, the configuration form for the currently-selected type fills the rest of the slot.

3. Pick "Paragraph" from the Widget type dropdown

If Paragraph wasn't already selected, the form below the dropdown rebuilds. Now the form shows a Heading field (text input) and a Body field (textarea).

4. Fill the Heading and Body fields

Type "About Your Store" into the Heading field. Type a short paragraph (60-100 words) into the Body field.

5. Click Save Widget

The widget configuration is saved to Column 1 of the Footer. The change is committed when you also save the Footer as a whole (some themes save individual widgets; others batch).

Steps — Switch a widget from Paragraph to Image without losing context

1. Open the widget you want to change

Open Theme Editor → Footer → Columns and click into the column whose widget you want to change. The widget loader opens with the current type selected.

2. Click the Widget type dropdown

The dropdown shows the four types: Paragraph, Image, Code, Embed.

3. Pick "Image"

The form below the dropdown rebuilds in real time. The Paragraph fields (Heading, Body) disappear. The Image fields (Image picker, Alt text, Link URL) appear in their place.

4. Fill the Image fields

Click the Image picker. The Media Library opens. Pick an image. The Alt text field accepts a short description. The Link URL field is optional — fill it if you want the image to be clickable.

5. Click Save Widget

The widget is now an Image widget. The previous Paragraph content was discarded. The Footer column will render the image on the public site.

Steps — Configure an Embed widget for a Vimeo video

1. Have the video URL handy

For Vimeo, the URL looks like https://vimeo.com/<id> (where <id> is a number). For YouTube, it's https://www.youtube.com/watch?v=<id> or https://youtu.be/<id>. Copy the URL from the video service.

2. Open the widget slot

Theme Editor → Footer → Columns or sidebar zone, depending on where you want the embed.

3. Pick "Embed (Video)" from the Widget type dropdown

The form rebuilds. Now there's a single field labeled Video URL (or similar).

4. Paste the URL

The platform recognizes the URL and renders a responsive embed.

5. Click Save Widget

The video embed is saved to the slot. The public site will show the responsive video player on the next page load.

What success looks like

A successful widget save produces:

1. The widget loader closes (or the configuration form returns to "no unsaved changes").
2. The Footer / sidebar preview updates to show the new widget content. For Paragraph, the heading and body appear. For Image, the image is displayed. For Code, the snippet is rendered as a code block. For Embed, the responsive video player appears.
3. The Save button at the bottom of the form reverts to its idle state ("Save Widget" or grayed-out, depending on the theme).
4. After clicking Save on the parent surface (Footer or sidebar), the public site picks up the change on the next page load.
5. The widget renders consistently with your global typography — the heading uses your H4 (or similar) style, body text uses your body font, etc.

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 loader is exposed on Theme Editor surfaces (Footer, sidebar). It may not be available on every screen.

Switching widget type doesn't update the form

• Wait a moment. The form swap may take a second on a slow connection.
• Reload the page. A hard refresh restores the loader.
• Try selecting the same type twice. Pick Paragraph then Image. Sometimes a second pick triggers the swap that the first didn't.

The widget saves but doesn't appear on the public site

• Hard-refresh the public site. A cached page may show the old state.
• Verify the Footer (or parent surface) is saved. Saving a single widget may not commit to the public site until the parent surface is also saved.
• Check the right column. A widget in Column 2 won't appear in Column 1. Confirm the column you saved matches the column you're checking.

The Image widget shows a broken image

• Check the image is still in the Media Library. If the image was deleted, the widget references a missing file. Re-pick a fresh image.
• Hard-refresh the public site. The browser may have cached an earlier broken state.

The Embed widget shows a blank space instead of the video

• Check the URL format. Some video services require a specific URL shape. Vimeo accepts vimeo.com/<id>, YouTube accepts youtube.com/watch?v=<id> and youtu.be/<id>. Other shapes may not be recognized.
• Test the URL in a browser. Paste the URL into a fresh browser tab. If the video plays directly on the service's page, the URL is good. If not, find a different URL.
• Verify the video is public. A private or unlisted video may not embed correctly. Make it public on the video service first, then re-test.

The Code widget displays the code with HTML tags broken

• Be sure the field is the right widget type. Code widgets render plain code in a code block; they don't execute it. If you want the snippet to run as a script on every page, use Custom Codes instead.
• Don't paste HTML special characters as escaped entities. Type characters as-is; the platform escapes them for display correctly.

The widget saves but switches back to a different type after reload

• Try saving twice. Sometimes the initial save doesn't fully commit. A second Save typically locks it in.
• Open the widget after reload. The loader should now show the type you saved. If not, the save isn't reaching the database — try a different browser or a fresh session.

Picker behavior — small details that help

• The widget-type dropdown is a single select. A widget slot holds one widget at a time, of one type at a time.
• Switching types discards the previous type's content. When you change from Paragraph to Image, the Heading and Body values are not preserved. Confirm before switching if you've typed substantial content.
• The configuration form rebuilds in place. No navigation, no reload, no save-required-first.
• Each widget type has its own validation. Paragraph requires no fields to be filled (you can save an empty paragraph). Image requires an image to be picked from the Media Library. Embed requires a URL. Code accepts any text.
• Save buttons usually live at the bottom of the form. Some themes have a single "Save Footer" button at the bottom of the entire Footer config; others have per-widget Save buttons.

Example: Building a 3-column Footer

A common scenario: Column 1 = About paragraph, Column 2 = video embed, Column 3 = image-link tile.

1. Open Theme Editor → Footer → Columns.
2. Column 1 → pick Paragraph → fill Heading + Body → Save.
3. Column 2 → pick Embed (Video) → paste the video URL → Save.
4. Column 3 → pick Code → paste a small HTML block with three linked images → Save.
5. Click Save Footer to commit all three to the public site.

Each column uses a different widget type — no CSS, no theme edits required for Columns 1 and 2. Column 3 uses a Code widget because a single slot can only hold one widget (stacking multiple images requires a small HTML block).

Known limitations

• Switching widget types discards prior content. A Paragraph's heading and body don't carry over when you switch to Image.
• One widget per slot. A Footer column holds one widget. To show multiple bits of content (e.g., 3 images stacked), use a Code widget with HTML.
• Limited widget types. Four total: Paragraph, Image, Code, Embed. No "List", "Gallery", "Form" widget at the slot level. Plan your layout to fit these four.
• No drag-and-drop reordering. A widget in Column 1 stays in Column 1. To move it, copy values manually to Column 2's widget slot.
• Validation is minimal. Saving an empty Paragraph is allowed. Saving an Embed with a malformed URL renders a broken embed. Test on the public site after saving.
• Form swap is in-place but not undoable. If you accidentally switch type, the previous content is gone. Backup before switching if you've typed a lot.
• Save behavior varies by theme. Some themes need both per-widget save and parent surface save. Others batch. Check your theme's behavior or save twice to be safe.

Next steps

• Browse the widget library — the picker that lists all available widget types.
• Edit your site footer — full Footer end-to-end configuration.
• Manage the Media Library — upload images before referencing them in Image widgets.
• Add a Custom Code snippet — for site-wide scripts (different surface from the Code widget).