Products Slider

The Products Slider Block displays a carousel of related or custom products on the thank you page, allowing customers to browse product recommendations in a space-efficient slider format.

Overview#

Block Name: Products Slider
Category: RedFox Thank You
Purpose: Display a product carousel with navigation controls
Available In: Pro

What It Does#

This block shows:

• A Swiper-based product carousel with smooth transitions
• Product images with sale badges
• Product titles and star ratings
• Product prices
• Add to Cart buttons for quick purchasing
• Navigation arrows and pagination dots
• Autoplay with pause on hover support

Products can be sourced from various criteria including random selection, specific products, categories, tags, or based on the current order.

When to Use#

Use This Block When:

• You have many products to showcase without taking up too much vertical space
• You want an interactive carousel experience for customers
• Displaying a large number of product recommendations
• Adding visual motion and engagement to the thank you page

Use Products Grid Instead When:

• You want all products visible at once without scrolling
• You prefer a static grid layout
• Displaying a small number of products (4 or fewer)

Use Products Slider (Theme) Instead When:

• You want the slider with theme-native product card styling
• Maintaining visual consistency with the rest of your store

Block Settings#

Display Options#

Control which product information is shown:

• Show Title: Toggle to display or hide the section title (default: on)
• Show Image: Toggle to display product images (default: on)
• Show Product Title: Toggle to display product names (default: on)
• Show Price: Toggle to display product prices (default: on)
• Show Rating: Toggle to display star ratings (default: on)
• Show Add to Cart: Toggle to display the Add to Cart button (default: on)

Products Settings#

Control which products are displayed:

• Product Source: Choose how products are selected
  • Random — Randomly selected products
  • Selected — Manually pick specific products
  • Category — Products from specific categories
  • Order Category — Products from the same categories as the ordered items
  • Tag — Products with specific tags
  • Order Tag — Products with the same tags as the ordered items
  • Order Category or Tag — Products matching either the order’s categories or tags
• Number of Products: Set how many products to display (1–20, default: 4)
• Select Products: Choose specific products (visible when source is “Selected”)
• Select Categories: Choose product categories (visible when source is “Category”)
• Select Tags: Choose product tags (visible when source is “Tag”)
• Order Products By: Sort products by Date, Popularity, Price (Low to High), Price (High to Low), Rating, Title, or Random

Slider Settings#

Control the carousel behavior:

• Slides Per View: Number of product cards visible at once (1–6, default: 4). Configurable per breakpoint (Desktop, Tablet, Mobile).
• Space Between (px): Gap between slides in pixels (0–100, default: 20). Configurable per breakpoint.
• Autoplay: Toggle automatic slide advancement
• Autoplay Speed (ms): Time between slide transitions (1000–10000ms, step: 500ms). Only visible when autoplay is enabled.
• Pause on Hover: Toggle to pause autoplay when hovering over the slider. Only visible when autoplay is enabled.
• Show Arrows: Toggle navigation arrow buttons (default: on)
• Show Dots: Toggle pagination dots below the slider (default: on)
• Infinite Loop: Toggle continuous looping of slides

Style Settings#

All style controls are found in the Styles tab of the block inspector panel.

Sale Badge#

Customize the sale badge appearance on product images:

• Position: Choose badge placement on the image
• Horizontal Gap: Distance from the horizontal edge
• Vertical Gap: Distance from the vertical edge
• Background Color: Badge background color
• Text Color: Badge text color
• Font Family: Choose from Google Fonts
• Font Weight: Light (300) to Extra Bold (800)
• Font Size: Adjust badge text size
• Line Height: Adjust badge text line height
• Padding: Internal spacing within the badge
• Border Radius: Round the badge corners

Responsive Support: Supported.

Title Text#

Control the section title styling:

• Font Family (Google Fonts) — Access to 1,000+ Google Fonts
• Font Weight — Light (300) to Extra Bold (800)
• Text Color — Set distinct color for the title
• Font Size — Adjust title size for better hierarchy
• Line Height — Control spacing for title text
• Letter Spacing — Fine-tune spacing between characters (-10 to 10)
• Word Spacing — Adjust spacing between words (-10 to 50)
• Font Style — Italic, Underline, Strikethrough
• Text Transform — Uppercase, Lowercase, Capitalize, or None
• Text Alignment — Left, Center, or Right

