When a webstore is created, you need to have an engaging theme to make your web pages functional and attractive. Oracle Commerce Cloud gives you a sample theme which is by default and gets activated automatically. When you open the theme tab, it will be highlighted by the active icon. The web store is made of template pages or layouts which have widgets to define the structure of your web store pages. Widgets can be removed, cloned, added or customized as required and many of them are made up of configurable sub-component elements. In this blog you will learn about customizing your store’s design theme using Oracle Commerce Cloud.

What is Theme?

Theme is a set of styling configurations which include fonts, colors and other elements for designing, which defines look and feel of your online store. A default Theme is provided to you by Oracle Commerce cloud that you can copy and customize as per your requirement.

Default Theme

Sample Theme is being displayed under theme tab and gets activated automatically as default theme. Pre-Configured settings are available under Default Theme which will be helpful in creating your own store though user can manipulate settings as required. Once you clone the theme, you will be able to preview the newly customized theme.

Cloning/Creating New Theme

First open the Design Pack and click on Theme.
Click on to the Clone Theme button.
Give Cloned Theme a unique name.
Click on Save to Confirm.
Another copy of newly cloned theme can be created by clicking on Clone Theme button.

How to Customize Your Theme

Access Basic Theme Information

To access basic Theme information go to “About” menu tab which contains basic information of the given Theme. Theme Name, Notes, Sites and all the details about the Theme from which you have cloned the current Theme is stored under “About” menu tab. If required you can edit Theme Name or Theme Notes.

To edit Theme’s code click on go to Theme Code button.

Style setting for Background

Details on Style, header, footer and navigation setting of given themes is displayed under Backgrounds menu tab. You can use these settings to change an image or Background color of your web store’s background.

Header Row – To change an image or background color for your web store’s top row you can use these settings. It also refers to part of header bar running on the top of your web page. To adjust color settings, repeat pattern or position you can use these settings.

Footer Row – These settings having same function as of Header row but used for the footer section of your web store.

Style setting for Theme’s Button and Navigation Tools

You can change Button style setting which include size, style, color and fonts by choosing Theme’s button style settings. Navigation color settings which include drop-down navigation, mobile and top-level navigation can also be changed using theme’s color setting.

Theme’s typography setting

You can set up various link’s color, adding new fonts by external link, as well as default base font settings by enabling Typography settings. These two base font setting and link’s color can be inherited throughout all the heading style.

Compiling Customized Theme

-Click on to the Theme tab on Design page.

-Click on Theme Compilation tab.

-Build Theme.

-To save compiled Theme click on to “Save”.

How to Modify Theme Code Using Code Tools

Under the Theme tab there is code editing option available to change /modify the CSS of Theme.

Steps to achieve the same:-

On Design Page open the Theme option.
To access web store’s theme scroll to Theme CSS section.
Select the Theme to edit. Window for that Theme CSS will open.
Choose the below options to make your edits:-

-To access Variable files choose Style Variable option.

-To access Full Theme CSS choose Style Sheet option.

-To the end of the style sheet Additional CSS option appends. These additional code will be appended to the end of global style sheet.

-You can also modify the code if needed.

-At the end Save your changes.

How to Apply Theme to a Site

Open the Setting Page. It leads to “Set-Up” setting.
Go to General tab.
Open the already created site from the site picker search box or enter the setting details to create a new site.
Go to Theme drop down and choose the Theme you want to apply for your site.
To confirm the same Save your changes.

Deleting Theme

On Design page click on Theme and open the Theme you want to delete. At the bottom of any of the configuration settings tab there is Delete button. On click of Delete button you can delete any opened Theme and a confirmation message will appear on successful deletion of theme.

To Conclude

To perform any setup steps, you need to enter basic information about your store while subscribing to Oracle Commerce Cloud. The themes are always grouped together under one overarching theme title and they can be easily accessed and activated. You can also make customizations in them and can directly edit their LESS/CSS code. The storefront is made up of layouts, which represents distinct type of pages such as checkout, product details and order confirmation. It is relevant to have an engaging theme while you are creating a web store and Oracle Commerce Cloud starts you off with a sample theme.

About SynergyTop

SynergyTop offers expert services in development, implementation, migration/upgrade and maintenance of Oracle Commerce Cloud and Oracle ATG platforms.

Write to us at contact@synergytop.com if you want to enhance the ROI of your Oracle Commerce investments.