A theme is a layout or design the Brikl platform applies to your content.
Why is setting a theme important?
How do I change my theme?
Design Studio
Fonts
Colors
Buttons
Product cards
Collection pages
Menus
Why is setting a theme important?
Themes are sometimes referred to as "skins": templates that are interchangeable and affect website elements such as fonts, buttons, product cards, product pages, collection pages, and our Design Studio.
Set a theme for the same reasons you upload your brand colors and logos or use inspirational imagery across your store: it all reminds your customers who they're shopping with, what your brand identity is, and even what your values are.
Increase relevancy and excitement across your MicroStores by changing your themes to reflect seasons or upcoming events.
How do I change my theme?
Your online store uses a default theme (Brikl default) to lay out content. You can choose a different theme or contact Brikl to develop a custom theme, but either way, you will need to edit the theme's default sections using the theme editor
Go to your dashboard sidebar and find 'Themes' near the bottom. Select your store > Click on the 'Edit' icon and access all your customization features in the Theme Editor.
You can set up multiple themes. Each theme can be assigned to a storefront.
After editing your theme, follow these steps to publish your theme changes and see them applied to your storefront and MicroStores:
- Make sure your theme is being used for a storefront—visit Sales Channel > Storefronts > (Select storefront) > Content to check.
- Deploy your storefront.
Design Studio
Menu background color
Menu hover color
Panel background color
Menu border color
- Placement
- Height
- Menu Item Style
The menu background color, the menu hover color, and the menu border color only apply to the icon style, not to the text style.
- Buttons
- Color Design Step
When you apply a new style to the color design step, reload the browser page to see the changes made in the preview panel on the right.
Choose the font for your menu here.
%201.png?width=688&name=font%20(rem%20unit)%201.png)
H1: 2.5rem, H2: 2rem, H3: 1.75rem, H4: 1.5rem, H5: 1.25rem
Absolute versus relative units
PX: Pixels (px) are considered absolute units, although they are relative to the DPI and resolution of the viewing device. But on a device, the PX unit is fixed and does not change based on any other element.
Using PX can be problematic for responsive sites, but they are useful for maintaining consistent sizing for some elements. If you have elements that should not be resized, using PX is a good choice.
Unlike PX, relative units like % REM are better suited to responsive design and also help meet accessibility standards. Relative units scale better on different devices because they can scale up and down according to another element’s size.
Read more here.
Make sure to enter pixel with the suffix "px", e.g., 14px or enter relative units with the suffix "rem", e.g., 2rem.
You can select from different default fonts or upload your font.
Colors
And the color of your menu text here.
⚠️ The main color option defines what the default color for buttons across all stores looks like. The main color of the button can be overridden in the Buttons setting tab.
The page background color will change the background color of the product page, cart page, checkout page, and Design Studio.
- Heading font color
- Body font color
Buttons
Want to customize your call to action (CTA)? Do it here.
- Recommended default settings
- Padding: 0.75rem
-
Hover Background Color - #ffffff (white)
-
Hover Text Color - #000000 (black)
It is important to set the padding for buttons. The default padding is zero.
Product cards
Make your product cards more attractive.
- Recommended default settings
- Images
Show Product Image - Toggle on
-
Image Positioning
Object Fit - Contain
Horizontal Position - Center
Vertical Position - Center
-
Title
Show title - Toggle on
Align - Center
-
Price
Show price - Toggle on
Show currency symbol - Toggle on
Show currency in front of price:
EUR/ THB - No; USD/ CAD/ AUD/ GBP - Yes
-
Button
Show button - Toggle on
Button label: BUY NOW
Custom product button label: DESIGN NOW
-
Hover Background Color - #ffffff (white)
-
Hover Text Color - #000000 (black)
- Images
Product pages
Define the look and feel of your product pages to incentivize conversion by enhancing your customer's buying experience.
- Recommended default settings
- Thumbnail Placement - Below
- Add to cart
Hover Background Color - #ffffff (white)
Hover Text Color - #000000 (black)
- Recommended products: 3
Collection cards
Define the look and feel of your collection cards.
- Recommended default settings
-
Images
Show collection image - Toggle on
-
Title
Show title - Toggle on
-
Link
Show link - Toggle on
-
Collection pages
Define the look and feel of your collection pages.
-
Recommended default settings
-
Banner Image
Style - Stacked
Show images - Toggle on
Max width - Full width
Max height - 50vh
-
Banner Image Position
Object Fit - Cover **for MOBILE should be CONTAIN
Horizontal Position - Left
Vertical Position - Center
-
Title
Font size - 2.5rem
Align - Left
-
Description
Align - Left
-
Menus
- Recommended default settings:
- Submenu
Vertical submenu - Toggle on
Second level menu background color - #ffffff (white)
- Submenu