Frequently Asked Questions - SW Sprocket Rocket Modules

Smithworks SW Modules are Smithworks-built HubSpot modules designed for Sprocket Rocket-style themes. They help marketing and content teams build pages with reusable, documented modules instead of starting from scratch or relying only on custom code.

The module set includes options for heroes, side-by-side sections, stacked media blocks, cards, product-style cards, feature tables, forms, blog layouts, popups, headers, footers, testimonials, quizzes, section dividers, and theme-related pieces.

Check the name shown for the module in the HubSpot page editor. A name that starts with SR usually identifies a Sprocket Rocket module, so use the Sprocket Rocket documentation. A name that starts with SW identifies a Smithworks module; use the Smithworks FAQs or SW module documentation. Confirming the name first keeps you from following instructions for a different set of fields.

Yes, when the field uses HubSpot's rich-text editor. Use the rich-text toolbar to add a link, bold text, or emphasis instead of pasting HTML code. Plain-text fields, including many headings, titles, and button labels, accept text only. If the toolbar is not available, treat the field as plain text.

Open the module's Style tab, then look under Module Settings for spacing controls. Module Outer Spacing changes the space around the full module band, while Module Inner Spacing changes the space around the content inside that band. Exact options vary by module, so check the SW module documentation when you need the path for a specific module. Preview the page at desktop and mobile sizes before publishing.

A helper class is a small, named style in the theme’s custom stylesheet. You add that name in the module editor, on the item’s CSS Class field or on the module’s Custom Classes field. The class changes only what its rule describes. Every other setting on the module stays in effect.

Use module settings first. Consider a helper class when the module has no field for the treatment, or the field exists but cannot change at a phone size. A helper class is also useful when the same treatment should be reused on many modules without pasting a one-off color or size into each one. Do not add a helper class for spacing, alignment, background, or a button style the module already has.

A label above a heading. The heading repeater can set a size and a color. It cannot say “this label is 28px on a desktop and 20px on a phone, in a gray that is not a theme color.” Put a class on that heading item. The class sets the desktop size, the phone size, and the light-surface color. On a dark background, leave the heading color on Auto so the label stays light.

Padding that should change on a phone only. Module outer spacing is one padding for every screen. Sometimes the band should run to the left and right edges on a phone, while the content inside stays inset. There is no separate mobile value for just those two sides. Put a class on the module. The rule removes the outer left and right padding under the phone breakpoint and leaves the desktop padding alone.

To add one, write the class in the theme stylesheet, with a short comment that says what it does and which breakpoint it uses. Then type that exact class name into the CSS Class or Custom Classes field. Check the page on desktop and on a phone. If a module setting can do the same job, use the setting and do not add the class.

1. Open Theme Settings, then find the typography settings for the text role you are using, such as Lead Paragraph.
2. If Responsive typography is enabled, lower Minimum Font Size to adjust smaller screens.
3. Maximum Font Size controls the large-screen end of the responsive range, so it is not the first fix for a mobile-only problem.
4. Preview the page at several mobile widths before publishing.

See the SW module documentation if your theme presents the typography controls differently.

First confirm what you changed, because pages, global content, and theme settings have different publishing steps. Work through this sequence:

1. Open the live page URL rather than relying on an editor preview.
2. If you changed page content, publish or update that page.
3. If you changed a global header, footer, or section, publish the global content to the affected pages.
4. If you changed theme settings, publish those settings and confirm the live page uses that theme.
5. Verify that your account has permission to publish the change.
6. Clear the browser cache or check the live page in a private browser window.

HubSpot documents how to publish global content and publish theme settings. If the correct content or settings are published and the live page still does not change, contact support with the page URL and a description of what you edited.

Use SW Pillar Section when the layout needs content in two columns, such as an image on the left and text on the right. The module is meant for side-by-side sections and stacks on mobile.

If the media should sit above the text in a simple stacked layout, use SW Text and Media for new content or SW Image & Text when working with an existing page that already uses it.

SW Pillar Section is a strong choice when you need a structured side-by-side layout. It can place image, video, content, or a form beside the main copy and is useful for service sections, product stories, lead generation beside proof, and alternating left-right sections.

It also supports a Module Outer style option when one instance needs a wide background treatment such as a gradient, image band, or diagonal divider while keeping the inner columns narrower.

To make the SW Pillar Section image fill the whole media column, open the module and use the Image as Background option for the secondary image column. This switches the image from a normal inline image to a full-bleed background inside the media column on tablet and desktop.

The module also includes background position controls so the crop can be adjusted. The same setting may appear under the Style tab when the secondary column is configured as an image.