Responsive Support: Supported.

Note: Only visible when the title is enabled in Title Settings.

Product Title#

Control the product name text styling:

• Font Family (Google Fonts), Font Weight, Text Color, Font Size, Line Height, Letter Spacing, Word Spacing, Font Style, Text Transform, Text Alignment

Responsive Support: Supported.

Product Price#

Control the product price text styling:

• Font Family (Google Fonts), Font Weight, Text Color, Font Size, Line Height, Letter Spacing, Word Spacing, Font Style, Text Transform, Text Alignment

Responsive Support: Supported.

Add to Cart#

Style the Add to Cart button:

Background:

• Background Color — Button background color
• Gradient Background — Gradient background for the button

Text:

• Text Color — Button text color
• Font Family (Google Fonts), Font Weight, Font Size, Line Height, Letter Spacing, Word Spacing, Font Style, Text Transform, Text Alignment

Spacing:

• Padding — Internal spacing within the button
• Margin — External spacing around the button

Border:

• Border — Border width, style, color, individual sides
• Border Radius — Round corners individually or all at once

Box Shadow:

• Shadow Color, Horizontal Offset, Vertical Offset, Blur, Spread, Inset

Responsive Support: Supported.

Navigation Arrows#

Customize the slider navigation arrows:

• Background Color — Arrow button background
• Text Color — Arrow icon color
• Hover Background Color — Background on hover
• Hover Text Color — Icon color on hover
• Size — Arrow button dimensions
• Border Radius — Round the arrow buttons

Responsive Support: Supported.

Note: Only visible when Show Arrows is enabled in Slider Settings.

Pagination Dots#

Customize the slider pagination dots:

• Background Color — Inactive dot color
• Active Background Color — Active/current dot color
• Size — Dot dimensions
• Gap — Spacing between dots
• Border Radius — Round the dots

Responsive Support: Supported.

Note: Only visible when Show Dots is enabled in Slider Settings.

Product Card#

Customize the individual product card appearance:

• Gaps — Space between the product image, button and content
• Background — Card background color
• Spacing — Padding and margin around the card
• Border — Border width, style, color, individual sides, and border radius
• Box Shadow — Color, horizontal/vertical offset, blur, spread, and inset toggle

Responsive Support: Supported.

Product Image#

Customize the product image appearance:

• Spacing — Padding and margin around the image
• Border — Border width, style, color, individual sides, and border radius

Responsive Support: Supported.

Background#

Customize the block background:

• Background Color — Color picker with custom hex values
• Background Image — Upload or select from media library with size, position, repeat, and attachment options
• Background Gradient — Linear and radial gradients with presets
• Background Overlay — Color or gradient overlay with blend modes

Responsive Support: Supported.

Spacing#

Control block spacing:

• Padding: Internal space (inside the block) — Top, Right, Bottom, Left
• Margin: External space (around the block) — Top, Right, Bottom, Left

Features: Linked/unlinked sides, presets, box model visualization, auto values.

Units: px, em, rem, %

Responsive Support: Supported.

Sizing#

Control block dimensions with precision.

• Width / Height
• Min Width / Min Height
• Max Width / Max Height

Units: px, em, rem, %, vw, vh

Responsive Support: Supported.

Border#

Add and customize borders.

• Border Width — Set width in pixels or other units
• Border Style — Solid, Dashed, Dotted, and more
• Border Color — Full color picker
• Individual Sides — Set borders per side or all at once
• Border Radius — Round corners individually or all at once

Responsive Support: Supported.

Box Shadow#

Add depth and dimension.

• Color — Shadow color with full color picker
• Horizontal Offset — Range: -100 to 100 (default: 0px)
• Vertical Offset — Range: -100 to 100 (default: 2px)
• Blur — Range: 0 to 200 (default: 4px)
• Spread — Range: -100 to 100 (default: 0px)
• Inset — Toggle for inner shadow

Set a shadow color to get started — sensible defaults are applied automatically.

Responsive Support: Supported.

Comparison with Related Blocks#