Skip to main content
Sign in

Search

Flight Control Help Center

Widget Usage Guide: Clinch - Product Carousel Single View

  • Updated

General

The Clinch - Product Carousel: Single View widget enables the addition of an interactive product carousel with customizable dimensions, layout, navigation options, and other attributes. This widget is best used with a multi-product feed. Read more about how to access The Widget Editor. 

Important: The JavaScript for this widget is centrally hosted by Clinch. If you'd like to customize the JavaScript, you may create your own widget by copying/duplicating the code directly in your widget or hosting the new .js file in your account asset library and revising the .js script location.

Usage Guide Sections

This usage guide provides Widget Editor UI references for the widget's following sections:

Widget Editor UI

Section: Product Details

Attributes Type, Default Value Purpose
Image/Details Layout SELECT, default NORMAL

Determines the display order.

NORMAL: image then details (order: 0 for image, 1 for details)

REVERSE: details then image (orders swapped)
Image/Details Orientation SELECT, default HORIZONTAL

Chooses the flex‐axis for product display.

HORIZONTAL: flex-direction: row

VERTICAL: flex-direction: column
Details Padding (px) NUMBER, default 0 Inner padding (in px) around the details container.
Details Visible BOOLEAN, default Yes Toggles the visibility of the title/description/price block.
  • Yes
  • No
Details Alignment SELECT, default flex-start Aligns details within the product container: 
  • top/left (flex-start)
  • center
  • bottom/right (flex-end)
Constrain Details BOOLEAN, default No When vertical and true, constrains details to the same width as the image.
  • Yes
  • No
Sale Price Orientation SELECT, default HORIZONTAL

Lays out original and sale prices:

HORIZONTAL: side by side

VERTICAL: stacked
Price Alignment SELECT, default Left

Alignment of the price container. Contains both the original and sale price.

  • Left
  • Center
  • Right

Section: Navigation

Attributes Type, Default Value Purpose
Control Type SELECT, default BOTH

Selects which controls to show:

  • ARROWS
  • DOTS
  • NONE
  • BOTH
Color COLOR, default #4588c7 Base color for dots and arrow borders.
Rollover Color COLOR, default #224a6f Hover color for dots and arrows.
Dot Size (px) NUMBER, default 8 Diameter of inactive pagination dots.
Selected Dot Size (px) NUMBER, default 14 Diameter of the active pagination dot.
Arrow Direction SELECT, default HORIZONTAL

Overall orientation of arrows and slide animations:

  • HORIZONTAL
  • VERTICAL
Arrow Width (px) NUMBER, default 15 Base horizontal dimension for arrows (doubled internally for CSS‐drawn arrows).
Arrow Height (px) NUMBER, default 15 Base vertical dimension for arrows.
Arrow Padding (px) NUMBER, default 6 Padding around the arrow click area.
Arrow Rollover Scale (%) NUMBER, default 125 Scale factor on hover (e.g. 125 → 1.25×).
Use Image For Arrows SELECT, default No

Selects the option for using an image rather than a shape for navigation arrows.

  • Yes
  • No
Arrow Image IMAGE, default a Clinch‐hosted PNG Source URL implemented with clinchSdk.getDynImgUrl for automatic optimization of the image.

Section: Animation

Attributes Type, Default Value Purpose
Auto Animate BOOLEAN, default Yes

Whether to start an automatic rotation when there’s more than one product.

  • Yes
  • No
Auto Animate Delay (ms) NUMBER, default 2000 Delay between auto‐rotation steps (in ms).
Animation Type SELECT, default SLIDE

Available Transition Styles:

FADE: crossfade opacity

SLIDE: move elements in/out along the carousel axis
Animation Time (ms) NUMBER, default 500 Duration of the transition (in ms).
Carousel Timeout (ms) NUMBER, default 14500 Time before halting auto‐rotate and snapping back to the first product (in ms).

Section: Product Image

Attributes Type, Default Value Purpose
Container Width (px) NUMBER, default 125 Width of the image container.
Container Height (px) NUMBER, default 125 Height of the image container.
Image Fit SELECT, default 2

Defines how the image is optimized within the product image container.

  • 1 = Crop
  • 2 = Fit

(Passed to clinchSdk.getDynImgUrl)
Scale (%) NUMBER, default 80 Scale of the loaded <img> relative to its container.
Background Color COLOR, default #f5c215 Background color behind the product image.
Transparent Background BOOLEAN, default No

If Yes, the background is transparent instead of the background color.

  • Yes
  • No
Border Width (px) NUMBER, default 4 Border thickness around the image container.
Border Radius (px) NUMBER, default 65 Number of degrees for the corner radius of the product image container.
Border Color COLOR, default #eb1d25 Border color for the product image container.
Source IMAGE, default a Clinch‐hosted PNG

Source URL implemented with clinchSdk.getDynImgUrl for automatic optimization of the image. 

Optionally, the image can be mapped to a parameter, and then the parameter can have its dynamic source set to a feed label.
Image Label TEXT, default null

