Smithworks modules: guide for marketers

Use SW Pillar Section. “Image above text only” (stacked) is SW Text and Media for new content, or SW Image & Text on pages that already use it. If the words “left/right,” “two columns,” or “side by side” apply, default to Pillar Section.

Both are single-column stacked layouts (media above your paragraph). SW Text and Media adds foreground video (YouTube/Vimeo embed, HubSpot video, or file—not only a background video), a Media mode so you can hide media entirely, and an optional headings repeater above the body copy. For new sections, use SW Text and Media. SW Image & Text is still fine on pages that already use it; it may be retired in a future theme update.

After theme update 2026.04.06.12.16, foreground and background external embeds follow the module’s Autoplay and Muted toggles. For size, open the embed in the editor and ensure width and height are set (resize the embed so both values are present). In Image mode, the image field’s width helps limit how large the photo displays. Foreground embeds use the same Image alignment as your foreground image.

Open SW Pillar Section → Content → Secondary Column (Image) → turn on Image as Background. That switches the image from a normal photo in the column to a full-bleed background in the media column on tablet and desktop (it covers the whole column; you can nudge crop with the background position fields). The same toggle also appears under Style → Secondary Column (Media) Setting when the secondary column is an image.

Open SW Pillar Section → Style → Module Outer. Pick your Background Option (including Gradient with multiple color stops or Divider for the built-in split) and set Outer background width. Then use Style → Module Settings → Max Module Width so the two-column content stays visually contained while the outer treatment can read wider. Use a page section when several modules should share one background or one width wrapper for the whole group.

SW Pillar Section → set the secondary column to Form. Use SW Form only when the form is alone (maybe with headings above it).

Cooldown only runs when the HubSpot form’s On submission setting is Show thank you message so the inline thank-you appears in the page. If the form redirects (another page, URL, meeting, payment, etc.), the visitor leaves before that inline state shows—the module does not start the timer. Use Show thank you message if you need this feature. Cooldown uses the visitor’s browser localStorage.

Same rules: the form must use Show thank you message (not redirect). The pillar form column uses a different browser storage namespace than standalone SW Form, so timers are not shared between those two module types. Separate cooldown per module instance (default on) keeps each pillar copy’s timer separate on the page.

Open the module → Style → raise Pattern Layer (z-index) so the decorative bar stacks above neighboring content. Confirm Overlap adjacent section matches how you want the pattern to meet the next block. For field names and stacking details, see the AI documentation → SW Section Divider.

SW Gallery Section. One image or one video beside text is SW Pillar Section.

Blog Cards = main blog index, tag/author listing views, or a website page pulling posts. Related Posts = only on single post templates for “read next” style rows.

• Blog listing (index, tags, authors): SW Blog Listing Hero
• Single blog post: SW Blog Post Hero
• Website or landing pages: SW Simple Hero

SW Cards are for content you build (team, services, features). Blog modules pull real posts automatically.

SW Cards = flexible paragraphs per card (rich text) and optional buttons under the entire row. SW Cards Products = structured bullet lines per card and optional two price amounts (with an optional visitor toggle). For simple bullet cards with no pricing, Products is still a good fit—you don’t have to use the pricing toggle.

SW Feature List is for a single comparison table: the same feature names down the left, plans or tiers across the top, and cells for included/not included, icons, short text, or small buttons. SW Cards Products is for separate cards—each plan is its own card with its own bullet list (and optional pricing toggle). If you picture a spreadsheet-style grid, use Feature List; if you picture three tiles side by side, use Cards Products. Field-level detail: SW Feature List in the AI module documentation.

By default, the Override plan title fonts toggles (and the matching ones for subtitle, plan cells, category headings, and feature row labels) are off, so text follows your theme’s body typography and the module’s Font colors setting. Turn an override on only when you want that row’s full font controls in the editor. Use Style → Row Spacing for extra top-and-bottom padding on every row. Use Style → Comparison Table Colors → Row borders for lines under the plan title row (titles and subtitles together), between category/feature rows, and at the bottom—set border weight to 0 or color opacity to 0% to hide a line.

On small screens, the plan columns can scroll horizontally while the first column (feature names and category headings) stays fixed. Use Style → Table Box Settings with a solid Theme Color or Custom Color background when you want transparent corner/category/label colors in Comparison Table Colors to match the box automatically. If the table box is transparent, a gradient, or an image, set those comparison regions to a theme or custom fill that matches your module background. After you change colors, preview at a narrow width (or on a phone) so checks and icons don’t show through the labels. More detail: SW Feature List — Mobile & horizontal scroll in the AI module documentation.

Yes. Open Content → Cards → the card you want to stand out. Turn on Override card background and rich text, then choose that card’s background, text color, and (if needed) Link Colors (Theme Defaults (auto), On Dark Background, On Light Background) so links stay readable on that card’s surface. Other cards keep using the usual Style settings. Default colors for all cards still come from Style → Cards Layout and Content Colors.

For new SW Cards you add to a page, Style → Module Settings → Spacing starts at 50px top and 40px bottom (you can change it anytime). Older modules on your site keep whatever padding was already saved until you edit Spacing.

SW CTA Popup = quickest path, one main variant, corner placement. SW Popup Panel = more positions, more variants, announcement behavior, finer triggers. Neither replaces the other.

