CSS styling
If you're new to working with CSS, we recommend that you contact us to integrate with your theme.
Abra has many CSS variables and CSS classes you can override to style your online store when a promotion is active.
Global styling
CSS classes
Name | Description |
| A modifier class applied to the body element when Abra is initialized |
| A modifier class applied to the body element when a promotion is active |
| A modifier class applied to the body element when a promotion is applied |
| A modifier class, where |
| A modifier class, where |
Example
Change your background to hearts and your button color to red for a Valentine's Day promotion.
.abra--VALENTINES-10-activated {
background-image: url('https://cdn.shopify.com/hearts.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.abra--VALENTINES-10-activated .btn {
background-color: #d6352b;
color: #ffffff;
}Announcement bar styling
CSS classes
Name | Description |
| The element wrapping the announcement bar |
| The root element |
| The element wrapping the text, and icon if present |
| The element wrapping the SVG for the icon |
| The element wrapping the slide for this content |
| The link element |
| The element used for content |
| A modifier class applied to the root element to show the announcement bar |
CSS variables
Name | Description | Value |
|---|---|---|
| The background of the announcement bar | #000000 |
| The border color of the announcement bar | #000000 |
| The color of the text in the announcement bar | #FFFFFF |
| The font size of the text in the announcement bar | 14px |
| The space between the icon and the text in the announcement bar | 1rem |
| The height of the announcement bar | calculated |
| The color of the icon in the announcement bar | #FFFFFF |
| The size of the icon in the announcement bar | 32px |
| The alignment of the text in the announcement bar | center |
| The horizontal padding inside of the announcement bar | 1rem |
| The vertical padding inside of the announcement bar | 1rem |
| The z-index of the announcement bar | 4 |
Example
Change the announcement bar colors and customize the text styling.
.abra-announcement-bar {
--abra-announcement-bar-background: rgba(246, 246, 247, 1);
--abra-announcement-bar-color: rgba(32, 34, 35, 1);
--abra-announcement-bar-padding-x: 2rem;
--abra-announcement-bar-padding-y: 1.25rem;
}
.abra-announcement-bar__text {
letter-spacing: 0.1rem;
line-height: 1.3;
text-transform: none;
}Banner styling
CSS classes
Name | Description |
| The element wrapping the banner |
| The root element |
| A modifier class applied to the root element to show the banner |
| The element wrapping the text, and icon if present |
| The element wrapping the SVG for the icon |
| The link element |
| The element used for content |
CSS variables
Name | Description | Value |
| The background of the banner | #000000 |
| The border radius of the banner | 0 |
| The color of the text in the banner | #FFFFFF |
| The font size of the text in the banner | 14px |
| The space between the icon and the text in the banner | 1rem |
| The color of the icon in the banner | #FFFFFF |
| The size of the icon in the banner | 32px |
| The alignment of the text in the banner | center |
| The horizontal space around the banner | 1rem |
| The vertical space around the banner | 1rem |
| The horizontal padding inside of the banner | 1rem |
| The vertical padding inside of the banner | 1rem |
Example
Change the colors and the spacing to match your online store and update text styling.
.abra-banner {
--abra-banner-background: rgba(246, 246, 247, 1);
--abra-banner-color: rgba(32, 34, 35, 1);
--abra-banner-padding-x: 2rem;
--abra-banner-padding-y: 1.25rem;
}
.abra-banner__text {
letter-spacing: 0.1rem;
text-transform: uppercase;
}Popup styling
CSS classes
Name | Description |
| The element wrapping the popup |
| The root element |
| A modifier class applied to the root element for placement |
| A modifier class applied to the root element for placement |
| A modifier class applied to the root element for placement |
| A modifier class applied to the root element to show the popup |
| The element wrapping the close button |
| The close button element |
| The element wrapping the text, and icon if present |
| The element wrapping the SVG for the icon |
| The element used for content |
CSS variables
Name | Description | Value |
| The background of the popup | #000000 |
| The size of the close icon | 1.6rem |
| The color of the text in the popup | #FFFFFF |
| The font size of the text in the popup | 14px |
| The space between the text and the close button | 1rem |
| The color of the icon in the popup | #FFFFFF |
| The size of the icon in the popup | 32px |
| The horizontal space around the popup | 1rem |
| The vertical space around the popup | 1rem |
| The horizontal padding inside of the popup | 1rem |
| The vertical padding inside of the popup | 1rem |
| The z-index of the popup | 4 |
Example
Change the colors and the spacing to match your online store and update text styling.
.abra-popup {
--abra-popup-background: rgba(246, 246, 247, 1);
--abra-popup-color: rgba(32, 34, 35, 1);
--abra-popup-gap: 2rem;
--abra-popup-padding-x: 2rem;
--abra-popup-padding-y: 1.25rem;
}
.abra-popup__text {
letter-spacing: 0.1rem;
text-transform: uppercase;
}Price styling
CSS classes
Name | Description |
| The root element |
| A price element |
| A modifier class applied to the original price |
| A modifier class applied to the final price |
CSS variables
Name | Description | Value |
| The font size for both prices | 1rem |
| The space between the original price and final price | 0.6rem |
| The color of the original price | unset |
| The text decoration of the original price | line-through |
| The font size of the original price | 0.9em |
| The color of the final price | #FF0000 |
| The text decoration of the final price | none |
| The font size of the final price | unset |
Example
Change the colors and the spacing to match your online store and update text styling.
.abra-price {
--abra-price-gap: 2rem;
--abra-regular-price-color: rgba(32, 34, 35, 1);
--abra-sale-price-color: #0000ff;
}
.abra-price__item--final {
background-color: red;
border-radius: 50%;
color: black;
letter-spacing: 0.1rem;
padding: 0.6rem 1rem;
}