Defines the feed label/column that the product image is pulled from. This can be changed to an alternate label for all products in the carousel.

Use case: Removing white background from a column of images. 

This has to always be the technical name used for a label in the account taxonomy.

Maps to: custom. {description label value here]

Section: Product Title

Attributes Type, Default Value Purpose
Font FONT, default "" Object with { family, weight, italic } to set the title’s font.
Font Size (px) NUMBER, default 12 Font size of the title text.
Text Align SELECT, default left

Text alignment of the product title:

  • Left
  • Center
  • Right
Color COLOR, default #000000 Color of the title text.
Margin Bottom (px) NUMBER, default 4 Margin below the title.
Order (number) NUMBER, default 0 Flex order of the title in the details column.
Max Lines NUMBER, default 2 Maximum lines before truncation.
CSS Override TEXT, default //

Custom CSS rules (semicolon‐separated) applied to the title.

Example CSS:

  • letter-spacing: 2px
  • text-decoration: underline;
  • text-underline-offset: 4px;
  • text-shadow: 2px 2px 2px black;
Title Label TEXT, default null

Defines the feed label/column that the product title/name is pulled from. By default, the code will point to the value of "title." If you wish to change the assigned value, it requires the technical name used for a label in the account taxonomy.

Depending on the type of label used, the mapping will change. Values should be entered as seen below:

Custom Label:custom.{description lavel value here]

  • Label Example:custom.custom4

Non-Custom Label:{description lavel value here]

  • Label Example:
    • title
    • catName (=Category)
    • brand
    • currency
    • score
    • review.stars

Section: Product Description

Attributes Type, Default Value Purpose
Font FONT, default "" Object with { family, weight, italic } to set the description’s font.
Font Size (px) NUMBER, default 10 Size of the description text.
Text Align SELECT, default left

Text alignment of the description:

  • Left
  • Center
  • Right
Color COLOR, default #000000 Color of the description text.
Margin Bottom (px) NUMBER, default 4 Margin below the description.
Order (number) NUMBER, default 1 Flex order of the description.
Max Lines NUMBER, default 3 Maximum lines before the description are truncated with a "..." at the end of the text.
CSS Override

TEXT, default display:none;

 Custom CSS rules for the description element.
Description Label TEXT, default null

Defines the feed label/column that the product description/details is pulled from. This has to always be the technical name used for a label in the account taxonomy.

Depending on the type of label used, the mapping will change. Values should be entered as seen below:

Custom Label:custom.{description lavel value here]

  • Label Example:custom.custom4

Non-Custom Label:{description lavel value here]

  • Label Example:
    • catName (=Category)
    • brand
    • currency
    • score
    • review.stars

Section: Product Price

Attributes Type, Default Value Purpose
Font FONT, default "" Object with { family, weight, italic } to set the font for the sale price.
Font Size (px) NUMBER, default 14 Size of the sale price text.
Color COLOR, default #3eb44a Color of the sale price.
Margin Bottom (px) NUMBER, default 0 Margin below the sale price.
Alignment SELECT, default Left

Alignment of the price container:

  • Left
  • Center
  • Right
Price Format SELECT, default NORMAL

Defines how the sale price is formatted:

NORMAL: standard

OPTICAL: superscript cents
Display Zero Cents BOOLEAN, default Yes

Displays ".00" (normal format) or "00" (optical format) when cents are zero. 

  • Yes
  • No
Order (number) NUMBER, default 2 Flex order for the sale price in the details.
CSS Override TEXT, default //

Custom CSS rules for the sale price element.

Example CSS:

  • letter-spacing: 2px

Section: Product Original Price

Attributes Type, Default Value Purpose
Show Original Price BOOLEAN, default Yes

If false, it will hide the "compare at" price entirely.

  • Yes
  • No
Font FONT, default "" Object with { family, weight, italic } to set the font for original price.
Font Size (px) NUMBER, default 12 Size of the original price text.
Color COLOR, default #cccccc Color of the original price text.
Margin Bottom (px) NUMBER, default 0 Space below the original price.
Price Format SELECT, default NORMAL

Defines how the price is formatted:

NORMAL: standard

OPTICAL: superscript cents
Display Zero Cents BOOLEAN, default Yes

Show ".00" when cents are zero.

  • Yes
  • No
Strikethrough Width (px) NUMBER, default 2 Thickness of the strikethrough line.
Strikethrough Color COLOR, default #cccccc Color of the strikethrough.
Strikethrough Angle (deg) NUMBER, default 0 Number of degrees for the rotation of the strikethrough line of the original price.
CSS Override TEXT, default //

Custom CSS for the original price container.

Example CSS:

  • letter-spacing: 2px
  • text-shadow: 2px 2px 2px grey;

Section: TESTING

Attributes Type, Default Value Purpose
Show Layout Boundaries BOOLEAN, default No When enabled, it applies colored backgrounds to every major element for layout debugging.
  • Yes
  • No