SW Pillar Accordion uses one image column that updates when you open each panel. SW Magic Accordion (Smithworks, on supported themes) supports tabs/accordion, optional images per item, forms, and buttons below the tab area. For field-level detail, see smithworks.marketing/sw-module-documentation (SW Magic Accordion section).

1280 × 640 (2:1) is a strong default for post hero, listing cards, and social sharing consistency.

The listing hero often shows post #1 while cards should start at #2. That means Post start on Blog Cards (often 2) and HubSpot’s posts per page must equal cards shown + offset. See the AI documentation’s “Blog Listing Hero + Blog Cards Alignment” for the exact formula.

Turn off infinite scroll first. Slider and infinite scroll don’t run together. You also need more posts than fit in one row for the slider to engage.

No—on the native blog listing page, infinite scroll on Blog Cards is not used. Use it on website/landing pages that pull a blog.

Increase posts per page to reduce page count, and/or turn on the Show all posts option in SW Blog Pagination (if your listing uses it) so visitors can open the full archive. Your site may use a dedicated “all posts” view—check with your admin.

Create at least one blog post (draft is fine), then open it in the editor. Post-template modules often aren’t configurable until a post exists.

Most SW modules: Style tab → Module Settings → Spacing. Exact group names can vary slightly—your AI doc lists each module.

HubSpot Video (hosted in HubSpot’s video / Marketing video tools) often needs the right subscription tier. If that option is missing or blocked, check HubSpot’s product docs for your hub.

Video from files uploads into the File Manager. On tiers such as Content Hub Free, HubSpot commonly enforces a per-file size limit (often around 20 MB) plus overall storage limits—so large MP4s may fail until you compress them or use a lower resolution.

External embed (YouTube, Vimeo, etc.) usually only needs a URL and does not count as uploading the video file into HubSpot.

Limits change—confirm the current rules for your portal in HubSpot’s help center.

Open a live page using the theme, click the header or footer, choose Edit global content, make changes, publish global content.

Usually no in plain Heading or Title fields (text only). Use a rich text field (e.g. Content Area) for HTML. When unsure, check the field type in the AI documentation or try a quick test.

Theme Settings → Typography. If Responsive typography is on, adjust Minimum and Maximum for the role in use (e.g. Lead Paragraph for “large” text styles). Publish the theme after changes.

Sprocket Rocket (SR) modules are documented by Sprocket Rocket. Smithworks (SW) modules are what this site and the AI documentation cover. Use the right guide for the prefix you see in the editor.

Current Smithworks themes ship SW Simple Footer with sensible defaults in Style: Module Settings → Spacing starts at 50px top and bottom and 25px left and right, and Module Background Settings starts on Theme color → White so the bar reads cleanly on most sites. Your existing global footer keeps whatever was already saved until you change it.

The quiz builds a custom submit flow via HubSpot’s Forms API. The embed snippet provides the form ID and portal ID the module needs. Your marketing ops or dev partner can grab the embed from HubSpot forms.

Yes. Use the global content editor (not Design Manager): open a live page → click the footer → Edit global content → in the left sidebar open SW Global Site Footer (check Hidden modules if needed). You should see a footer layout with SW Simple Footer already there and a drag-and-drop area (often labeled SW Footer Modules). Use Add / add a row and choose SW CTA Popup or SW Popup Panel. Configure the module, then publish global content. Use Popup Panel if you need multiple variants or positions.

You’re probably editing the SW Simple Footer module itself. Step back: in the left sidebar, select SW Global Site Footer (the global partial) so the canvas shows the whole footer layout. If you don’t see it, open Hidden modules and choose SW Global Site Footer from there. Then you should see the footer drag-and-drop region where you can Add SW Popup Panel or SW CTA Popup alongside SW Simple Footer. You do not need Design Manager for a standard Smithworks theme. Full detail: AI documentation → SW Popup Panel → Site-wide: global footer.

With SW Popup Panel, yes—variants use Label & Body Class; each page needs the matching token on <body>. On a normal website or landing page, set that in the editor: left sidebar Page contents → expand Hidden modules → Body Class (not Settings → Advanced). Blog posts may already get tag-… classes from the template. Detail: AI documentation → Page Body Class.

In the page editor (not Design Manager): open Page contents in the left sidebar → expand Hidden modules → select Body Class and type your class (e.g. for SW Popup Panel matching or cta-popup-hide). This is not under the page Settings gear → Advanced on Smithworks themes. Full steps: AI documentation → Page Body Class field.

Set Logo URL on your default logo in Content → Brand → Logos. Fill Marketing → Email → Footer addresses with company name, full address, and country. Details: AI doc → SW SEO Schema.

That value usually comes from Marketing → Email → Configuration → Footer addresses, not only “Account” company settings. You can also override in the footer module if your theme exposes that field.

Publish the theme. If you edited global header/footer, publish global content too. Hard-refresh the browser (e.g. Shift+reload).

In SW Simple Header, try Menu position → Below header for a full-width menu row, or enable Use mobile menu at larger breakpoints so the hamburger appears sooner. See the AI doc for exact field names.

Some modules include an Enable toggle (e.g. SW Pillar Section). If it’s off, the module outputs nothing but stays in the layout. Check the Content tab first.