Sign in Subscribe

Edit your Oode storefront appearance

Last updated on 

The human brain can process visual information 60,000 times faster than it can process text. This makes visual appeal a very important element in marketing.

If you want to appeal to your customers online, you have to take the time to make your storefront presentable and enticing.

Treat your Oode storefront like your digital shop. To edit your storefront appearance, simply go to Appearance under Storefront on your left panel.


Under the Appearance tab you can make changes to your storefront layout, presets (or themes), header, background, colour, typography, border radius, and footer.

Keep in mind that as you make changes to your storefront appearance, you can track the progress through the preview page to the right of your screen. You can also switch between Desktop and Mobile view to see how your storefront looks from different devices.


Change your storefront layout

Your Oode storefront comes with three layouts to choose from. To select a layout, go to Appearance under Storefront on your left panel.

At the top of the Appearance section are your layout choices. Select one you like best.


Change your storefront presets

Your presets function as your storefront theme. They set the entire colour scheme of your storefront and you can change this anytime.


You can choose from any of the ready-made presets or you can customise your background instead.

Change your header

The Header in your storefront refers to the top-most section of your page. Typically, since this is one of the first things your customers see when they visit your storefront, your header should contain information that supports or represents your business.

One element you can add to your header is your business logo.

A logo is a visual representation of your brand. Not only does it help you become more recognizable across different platforms, it also makes you appear more credible.

To add a logo to your storefront, simply proceed to the Header section under Appearance and click on the + sign.

Upload your logo to the box under the Logo section and adjust its size through the Logo height bar according to your preference.

If you don’t have a logo image, you can also choose to add a simple logo text on your header.


Enter your brand or business name and customize the font style, size, and color to give it more personality.

Change your storefront background

Once you have uploaded your logo image or text, it’s time to edit your storefront background which includes your card background colours, spacing, and shapes.

If you have already selected a preset, your colours section will show the preset colours by default.


Experiment with your background appearance by selecting new colours and spacing.

Change your storefront colours

The Colours section on your storefront refers to the colours you see on your buttons and other clickable text. To change them, simply scroll down to the Colours section under the Appearance page.


The Primary colour is the colour used for your clickable buttons.

To change it, click on the colour palette or you can simply enter the hex code for a more accurate colour.


The Border colour is the colour used for your border lines such as the one shown below:


To change it, click on the colour palette or you can simply enter the hex code for a more accurate colour.

The Tag colour is the colour used for the tags or price labels indicated below:


To change it, click on the colour palette or you can simply enter the hex code for a more accurate colour.

Change your storefront typography

Your Typography refers to the font style used in your storefront. To make changes to your storefront fonts, scroll down to the Typography section under the Appearance tab.


Choose from our 8 classic fonts by clicking on the drop-down menu under Text font family.


Once that’s done, you can also choose a text colour to match the rest of your storefront appearance. To make changes, click on the colour palette under Text colour or you can simply enter the hex code for a more accurate shade.


Change your border radius

The Border Radius on your storefront refers to the shape of the corners of the storefront cards.

Test out what shape looks best on your storefront by selecting between No radius (for sharp corners), Mild radius (slightly rounded corners), and Full radius (for soft and rounded corners).


Your footer is the section at the bottom of your storefront. This contains any additional information about your business such as the following:

  • Contact information
  • Address (Map)
  • Open Hours


Just like your header, the storefront footer is optional but helpful for customers who want to know more about your business and what services you offer.


Choose what to show on your footer.

Scroll down to the Footer section under the Appearance tab and click on the toggle buttons next to Contact Information, Address, and Opening Hours.


Finally, change your footer colours by clicking on the colour palettes under Footer background colour and Footer text colour. You can also enter the hex code directly for a more accurate colour.


Click the Update button at the bottom of your screen and you are done!


Check how your storefront looks from the preview screen to your right or view your actual storefront by selecting View Storefront located on your left panel.