Smithworks modules: guide for marketers

On blog posts, edit SW Breadcrumbs on the post template (above the hero). On site pages, select the module in the page editor. Set Trail mode (e.g. URL path (website) for FAQ hub URLs with Path root /faqs), Home label, and spacing, then publish.

On themes updated around 2026.05.20 (2026.05.20.23.15), set a Section heading in SW FAQs Simple and keep Output FAQPage Schema on. The JSON-LD now includes that heading as the FAQ page name, which matches what visitors see and clears the unnamed label in many testers. Republish the page after the theme update.

Yes, on the blog automatic trail (default Auto or Blog (automatic)), when Emit BreadcrumbList schema is on. The JSON-LD matches the visible Home → blog → post trail. It does not add a second BlogPosting block—HubSpot still supplies that. Use Google’s Rich Results Test on a published post if you want to verify.

This was fixed in theme update 2026.05.09.10.59. Previously, alignment positioned the whole heading block (works for short single-line headings) but did not set text-align on the heading itself, so once the text wrapped to two or more lines the wrapped lines reverted to the theme default left. The module now sets text-align on the heading directly so wrapped lines on Center / Right headings align as chosen at all breakpoints. The Mobile override (Override Text Alignment (Mobile)) covers everything ≤767px—including very small phones (XS). When an override is OFF, the next-larger breakpoint cascades down. If your page still looks wrong, hard-refresh the published page so the new theme CSS loads.

The theme controls padding on the outer drag-and-drop content shell (not inside each module). Updated Smithworks themes remove stray side padding there so rows and modules line up with your layout. If you notice a change after publishing a theme, refresh the live page; you typically do not fix this inside individual modules.

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. SW Text and Media shows optional headings first, then foreground image or video (or none), then your paragraph, then optional Buttons you add. It adds foreground video (YouTube/Vimeo embed, HubSpot video, or file—not only a background video) and a Media mode so you can hide media entirely. 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 the module. When Content → Media mode = Video, expand Foreground Video and use Show video controls for HubSpot Video or Video from files. For a full-module background video, set Style → Module Background Settings → Background Option = Video, then use Show video controls in that same card. External embeds (YouTube/Vimeo) still use the provider’s own player chrome. New modules default to controls visible; turn the toggle off if you want no bar.

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 → List Setting → keep Disable text balancing on (the default). That tells the module to use normal wrapping for long bullet lines when Bullet list font size is set to a heading or display size. Turn it off only if you want the shorter, evenly balanced lines the theme uses for headings.

Open SW Pillar Section → Style → Module background → Module Outer Background Options (including Gradient with multiple color stops or Divider for the built-in split). Use Style → Module Settings → Max Module Outer Width and Max Module Width so the two-column content stays visually contained while the outer treatment can read wider. If you also want a framed look, set Module Outer Border Style and then the matching weight/color fields for top and bottom borders. Use a page section when several modules should share one background or one width wrapper for the whole group.

Open SW Pillar Section → Style → Module background. Module Outer Background Options and related fields are at the top of that group; the outer border controls now sit at the end of the Module Outer field block. Right after that, Module Inner Background Options starts the inner pillar layer, and the inner border controls are at the bottom of the same group. Module Settings includes Module Outer Spacing, Max Module Outer Width, and Module Inner Spacing. If you used Module Outer before the update, re-open the module and confirm outer choices.

Yes. Open SW Pillar Section → Style → Module background. For the outer band, use Module Outer Border Style; when it is not None, set Module Outer Border Weight (px) and Module Outer Border Color. The outer band can render a top border, bottom border, or both via Module Outer Border Position. For the inner pillar layer, turn Override Module Inner Border on first—then choose Module Inner Border Style and set weight and color when the style is not None. With the override off, the module does not draw an inner border line (use outer borders or inner background fills for separation instead).

HubSpot section settings do not cover every layered look. Module Outer adds a full-width band behind the narrower inner bar so you can stack backgrounds—for example a semi-transparent image in the outer band over a section color, or section color + a wider outer color + a narrower inner bar for depth. Configure it under Style → Module background (outer fields at the top). For field-level detail, use SW AI Documentation → SW CTA Simple Bar.

Yes. Open SW CTA Simple Bar → Style → Module background. For the outer band, choose Module Outer Border Style; when it is not None, set Module Outer Border Position, Module Outer Border Weight (px), and Module Outer Border Color. Farther down in the same group, the inner layer has Override Module Inner Border plus matching style, weight, color, and radius fields. New CTA bars default to a subtle inner border: solid, 1px, #eeeeee at 100%, with a 3px radius. Turn the override off when you do not want the module to emit its own inner border or radius. The outer and inner background-option dropdowns use simple labels like Theme Color, Custom Color, and Image.

Yes. When the bar stacks, the icon column centers the icon above the message for a balanced strip. On large screens (about 992px and wider), the icon aligns to the start of its column beside the copy and buttons.

Use SW FAQs Simple when the page has a real visible FAQ section and you want a clean list of questions and answers. It can output optional FAQPage schema from the same visible rows. Use the inline repeater for one-off page FAQs; use HubDB when rows should be reused or updated centrally.

Turn it on only when the same questions and answers are visibly shown in the module. Do not mark up hidden, removed, or materially different answers. FAQPage is correct for an FAQ section; QAPage is for user-submitted answers to one question.

Set FAQ Source to HubDB. For page-specific rows, use Association Mode = Match Current Page Path and store root-relative paths in the HubDB page_paths column (multiple paths separated by |). For a reusable set, use Association Mode = Group Key and match the module group key to the HubDB rows.

