Hero Forge Documentation
Forge Series — Complete App Documentation
Overview
Forge Series includes four premium Shopify theme sections designed for cinematic, high-impact storefronts. Each section installs directly through the Shopify Theme Editor — no coding, no app embeds, no technical setup required. They are fully responsive across desktop, tablet, and mobile, support all Shopify Online Store 2.0 themes, and can be added multiple times per page with completely independent settings per instance.
- Marquee Banner — Full-width scrolling announcement bar with animated text, background presets, and overlay effects
- Conveyor Carousel — Auto-scrolling product row pulled from any collection, with advanced heading effects and fully styled product cards
- Product Fan — Curved cinematic product display with 3D card rotation, animated decorative spheres, glow effects, and a View All button
- FilterForge — Complete client-side product filtering system with tag navigation, availability filtering, price range, and animated sale card effects
Section 1: Marquee Banner
What It Does
The Marquee Banner is a full-width horizontally scrolling announcement bar that runs continuously across the entire width of the page. It is designed to broadcast rotating promotional messages, sale callouts, shipping thresholds, seasonal notices, or brand taglines in an infinite seamless loop. The bar never pauses or resets — content is duplicated internally so there is no visible gap or restart point.
Up to five separate messages can be entered. Each message scrolls one after another, separated by a small circular divider. Any message field left blank is automatically skipped — you do not need to fill all five slots. The section is best placed at the very top of your homepage or above the fold on landing pages to maximize visibility.
Messages
Message 1 – Message 5
These five text fields are where you enter the content that will scroll across the banner. Each message is treated as an independent announcement and is separated from the next by a circular divider symbol. Messages scroll in the order they are entered, looping back to Message 1 after Message 5.
How to use: Enter your promotional copy directly into each field. You can use as few as one message or as many as five. Leave any unwanted slots blank — they will not appear on the storefront. Keep messages concise so they read clearly while scrolling. Examples: "Save 10% on orders $70+", "Mix & match to unlock savings", "All orders made to order — ships direct to you".
Accessibility Label
This is a hidden text label read aloud by screen readers to describe the purpose of the banner to users with visual impairments. It does not appear visually on the storefront at any time.
How to use: Enter a short descriptive phrase that summarizes what the banner communicates. The default value is "Store announcements". If your banner is specifically about a sale, update it to something like "Current sale promotions" or "Shipping and discount announcements" so screen reader users understand the context without reading every scrolling message.
Background
Background Preset
This dropdown lets you choose from five pre-designed decorative background images built into the section. Each preset is a stylized graphic background that gives the banner a distinctive visual character without requiring you to upload anything.
Options:
- Marquee Style 1–5 — Five distinct preset backgrounds. Each has its own texture, color palette, and visual style. Preview each one in the Theme Editor by selecting it and watching the banner update live.
- None — No preset is applied. The banner will display the Fallback Background Color instead.
How to use: Select a preset that complements your brand aesthetic. If you upload a Custom Background Image, it will override whichever preset is selected — the preset is ignored when a custom image is present. Set to None if you want a clean solid-color banner.
Custom Background Image
This image upload field lets you replace the preset with any image of your choice as the banner background. The image stretches to fill the full width and height of the banner area.
How to use: Upload a wide image with a minimum recommended width of 2600px to ensure it looks sharp on large desktop displays. The image will be cropped and scaled to fit the banner height you have set. PNG, JPG, and WebP formats are supported. Once an image is uploaded here, it completely overrides any preset selected in the Background Preset dropdown. To return to using a preset, remove the custom image.
Fallback Background Color
This color picker sets the solid background color that appears when no preset is selected and no custom image has been uploaded. It also appears briefly as a flash behind the banner while background images are loading.
How to use: Set this to a color that closely matches the dominant color of your preset or custom image so there is no jarring flash during image load. The default is #121212 (near-black), which works well with most dark-themed presets. If you use a light or colorful background image, update this to a matching tone.
Custom Overlay Image
This is a second image layer that sits on top of the background image but underneath the scrolling text. It is designed for decorative transparency effects using PNG files with transparent areas.
How to use: Upload a PNG file with a transparent background. The overlay will stretch across the entire banner. This is ideal for adding decorative frames, glass-panel effects, vignettes (darkened edges), branded border graphics, or cinematic letterbox bars. Because it renders above the background but below the text, it can add visual depth without obscuring your messages. Leave this field empty if you do not need an overlay effect.
Typography
Text Color
Sets the color of all scrolling message text. This single color applies to every message — there is no per-message color control.
How to use: Choose a color that has strong contrast against your background. For dark presets, white (#FFFFFF) is the default and most readable choice. For light backgrounds, use a dark text color.
Font Family
Opens the Shopify font picker, which gives you access to all fonts hosted by Shopify. This includes Google Fonts and other Shopify-supported typefaces.
How to use: Click the font selector to browse and preview available fonts. The font you choose applies to all messages. Note that not every font weight option (see Font Weight below) is available for every typeface — some fonts only support Regular and Bold. Preview your chosen font in the editor before saving.
Text Size
Controls the font size of the scrolling text. The range is 12px to 40px. Mobile devices automatically display text at approximately 85% of the desktop size setting — you do not need to set a separate mobile font size.
How to use: For standard announcement bars set between 40–100px in height, a text size of 14–18px works well. For taller dramatic banners, increase to 24–36px for impact. Keep in mind that very large text with long messages may cause readability issues at slower scroll speeds.
Font Weight
Sets the thickness of the font used in all messages.
Options:
- Regular (400) — Standard weight. Clean and neutral. Best for informational messages.
- Medium (500) — Slightly heavier than regular. Good for a balanced, semi-prominent look.
- Semibold (600) — Noticeably bold without being heavy. A good default for most announcement bars.
- Bold (700) — Maximum weight. High impact. Best for sale callouts and short punchy messages.
How to use: Note that the availability of each weight depends on the font family you have selected. If a weight is not supported by your chosen font, it will fall back to the nearest available weight.
Text Shadow Color
Sets the color of the drop shadow applied beneath the text. The shadow adds depth and improves legibility on complex or busy background images.
How to use: For dark backgrounds, a pure black (#000000) shadow is standard. For light backgrounds, a dark grey or navy shadow can add depth without being harsh. Set the shadow blur and offsets to zero if you want no shadow effect despite having this color set.
Text Shadow Blur
Controls how soft or sharp the text shadow appears. Range: 0–20px.
- 0px — Hard-edged shadow with no blur. Creates a precise offset duplicate of the text.
- 4–8px — Soft diffused shadow. The most natural-looking depth effect.
- 15–20px — Extremely soft, wide glow-like shadow. Can create a light halo effect around text.
Text Shadow Horizontal
Moves the shadow left or right relative to the text. Range: -10px to +10px. Positive values push the shadow to the right; negative values push it to the left.
How to use: For a natural drop shadow, use a small positive value (2–4px). For a centered glow with no directional bias, keep this at 0 and pair with a high blur value.
Text Shadow Vertical
Moves the shadow up or down relative to the text. Range: -10px to +10px. Positive values push the shadow downward; negative values push it upward.
How to use: For a classic drop shadow, use a small positive value (2–4px) combined with a matching horizontal offset. For symmetrical glow, keep at 0.
Text Border Color
Sets the color of an outline drawn around each letter of the text. This is a CSS text-stroke effect applied uniformly to all characters.
How to use: Use a contrasting color to your text fill to create a visible outline. For example, if your text is white, a black border creates a sharp graphic poster effect. If you do not want any border, set the Text Border Thickness to 0.
Text Border Thickness
Sets how wide the text outline is. Range: 0–10px.
- 0px — No border. Disables the outline entirely regardless of the border color set.
- 1–2px — Subtle outline. Adds legibility without changing the character of the text significantly.
- 3–5px — Bold graphic outline. Creates a strong poster or streetwear-style text effect.
- 6–10px — Very heavy outline. Dramatic and high-contrast. Best with large text sizes and simple fonts.
Layout
Banner Height
Sets the height of the banner on desktop devices. Range: 40px–300px. Default: 100px.
How to use: 40–60px creates a slim, unobtrusive notification bar similar to standard Shopify announcement bars. 80–120px is the standard Marquee Banner size with comfortable text padding. 150–300px creates a dramatic hero-scale banner suitable for large text, custom background images, and overlay effects.
Banner Height (Mobile)
Sets the height of the banner specifically on mobile devices, independently of the desktop setting. Range: 30px–200px.
How to use: Mobile screens are narrower, so a slightly shorter banner is usually appropriate. If your desktop banner is 100px, a mobile height of 60–80px typically works well. For very large desktop banners, reduce mobile height proportionally to avoid the banner taking up too much of the screen on smaller devices.
Vertical Padding
Adds equal spacing to the top and bottom inside the banner, effectively pushing the text toward the vertical center. Range: 0–40px.
How to use: If your text appears too close to the top or bottom edge of the banner, increase vertical padding to center it. This is especially useful when using a banner height near the minimum values where text may clip against the edge.
Motion
Scroll Direction
Sets which way the text scrolls across the banner.
- Left — Text moves from right to left. This is the standard, most familiar direction for Western reading conventions.
- Right — Text moves from left to right. Less common; can be used for stylistic variety or to pair two Marquee Banner instances scrolling in opposite directions for a layered effect.
Scroll Speed
Controls how fast the messages scroll. Range: 8–60 seconds. This value represents the time it takes for the full content to complete one scroll cycle — so a lower number means faster scrolling and a higher number means slower scrolling.
- 8–12 seconds — Fast scroll. High energy. Good for short messages and sale urgency contexts.
- 20–30 seconds — Medium speed. Comfortable reading pace for most announcement bar use cases.
- 40–60 seconds — Slow, elegant scroll. Best for large text, long messages, or when paired with a tall banner for a cinematic effect.
Reduce Motion Support
This is an automatic accessibility feature — it is not a manual toggle. When a visitor's operating system has the Reduce Motion accessibility setting enabled (available on macOS, iOS, Windows, and Android), the Marquee Banner will automatically pause its scrolling animation. The text remains visible but stationary. This ensures the section is accessible to users who experience discomfort or medical symptoms from animated movement. No action is required from you — this is built in and always active.
Section 2: Conveyor Carousel
What It Does
The Conveyor Carousel displays a continuously auto-scrolling horizontal row of product cards pulled from any published Shopify collection. Unlike a standard product grid or paginated slider, the Conveyor scrolls in an infinite seamless loop — products flow past the viewer at a constant pace, creating a living showcase feel that draws the eye without requiring shopper interaction.
Above the product row, an optional heading can be displayed with a full suite of advanced typographic effects: independent font selection, color, outline, drop shadow with directional offset controls, and an animated pulsing glow. The heading can be aligned left, center, or right.
Product cards display the product image, title, and price, all with independently configurable colors and font sizes. Card dimensions, corner radius, background color, and spacing are all controllable. The section supports an independent desktop width setting so you can constrain the carousel to a narrower content column if desired.
Content
Collection
Selects which Shopify collection's products appear in the carousel. Only published collections from your store are available.
How to use: Click the collection picker and search for or browse to the collection you want to display. The carousel will pull products from this collection in the order they appear in the collection. To control which products appear and in what order, manage the collection's sort order and product membership in your Shopify admin under Products > Collections.
Heading
Optional text displayed above the scrolling product row. Leave this field blank to hide the heading entirely and display only the product carousel with no title above it.
How to use: Enter a short, punchy label for the collection being showcased. Examples: "Featured Products", "New Arrivals", "Best Sellers", "On Sale Now". The heading inherits all styling from the Heading Style settings below.
Products
Sets the maximum number of products pulled from the collection and displayed in the carousel loop.
How to use: Higher values create longer scroll loops with more variety before repeating. Lower values create tighter loops. For collections with many products, 12–20 is a good range. The carousel duplicates the product set internally to ensure seamless looping, so even a small number of products will scroll continuously without gaps.
Scroll Speed
Controls how fast the product cards scroll. Follows the same logic as the Marquee Banner — lower values scroll faster, higher values scroll slower.
How to use: A speed of 20 creates a moderate, comfortable scroll pace that lets shoppers glance at products as they pass. Faster speeds (8–12) create a high-energy feel. Slower speeds (40+) give the carousel an elegant, editorial pacing. Match the speed to the mood of the section and the length of product titles — longer titles need slower scroll speeds to remain readable.
Heading Style
Heading Font
Selects the typeface for the section heading using the Shopify font picker. This is independent of the font used in the product cards or in other sections.
Alignment
Sets the horizontal alignment of the heading text relative to the section.
- Left — Heading aligns to the left edge of the section. Editorial, asymmetric feel.
- Center — Heading is centered above the carousel. Classic, balanced look.
- Right — Heading aligns to the right edge. Unusual and distinctive; use intentionally for a design-forward layout.
Heading Size
Controls the font size of the heading in pixels. Adjust to match the visual hierarchy of the page — the heading should be prominent enough to read clearly but not overpower the product cards below it.
Heading Weight
Sets the font weight of the heading. Options: Regular (400), Medium (500), Semibold (600), Bold (700). Availability depends on the selected font family.
Heading Color
Sets the fill color of the heading text. This is the primary visible text color.
Outline Color
Sets the color of a CSS text-stroke outline drawn around each letter of the heading.
How to use: Works the same as the Text Border Color in the Marquee Banner. Choose a color that contrasts with the heading fill color for a visible outline effect. Pair with a 0 Outline Thickness to disable.
Outline Thickness
Sets the width of the text outline in pixels. Set to 0 to disable the outline entirely. Higher values create more prominent graphic outlines.
Shadow Controls
Four settings that together control the drop shadow applied to the heading text:
- Shadow Color — The color of the shadow. Default is typically black.
- Shadow Horizontal Offset — Moves the shadow left (negative) or right (positive).
- Shadow Vertical Offset — Moves the shadow up (negative) or down (positive).
- Shadow Blur — Controls the softness of the shadow edge. 0 = hard edge, higher values = diffused glow-like shadow.
How to use: For a standard drop shadow, set horizontal and vertical offsets to 3px each with a blur of 6–8px. For a centered ambient glow, set both offsets to 0 and increase the blur to 15–20px. The shadow color and blur together can simulate a colored glow effect on the heading.
Glow Color
Sets the color of an animated pulsing glow effect applied to the heading. This creates a subtle breathing light effect around the text.
How to use: Choose a color that complements or contrasts your heading color for maximum visual impact. Neon tones (cyan, magenta, gold) work well on dark backgrounds. Set Glow Size to 0 to disable the glow entirely.
Glow Size
Sets the maximum radius of the glow animation in pixels. Larger values create a wider, more dramatic glow. Set to 0 to disable the glow.
Glow Speed
Controls how fast the glow pulses. Lower values pulse faster; higher values pulse more slowly and subtly. Adjust to taste — a very fast glow can feel urgent or aggressive; a slow glow feels ambient and cinematic.
Heading Spacing
Sets the gap in pixels between the bottom of the heading and the top of the product card row. Increase this to give the heading breathing room above the carousel. Decrease it to tighten the layout.
Card Style
Card Width
Sets the width of each product card on desktop in pixels. This directly controls how many cards are visible at once in the carousel. Wider cards show fewer products at a time; narrower cards show more simultaneously.
Mobile Card Width
Sets the card width specifically on mobile devices, independently of the desktop setting. Mobile cards are typically narrower to fit smaller screen widths while still showing at least one or two cards at a time.
Card Gap
Sets the spacing in pixels between adjacent product cards in the scrolling row. Increase for a more spaced-out, airy feel. Decrease for a denser, tighter presentation.
Card Radius
Sets the corner rounding of each product card in pixels. 0 = perfectly square corners. Higher values create rounded or pill-shaped card corners. Match this to your overall theme's corner radius style for visual consistency.
Background
Sets the background color of the entire section — the area behind and around the product cards and heading. This is the section-level background, not the card-level background.
Card Background
Sets the background color of each individual product card. This is the fill color behind the product image, title, and price within each card.
Product Title Color
Sets the text color of the product name displayed on each card.
Price Color
Sets the text color of the product price displayed on each card. You can differentiate this from the product title color to create visual hierarchy — for example, a muted grey for the price against a bright white product name.
Product Title Size
Sets the font size of the product name text on each card in pixels.
Price Size
Sets the font size of the product price text on each card in pixels. Typically set slightly smaller than the product title size to establish hierarchy.
Layout
Desktop Width
Controls the overall width of the carousel section as a percentage of the page width. Range: 50%–100%.
- 100% — The carousel spans the full page width edge to edge. Most impactful presentation.
- 75–85% — Centered, contained carousel that sits within a content column. Works well on pages with sidebars or structured layouts.
- 50% — Half-width carousel. Useful for pairing two Conveyor sections side by side in a two-column layout.
Vertical Padding
Adds equal spacing above and below the entire section. Increase to give the section breathing room between adjacent sections on the page.
Accessibility Label
A screen-reader-only label describing the carousel to assistive technology users. Not visible on the storefront. Update this to describe what the carousel contains, for example "Featured snowboard collection" or "New arrivals carousel".
Section 3: Product Fan
What It Does
The Product Fan is the most visually distinctive section in the Forge Series. It displays products in a curved, cinematic fan arrangement — cards arc outward from a central point in a sweeping spread, rendered with full 3D perspective rotation. Each card lifts and highlights on hover. A row of decorative animated spheres scrolls above the fan, and the section heading supports animated glow effects identical to the Conveyor Carousel heading system. A configurable "View All" button at the bottom links shoppers to any collection or page URL.
The fan shape is entirely adjustable. The number of segments (cards displayed), the total arc angle, card dimensions, 3D rotation depth, focal perspective, and gap between segments are all controlled independently. This allows the fan to range from a shallow, subtle arc of a few cards to a dramatic wide-angle cinematic spread across the full viewport.
Content
Heading
Optional text label displayed above the sphere row and product fan. Leave blank to hide. Inherits all styling from the Heading Style settings below.
Max Cards to Show
Determines how many product cards are displayed in the fan at once. This is separate from Segment Count (which controls the arc geometry) — Max Cards controls how many products from the collection are pulled and displayed. A minimum of 6 products is recommended for the fan to look its best, as very few cards create a sparse or unbalanced arc.
Product Collection
Selects the Shopify collection from which fan products are pulled. If left empty, the section may default to showing all store products. Connect a specific curated collection for the most controlled result.
Heading Style
The Heading Style settings for Product Fan are identical in function to those in Conveyor Carousel. They include:
- Heading Font — Shopify font picker for the heading typeface
- Heading Size — Font size in pixels
- Heading Weight — Regular / Medium / Semibold / Bold
- Heading Color — Fill color of the heading text
- Outline Color — CSS text-stroke outline color
- Outline Thickness — Width of the outline; set to 0 to disable
- Shadow Color — Drop shadow color
- Shadow Horizontal — Left/right shadow offset
- Shadow Vertical — Up/down shadow offset
- Shadow Blur — Shadow softness
- Glow Color — Animated pulsing glow color around the heading
- Glow Size — Maximum glow radius; set to 0 to disable
- Glow Speed — Speed of the glow pulse animation
Refer to the Conveyor Carousel Heading Style section above for detailed usage guidance on each of these settings — they behave identically here.
Bar Style
Bar Style
Selects a decorative visual treatment applied in the background area directly behind the section heading. Different bar styles provide different graphical effects — textures, gradients, light streaks, or other visual elements — that frame and accentuate the heading without overlapping the product cards or spheres below.
How to use: Browse the available styles in the dropdown and preview each one live in the editor. The "Spheres" style renders the decorative sphere row as the primary visual element beneath the heading, which is the default cinematic look for this section.
Sphere Settings
The sphere row is a horizontal strip of animated decorative spheres that scrolls across the section above the product fan. Each sphere is a glossy, lit 3D ball with an internal glow animation. The sphere strip adds cinematic depth and visual interest to the section header area.
Color 1 – Color 4
Sets the base colors for the four sphere types that repeat across the row. Each sphere renders as a 3D ball using its assigned color as the primary hue, with internal lighting and glow derived from the same color.
How to use: Choose colors that complement your brand palette. For a premium dark-luxury aesthetic, deep jewel tones (midnight blue, gold, charcoal, burgundy) or neon accents (cyan, magenta) work well. All four colors cycle through the sphere row in sequence.
Scroll Speed
Controls the speed at which the sphere row scrolls horizontally. Lower values scroll faster; higher values scroll more slowly. Set to match the visual pacing of the section — a slower scroll gives a more ambient, atmospheric feel.
Transparency
Sets the opacity of the spheres. A value of 100% makes spheres fully opaque. Reducing transparency allows the background color or image to show through the spheres, creating a ghosted or semi-transparent layered effect.
Drive Brightness (Glow Brightness)
Controls the intensity of the internal lighting simulation within each sphere. Higher values make each sphere appear brighter and more luminous, as if lit from within. Lower values create a duller, more matte appearance.
Dimensions
Sets the size of each sphere in pixels. Larger spheres are more prominent and take up more of the strip height. Smaller spheres create a denser, more delicate row of orbs.
Speed (Internal Animation Speed)
Controls the speed of the internal animation within each sphere — the shimmer or light-rotation effect that makes them appear to glow and breathe. This is separate from the Scroll Speed, which controls horizontal movement. Higher internal animation speed creates a faster shimmer; lower values create a slow, meditative pulse.
Segment Settings
The Segment Settings control the geometry and layout of the fan arc itself. These settings define the shape, size, and spacing of the curved product display.
Segment Count (Desktop)
Sets how many product segments (card slots) are rendered in the fan arc on desktop. This controls the width of the fan spread — more segments create a wider arc with more cards visible simultaneously. If the number of segments exceeds the number of products in the collection, slots will repeat from the beginning of the collection.
Segment Height (Desktop)
Sets the height of the arc segments in pixels on desktop. This affects the visible height of the fan's curved base beneath the product cards.
Segment Gap (Desktop)
Sets the spacing between adjacent segments in the arc on desktop. Larger gaps spread the cards further apart along the arc; smaller gaps pack them more tightly together.
Segment Count (Mobile)
Same as the desktop segment count but applied on mobile devices. Typically set lower than desktop to avoid overcrowding on narrow screens — 3–5 segments is usually optimal on mobile.
Segment Height (Mobile)
Same as the desktop segment height but applied on mobile devices.
Segment Gap (Mobile)
Same as the desktop segment gap but applied on mobile devices.
Segment Radius
Controls the radius of the arc curve in pixels. A larger radius creates a shallower, more subtle curve. A smaller radius creates a tighter, more dramatic arc. This is the primary control for the overall shape of the fan.
Segment Angle
Sets the total angular spread of the fan in degrees. A larger angle spreads the cards across a wider arc; a smaller angle compresses them into a narrow cluster. Combine with Segment Radius to achieve the exact arc shape you want.
Segment Gap Gradient
When enabled, this creates a tapered spacing effect — the gaps between segments increase progressively from the center of the fan outward. The center cards are closer together and the outer cards spread apart, mimicking the natural perspective of a physical hand of cards fanned out. Set to 0 to apply uniform spacing across all segments.
Segment Animation
Segment Color
Sets the color of the decorative edge or border of each segment slot in the arc. This color is visible along the curved baseline of the fan beneath the product cards.
Segment Glow Color
Sets the glow color that emanates from the segment edges. This creates an ambient light effect along the arc baseline, reinforcing the cinematic quality of the fan.
Light Mode
Controls the style of the light animation along the segment edges. The "Sequential" mode lights segments one after another in sequence, creating a running light effect around the arc.
Light Speed (Pulse Speed)
Controls how fast the sequential light animation runs along the arc segments. Lower values are faster; higher values are slower and more subtle.
Pulse Width (Desktop)
Sets the width of the light pulse that travels along the arc on desktop. A wider pulse creates a broader band of light; a narrower pulse creates a sharp, precise running dot of light.
Pulse Width (Mobile)
Same as Pulse Width but applied on mobile devices.
Light Opacity
Sets the transparency of the light animation. At 100%, the pulse is fully visible. Lower values make it more subtle and ambient, integrating it as a background detail rather than a foreground effect.
Card Controls
Card Width
Sets the width of each product card in pixels. This controls how large each card appears within its segment slot.
Card Height (% of Width)
Sets the height of each product card as a percentage of its width. At 100%, cards are perfectly square. At 150%, cards are portrait-oriented rectangles. Adjust based on your product image aspect ratio for the most visually consistent result.
Rotation Depth
Controls the intensity of the 3D perspective rotation applied to cards as they spread across the arc. A higher depth creates a more dramatic 3D curvature where outer cards appear to tilt strongly away from the viewer. A lower depth creates a flatter, more subtle 3D effect.
Rotation Start
Sets the starting rotation angle of the first card in the fan. Adjust to shift the overall tilt of the entire fan arc, effectively rotating the starting orientation of the leftmost card.
Rotation Following
Controls how much each successive card rotates relative to the previous one. A higher value creates a more dramatic step-wise rotation progression from left to right across the fan.
Focal
Sets the perspective focal depth of the 3D rendering. This affects how pronounced the vanishing point of the 3D effect appears. A shorter focal length creates a more exaggerated, fish-eye-like perspective. A longer focal length creates a flatter, more telephoto-like perspective.
Section Height
Sets the overall height of the Product Fan section in pixels. This determines how much vertical space the fan occupies on the page. Increase if card overflow is being clipped.
Distance from Heading (Hover Lift)
Sets how far each card lifts upward on hover in pixels. When a shopper hovers over a card, it elevates by this amount to indicate interactivity. A value of 20–30px creates a noticeable but elegant lift. Higher values create a more dramatic pop-out effect.
Card Background
Sets the background color of each product card.
Card Color (Card Text Color)
Sets the color of the product name text displayed on each card.
Price Color
Sets the color of the product price text on each card.
Button Background
Sets the background color of the "Shop Now" or CTA button that appears on each product card.
Button Text
Sets the text color of the CTA button label on each card.
Mobile Card Scale
Scales the product cards on mobile as a percentage of their desktop size. At 100%, cards are the same size as on desktop. Lower values reduce card size proportionally to fit mobile viewports. Typically set to 45–60% for optimal mobile display.
View All Button
View All Link URL
The destination URL that the View All button links to. Paste any internal or external URL here. This is typically the URL of the collection page that the fan is pulling products from, so shoppers can browse the full collection after seeing the fan preview.
How to use: Copy the URL of your collection page from your browser address bar (e.g. https://your-store.myshopify.com/collections/all) and paste it into this field. You can also link to a curated landing page, a sale page, or any other relevant destination.
View All Button Text
The label text displayed on the button. Customize this to match the action you want shoppers to take.
Examples: "View All", "Shop the Collection", "See Everything", "Shop Now", "Browse All Products".
Section 4: FilterForge
What It Does
FilterForge is a complete client-side filtering and product display system built directly into the theme section — no separate app, no storefront search integration, and no page reloads required. It renders a product grid from a connected collection alongside a fully styled filter control bar. Shoppers can filter products by custom category tags, secondary sub-tags within each category, product availability, Shopify product type, and price range. All filtering is instantaneous.
The filter bar can be positioned horizontally above the product grid or as a persistent left sidebar. The product grid is fully configurable across desktop, tablet, and mobile column counts. Sale products are automatically detected and can be visually distinguished with an animated glow or border effect and a distinct sale card color scheme.
Filter Position
Filter Position
Sets where the filter controls appear relative to the product grid.
- Horizontal (Top) — The filter bar displays as a horizontal row of buttons and controls above the product grid. This is the most space-efficient layout and works well for sections with a small number of filter categories. The full grid width is available for products.
- Sidebar — The filter controls appear as a persistent vertical panel on the left side of the section, with the product grid occupying the remaining space to the right. This layout is better for sections with many filter categories or sub-tags, as more vertical space is available for filter options.
Sidebar Width
Sets the width of the sidebar filter panel in pixels when Sidebar mode is selected. Adjust this to give the filter panel enough room to display your category labels and controls without truncating. This setting has no effect when Filter Position is set to Horizontal (Top).
Grid
Desktop Columns
Sets the number of product card columns displayed on desktop screens.
- 2 columns — Large cards. Best for products where image detail is important, such as art prints, apparel, or photography.
- 3 columns — Balanced grid. The most common and versatile option for most product types.
- 4 columns — Dense grid with smaller cards. Best for stores with many SKUs where shoppers need to browse a large catalog efficiently.
Tablet Columns
Sets the number of columns on tablet-sized screens (typically 768px–1024px wide).
- 2 columns — Comfortable spacing on tablet.
- 3 columns — Tighter but functional on larger tablets.
Mobile Columns
Sets the number of columns on mobile screens.
- 1 column — Single-column stack. Maximum card size on mobile. Best for products that benefit from large image display.
- 2 columns — Two-column grid on mobile. Shows more products at once but with smaller cards. Better for dense catalogs.
Card Gap
Sets the spacing between product cards in the grid in pixels. Increase for a more spacious, editorial feel. Decrease for a denser, catalog-style presentation.
Image Aspect Ratio
Controls the height of each product image relative to its width, expressed as a percentage.
- 100% — Square images. Clean and consistent regardless of source image shape.
- Below 100% — Landscape (wider than tall). Good for products photographed horizontally.
- Above 100% — Portrait (taller than wide). Good for apparel, posters, or products with vertical images.
How to use: Set this to match the predominant shape of your product photography for the most consistent grid appearance.
Image Fit
Controls how product images are fitted within their card image area.
- Cover — The image fills the entire card image area, cropping any parts that extend beyond the frame. Consistent card sizes; some image edges may be hidden.
- Contain — The entire image is visible within the card image area, with no cropping. Letterboxing (blank space) may appear around images that don't match the aspect ratio. Use when showing the full product image is critical.
Colors
Section Background
Sets the background color of the entire FilterForge section — the area behind both the filter bar and the product grid.
Section Text
Sets the default text color for the section. This applies to any text not covered by more specific color settings.
Filter Background
Sets the background color of the filter control bar (horizontal bar or sidebar panel). Style this to match or contrast your section background to make the filter controls visually distinct.
Filter Text
Sets the text color of the filter control labels and button text within the filter bar.
Filter Border
Sets the border color of filter control elements such as input fields, dropdown borders, and button outlines within the filter bar.
Card Background
Sets the background color of each product card in the grid.
Card Text
Sets the text color of product information (name, price) displayed on each card.
Fonts
Filter Font
Sets the typeface used for all text within the filter controls — category labels, sub-tag buttons, availability toggles, and price range inputs. Uses the Shopify font picker.
Card Font
Sets the typeface used for text inside each product card — product name and price. Uses the Shopify font picker. This can be set independently of the filter font for typographic hierarchy.
Sale Cards
FilterForge automatically detects products that have a compare-at price set in Shopify (indicating they are on sale) and can apply distinct visual styling to those cards to draw shopper attention.
Sale Card Background
Sets the background color of the sale badge or highlight element on sale product cards.
Sale Card Text
Sets the text color of the sale indicator on sale product cards.
Sale Effect
Selects the animated visual effect applied to sale product cards.
- None — No animated effect. Sale cards are distinguished only by the sale badge color, if set.
- Other effect options — Animated glow, border pulse, or shimmer effects that draw the eye to discounted products. Preview each option in the Theme Editor to select the style that fits your brand.
Effect Color
Sets the primary color of the sale effect animation. For glow effects, this is the primary glow color. For border animations, this is the primary border color.
Effect Second Color
Sets the secondary color used in the sale effect animation. Some effects blend between two colors for a gradient or alternating effect.
Border Width
Sets the thickness of the animated border applied to sale cards in pixels. Applies to border-style sale effects. Set to 0 if the selected effect does not use a border.
Glow Min
Sets the minimum intensity of the glow animation on sale cards. The glow pulses between this minimum value and the Glow Max value, creating a breathing light effect. A higher minimum means the glow is always at least partially visible.
Glow Max
Sets the maximum intensity of the glow animation at its peak. The difference between Glow Min and Glow Max determines the visible contrast of the glow pulse — a large difference creates a dramatic pulse, a small difference creates a subtle shimmer.
Glow Spread
Sets how far the glow extends outward from the edges of the sale card in pixels. A larger spread creates a wide ambient halo around the card; a smaller spread keeps the glow tight to the card border.
Effect Speed
Controls how fast the sale card animation cycles. Lower values are faster and more urgent-feeling; higher values are slower and more ambient.
Category Tags
FilterForge supports up to five custom filter category groups. Each category group has a primary tag (which maps to a Shopify product tag) and optional secondary sub-tags for more granular filtering within that category. Customers see the category labels and sub-tag labels — the actual Shopify tag strings are used internally for filtering logic.
Category Tag (1–5)
The exact Shopify product tag string used to identify products belonging to this category. This must match your product tag exactly — including capitalization and spacing — for the filter to work correctly.
How to use: Go to your Shopify admin, open a product, and copy an exact tag from the Tags field. Paste it here. For example, if your products are tagged "color", enter color here. If they are tagged "Color" with a capital C, enter Color.
Category Label (1–5)
The display name shown to customers for this filter category in the filter bar. This is the customer-facing label and can be any text you choose — it does not need to match the tag string.
Example: Tag = color, Label = Color. Tag = size-cat, Label = Size.
Category Sub-tags (1–5)
A comma-separated list of Shopify product tag strings that represent the individual filter options within this category. Each sub-tag must exactly match a product tag in your store.
Example: For a Color category, enter red, blue, green, black, white. Each value must match a real product tag. Spaces after commas are acceptable.
Category Sub-labels (1–5)
A comma-separated list of display names corresponding to each sub-tag, in the same order. These are the labels customers see in the filter UI when a category is expanded.
Example: Sub-tags = red, blue, green, Sub-labels = Red, Ocean Blue, Forest Green. The first sub-label corresponds to the first sub-tag, the second to the second, and so on. The number of sub-labels must match the number of sub-tags.
Storefront Filter Controls
These are the built-in filter controls that appear in the filter bar alongside your custom category tags. Each control can be shown or hidden.
All Categories
Displays a button or control in the filter bar that shows all configured category group buttons simultaneously, allowing shoppers to pick any category to filter by.
All Sub-tags
Displays the sub-tag filter options for whichever category the shopper has selected. When a shopper clicks a category, the sub-tags for that category appear as additional filter buttons.
Availability
Displays an availability filter control with three options for shoppers to choose from:
- All Products — Shows all products regardless of stock status.
- In Stock — Shows only products that have available inventory.
- Out of Stock — Shows only products with zero inventory. Useful for pre-order or waitlist contexts.
Product Type
Displays a filter control that lets shoppers filter by the Shopify Product Type field assigned to products. This uses the native Shopify Product Type — set the Product Type on each product in your Shopify admin under the product's Organization section.
Price Range (Min / Max)
Displays minimum and maximum price input fields that let shoppers filter the product grid to only show products within a specified price range. Shoppers enter a number in each field. Either field can be left blank to filter with only a minimum or only a maximum price.
Per Page
Sets the number of products displayed in the grid before pagination controls appear. Higher values show more products at once (requiring more scrolling); lower values create paginated browsing. Adjust based on your catalog size and the desired browsing experience.
General Notes
- All four sections install through the Shopify Theme Editor — no app embeds or code editing required
- Multiple instances of the same section can be added to any page, each with fully independent settings
- Compatible with all Shopify Online Store 2.0 themes
- Preset background images load from the theme asset folder via Shopify's CDN for fast delivery
- All sections are fully responsive and optimized for desktop, tablet, and mobile devices
- Reduce Motion accessibility support is built into the Marquee Banner automatically