Product Widget: Design
3 min read
Use the options below to design the perfect product widget.
Backgrounds & Borders
- Background opacity & color: Click the color box to select a background color. Drag the slider to change the opacity.
- Border width (px) & color: Click the color box to select a border color for the product widget and drag the slider to change the border width.
- Divider width (px) & color: Click the color box to select the color of the divider line and drag the slider to change the divider line width. (Available for some layouts)
- Divider length (px): Drag the slider to change the length of the divider line between the name and price. (Available for some layouts)
Text
Select a text color and click the Text icon 
to select a font for the following:
to select a font for the following: - Product name
- Product price
- Price breakdown (e.g. $2.50/ oz.)
- Out of stock message
Button
- Button style: Click to select a button style.
- Fill color & opacity: Click the color box to select a button background color. Drag the slider change the opacity.
- Border width (px) & color: Click the color box to select the button's border color and drag the slider to change the border width.
- Corner radius (px): Drag the slider to change the corner radius of the button (the larger the radius, the rounder the button).
- Button size: Drag the slider to change the button size.
- Text font & color: Click the color box to select a text color and click the Text icon to select a font for the button.
Hover
Decide how the product widget changes when customers moves a mouse over it:
- Nothing: The widget does not change.
- Overlay: A color overlay appears on hover.
- Click the color box to select an overlay color. Drag the slider change the opacity.
- (Optional) Click the color box to select the border color and drag the slider to change the border width.
- (Optional) Click the Hover zoom toggle:
- Enabled: When customer's mouse hovers over image, it is zoomed in on.
- Disabled: When customer's mouse hovers over image, there is no zoom.
- Zoom: Image is zoomed in on when hovered over.
- (Optional) Click the color box to select an overlay color. Drag the slider change the opacity.
- (Optional) Click the color box to select the border color and drag the slider to change the border width.
- Hover zoom toggle: Make sure toggle is enabled to keep zoom.
- Border: A border appears around product info when hovered over.
- (Optional) Click the color box to select an overlay color. Drag the slider change the opacity.
- Click the color box to select the border color and drag the slider to change the border width.
- (Optional) Click the Hover zoom toggle:
- Enabled: When customer's mouse hovers over image, it is zoomed in on.
- Disabled: When customer's mouse hovers over image, there is no zoom.
Ribbon
Set the design of ribbons. To learn how to add ribbons to products, click here.
- Fill color & opacity: Click the color box to select a ribbon color. Drag the slider change the ribbon opacity.
- Text color: Select a text color for the ribbon.
Did this help?
|