That is the current output in HubDB mode. In recent updates, the related-post list changed from comma-separated links to a dot separator (·) so multi-link rows are easier to scan while keeping the same linked post behavior.

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.

Open SW Testimonials → Content → Read more labels → set Enable read more to off. The module then always shows the full rich-text quote for each row.

SW Testimonials is built for a vertical list of quotes with optional author photos and read-more behavior. SW Cards is a grid or slider of tiles you design (icons, images, buttons per card). If you need multiple CTAs or a card layout, use Cards; if you want a classic quote stack, use Testimonials.

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

Blog Cards = main blog index, tag listing views, or a website page pulling posts. Author archives (/blog/author/[slug]) use the listing template’s built-in author layout (bio + post list), not Blog Cards. Related Posts = only on single post templates for “read next” style rows.

• Blog listing index (and tag pages when Show on Blog Tag page is on): SW Blog Listing Hero
• Author archive (/blog/author/[slug]): built into SW Blog Listing template (sw-blog_author — bio + post list; no listing hero)
• Single blog post: SW Blog Post Hero
• Website or landing pages: SW Simple Hero

On recent themes (around 2026.04.29), when you use image-style heroes with a background image, the main photo may render as a real image layer with responsive sizes so it can paint sooner. Your Cover vs Contain choices in Style still apply. You do not need to change your content; publish when your developer updates the theme.

Yes. In themes updated around 2026.05.05, SW Simple Hero now outputs alt text on the LCP hero image from your configured background image fields (XL first, then Desktop/Tablet/Mobile fallback). If your report still shows a warning, republish the page after your developer updates the module and confirm each hero image field has meaningful alt text.

Yes. On themes updated around 2026.05.20, SW Header Simple measures the sticky header height and reserves space at the top of the page before the main content paints, which greatly reduces that jump. No new fields—publish when your developer updates the theme.

Yes. On themes updated around 2026.04.29, SW Header Simple batches spacing updates when the header is sticky and when the drawer height is measured, so resize and opening or closing the menu should feel steadier. Publish when your developer updates the theme.

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.

At the bottom of the Style tab (after Headings accent line), Mobile scroll once can play a one-time horizontal nudge on phones—either a short peek or a scroll to the last plan column—so visitors notice the table scrolls sideways. Mobile scroll edge fade adds a subtle right-edge gradient when content overflows (you can use it with or without the one-time scroll). The module skips motion when the visitor prefers reduced motion, cancels after they scroll, and only runs when the table is on screen. If your page was saved on an older version, re-open and save the module so the new controls reflect your intent. More detail: SW Feature List — Mobile & horizontal scroll.

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.

Open Style → Cards Layout → Icon Settings. Use Media section background to pick a color and raise opacity above 0% (the default is off so existing modules stay unchanged). Use Media section padding if you want extra space inside that band around the icon, image, SVG, or video. For one card only, open Content → Cards → that card → turn on Override media section background. If Icon type is No Icon, a short decorative strip still appears when the color has opacity—useful for empty-state bars.

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.

Module Outer Spacing and Module Inner Spacing (under Style → Module Settings) control padding around the full hero band and the content column—the same outer/inner pattern as other Smithworks modules. Text Box Side Spacing (under Text Box Settings) applies only when Banner Image as Background is selected: it moves the overlay text box left or right at each breakpoint. It is intentionally separate so you can nudge the white/transparent box without changing the whole hero. Defaults are 0. For field-level detail, see SW AI Documentation → SW Blog Listing Hero.

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.

On current Smithworks themes: if the listing page has its own featured image, that is used. If not, the theme uses the featured image of the first post shown on that listing (so tag or paginated views match what readers see). If there is still no image, set a default under Theme settings → Content → Misc → Featured image. See AI documentation → SW Open Graph.

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 Footer Simple 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.

In SW Footer Simple or SW Footer Simple 02, open the module in Edit global content, go to Content → Copyright Information, and turn Show “Powered by Smithworks” off. Publish global content. The copyright line (© year, company) can still show if Add Copyright Line is on.

SW Footer Simple 02 is a two-row global footer: a taller upper area for logo + menu + tagline + optional buttons, and a lower strip for copyright, simple links, and social icons. Some themes default to 02; others use the single-band SW Footer Simple. In the editor, select the footer module and read its name in the sidebar. For field-level help, use the AI documentation → SW Footer Simple 02 section.

On SW Footer Simple and SW Footer Simple 02, custom icons follow Style → Content Colors → Link Colors unless you turn on Override Colors on each social row and set explicit colors. If icons still look wrong after updating the theme, republish global footer content and hard-refresh the page. Your implementation partner can confirm your theme version matches the latest Smithworks master.

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 Footer Simple 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 Footer Simple 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 Footer Simple. 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.

Not in Theme settings. Your developer sets the organization description in the theme’s portal constants for SW SEO Schema when the theme is rolled out to your site. You still need Marketing → Email → Footer addresses and Brand → Logos → Logo URL. Details: AI doc → SW SEO Schema → Portal constants.

On themes updated around 2026.05.21.15.16, confirm the post’s Meta description is filled in the blog editor and republish. The theme adds SW Blog Posting Schema so JSON-LD includes that text. Details: AI doc → SW Blog Posting Schema.

On themes updated around 2026.05.21.15.16, the main blog index uses a page-level H1 from your blog’s public title; the in-page title module below it uses H2. Publish the theme when your developer ships the update. No action inside individual modules.

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 Header Simple, 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.