How to create a theme for your stores

A theme is a layout or design the Brikl platform applies to your content.

Skip to...

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.

1-Jul-06-2022-06-18-26-80-AM

After editing your theme, follow these steps to publish your theme changes and see them applied to your storefront and MicroStores:

  1. Make sure your theme is being used for a storefront—visit Sales Channel > Storefronts > (Select storefront) > Content to check.
  2. Deploy your storefront.

Design Studio

Menu background color 
Menu background color
Menu hover color
Menu Hover Color
Panel background color
Panel background color
Menu border 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
    Round Swatch

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.

Print Design Step
Fonts

Choose the font for your menu here. 

font (rem unit) 1

Recommended default settings
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.

Heading Color

⚠️ 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. 

Screen Shot 2565-09-02 at 19.09.49

The main color changes the color of the buttons in the Design Studio, cart page, and checkout page.
Button Color in Studio

The page background color will change the background color of the product page, cart page, checkout page, and Design Studio.

Font size in Product page
  • Heading font color
  • Body font color 

Buttons

Want to customize your call to action (CTA)? Do it here. 

Button Color_Customization

  • 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.

Product card

  • 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) 

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.

Collection page

  • 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

Menu

  • Recommended default settings:
    • Submenu

      Vertical submenu - Toggle on

      Second level menu background color - #ffffff (white)