Design Controls
Style
The “Style” controls allow you to customize the overall appearance of the product info. Adjust the width, manage the visibility of the heading, and fine-tune separator details to best suit your design preferences.
- Width: Define how wide you want the product info element to be on the page.
- Hide Heading: Use this toggle if you prefer not to display the heading of the product info.
- Separators: Customize the color of the separators between product details. Note: This control is only available if “Hide Separators” is not activated.
- Hide Separators: Toggle this to hide the separators between product details.
Typography
The “Typography” settings focus on the text elements within the product info. You can tweak the fonts, sizes, and styles for the heading, attribute titles, and attribute values.
- Heading: Dive into detailed typography settings for the main product info heading.
- Attribute Title: Adjust the typography for the title of each product attribute.
- Attribute Value: Modify the typography for the values of each product attribute.
Spacing
Spacing controls provide precision in positioning your product info. Adjust margins to position the product info container and manage the space between elements for a cleaner look.
- Container: Define the space around the product info container.
- Margin Top: Increase or decrease the space at the top of the product info container.
- Margin Bottom: Adjust the space at the bottom of the product info container.
- After Heading: Control the space that appears right after the heading. Note: This control is only available if “Hide Heading” is not activated.
- After Attribute: Manage the space after each product attribute for better readability.
- Row: Adjust the space between rows in the product info.
