QUICK VIEW

Updated 1 month ago

This section controls how your product looks inside the quick view popup.

Product card

Product card settings let you style every part of the quick view card so it matches your app design.

Image attributes

Adjust the image radius to round the corners and use image scale to control how the image fits inside the frame.

Image border

Set the border color and width for a defined or subtle outline.

Title

Change the font, size or weight, line height, letter spacing, text color, alignment, and capitalization for the product title.

Vendor

Customize the vendor text with full control over font, size or weight, line height, letter spacing, text color, and capitalization.

Price

Adjust how the price appears by changing its font, size or weight, line height, letter spacing, text color, and capitalization.

Compare price

Style the compare price the same way by editing the font, size or weight, line height, letter spacing, text color, and capitalization.

View details

Edit the style of the View details text using font, size or weight, line height, letter spacing, text color, and capitalization.

Background

Choose the background color of the quick view card and adjust the radius and padding for cleaner spacing.

Border

Customize the card border by selecting the color, width, and sides you want to apply.

Product Variants

Display settings

Choose how your variants are shown by selecting either the radio button style or the dropdown style.

Label style

Customize the label text by adjusting the font, size or weight, line height, letter spacing, text color, and capitalization.

Variants

Set the text style for each variant option. You can edit the font, size or weight, line height, letter spacing, and capitalization.

You can also define different colors for each state: active, inactive, and unavailable.

Background

Choose the selected and unselected background colors for your variants. Adjust the radius and padding for smoother spacing.

Border

Set border styles for selected and unselected states by choosing the color and width.

Action button

This section lets you fine tune how the main action button appears in different states.

Text style

Control the overall text styling by adjusting the font, size or weight, line height, letter spacing, alignment, and capitalization.

Default state

Set how the button looks under normal conditions. You can edit the text, text color, background color, and border color.

You can also add left and right icons by choosing from the icon list or uploading your own, along with selecting their colors.

Sold out state

Customize how the button appears when a product is out of stock. Adjust the text, text color, background color, and border color, and manage the left and right icons the same way as in the default state.

Advance settings

Shape and spacing can be refined by adjusting the radius, padding, and relation (either side by side or spaced apart). You can also set the border width here.