How to set brand styling
Brand styling can be set via the "Branding" page. Here, the styling settings below can all be adjusted to match your store's theme styling.
Buttons
Inputs
Variant layouts
Variant name
Variant pills
Fonts
Buttons
Unicorn has the option to set both a 'primary' and 'secondary' styled button. When you're building your cart blocks, there will then be option to select which styling of button to use. E.g. Primary button for 'checkout', Secondary button for 'cross sells'
Click on either the 'Primary' or 'Secondary' tab buttons to switch between the settings.
You can also set up hover states for buttons in this section.
Buttons
Allows for the styling of text inputs and select inputs used throughout the app.
Variant Layout
This sets the layout of the product variant selectors with the following options:
Grid - is fixed in the number of selectors per row and responds in a fixed manor to screen size changes. Selectors will appear evenly distributed and consistent in width. Great for small consistent selectors eg: S / M / L / XL
Flex - Selectors will fill the space with no fixed number of selectors per row. The width of each selector with match the content of the selector. Selectors will span across multiple rows and will change responsively to different screen size. Great for inconsistent selectors eg: Sit / Consectetur / Amet / Pellentesque
Variant Name
Allows for the variant name (label) used throughout the app to be styled
Variant Option
Allows for the variant option (selector) used throughout the app to be styled
Fonts
As a default, Unicorn is set to use the body font from your theme.
Unicorn will only reference fonts and will never load in any additional fonts of its own, as this will degrade performance.
You can select your Heading and Body font from the dropdown list:
If you use a custom fount not found in the dropdown (Advanced only)
Please contact support if you need help so this can be activated.
As every theme is different, it is advised to reach out to your theme developers to find out what fonts have been referenced in your theme css.
If you are more technical, the font references can usually be found by right clicking on your website, clicking 'inspect elements', selecting the 'body' tag. Then in the 'Styles' tab, scroll down to the :root declaration to find the following values.
--font-heading-family
--font-body-family
