How do I customize the themes?


Purpose:

  • The themes define graphical appearance or look and feel of your Web store. Themes provide a consistent look and feel as you move through different pages and sections of your Web store.

  • You can customize your themes to suit your business requirement provided you have the knowledge of CSS.

  • By editing the CSS, you can change fonts, colors, borders, backgrounds, hide unwanted features, etc…



Prerequisites:

  1. Must have the CSS knowledge.


There are three methods for customizing the themes:

  • Method 1: Through the 'CSS Editor' tab of the 'Design & Content' module.
  • Method 2: Through the 'Style Sheet Editor' link of the 'Select Theme' page.
  • Method 3: Through the 'Stylesheet' folder of the 'File Manager' page.

CSS Editor

(i) Through the 'CSS Editor' tab of 'Design & Content' module


To customize the themes, do the following:

  • Log in to the 'Anywhere Commerce Control Panel' by using your User Name (Email Address) and Password.


 Customize Themes

  • You will be navigated to the 'Dashboard' page.


 Select Template

  • Click the  Select Template icon. The Design & Content section will be displayed as shown in the figure.


 Select Template

  • Click CSS Editor. You will be navigated to the Style Sheet Editor page.


 Customize Themes

  • Edit the CSS in the Add/Edit CSS text box as per your requirement.
  • Click Update. You will be displayed a success message as shown in the figure.


 Customize Themes

  • Now, you can check up the relevant changes implemented in the storefront by clicking 'View Live Store.'
  • The same changes will also be incorporated in the CustomStyles.css file, which can be accessed through the Design & Content » File Manager » 'Stylesheet' folder.

Style Sheet Editor

(ii) Through the 'Style Sheet Editor' link of the 'Select Theme' page


To customize Themes, do the following:

  • Log in to the 'Anywhere Commerce Control Panel' by using your User Name (Email Address) and Password.


 Customize Themes

  • You will be navigated to the 'Dashboard' page.


 Select Theme

  • Click the  Select Theme icon. The Design & Content section will be displayed as shown in the figure.


 Select Theme

  • Click Select Themes. You will be reached to the Select Theme page as shown in the figure.


 Customize Themes

  • Scroll down to the bottom of the Select Theme page and click Style Sheet Editor link. You will be navigated to the Style Sheet Editor page.


 Customize Themes

  • Edit the CSS in the Add/Edit CSS text box as per your requirement.
  • Click Save. You will be displayed a success message as shown in the figure.


 Customize Themes

  • Now, you can check up the relevant changes implemented in the storefront by clicking 'View Live Store.'
  • The same changes will also be incorporated in the CustomStyles.css file, which can be accessed through the Design & Content » File Manager » 'Stylesheet' folder.

Style Sheet

(iii)Through the 'Stylesheet' folder of the 'File Manager' page


To customize Themes, do the following:

  • Log in to the 'Anywhere Commerce Control Panel' by using your User Name (Email Address) and Password.


 Customize Themes

  • You will be navigated to the 'Dashboard' page.


 Select Template

  • Click the  Select Template icon. The Design & Content section will be displayed as shown in the figure.


 Select Template

  • Click File Manager. You will be navigated to the File Manager page.


 Customize Themes

  • Click Stylesheet folder under the Home section as shown in the figure. The files and folders of the Stylesheet folder will be displayed in the right column as shown in the figure.
  • Select CustomStyles.css and click the '  Customize Themes' icon as shown in the figure.

Or

  • Select CustomStyles.css and right click on it. You will be displayed multiple options.


 Customize Themes

  • Click on the link Open as shown in the figure.

Or

  • Double-click on the CustomStyles.css file in the File Manager page.
  • This will open the CustomStyles.css file will open in a web page.


 Customize Themes

  • Right-click on the page and select Save Page As. This will open Save As dialog box.


 Customize Themes

  • Save the CustomStyles.css file in a suitable location.
  • Open the CustomStyles.css file in a Notepad.


 Customize Themes

  • Edit the CustomStyles.css file as per your requirement. Here, you need to modify the relevant class properties as per your requirement.
  • To save the changes done, select the File tab of the Notepad and click Save.
  • Now, you need to upload this modified Customstyles file to the Stylesheet folder.
  • To upload the modified CustomStyles.css file, you need to first delete the existing CustomStyles.css file from the Stylesheet folder.


 Customize Themes

  • To delete the existing CustomStyles.css file, select the CustomStyles.css file in the File Manager page and click the ' Customize Themes' icon as shown in the figure.

Or

  • Select the CustomStyles.css file and right click on it. You will be displayed multiple options.


 Customize Themes

  • Click on the option Remove as shown in the figure.
  • You will be asked for a confirmation through a dialog box.


 Customize Themes

  • To remove the CustomStyles.css file, click OK. The respective CustomStyles.css file will be deleted and the dialog box will be closed.
  • You can upload the modified CSS file.


 Customize Themes

  • To upload the modified CustomStyles.css file, select the Stylesheet folder and click the '  Customize Themes' icon as shown in the figure.

Or

  • Select the Stylesheet folder and right-click in the right column at which the subfolders and images of the Stylesheet folder are displayed. This will display multiple options and click on the link Upload Files as shown in the figure.


 Customize Themes

  • This will open an Upload files dialog box.


 Customize Themes

  • Click Add Files and this will open a File Upload dialog box.


 Customize Themes

  • Select the CustomStyles.css file from the relevant location and click Open. The File Upload dialog box will be closed and the selected CustomStyles.css file will be appeared in the Upload files dialog box.


 Customize Themes

  • To upload the CustomStyles.css to the Stylesheet folder of 'File Manager' page, click Start Upload. The selected images will be uploaded to the respective Stylesheet folder and you will be displayed upload status in the Upload files dialog box under the Status column indicated by percentage and ' Upload Product Images to 'File Manager'' icon against the uploaded file.


 Customize Themes

  • You can also verify the uploaded CustomStyles.css file in the Stylesheet folder of 'File Manager' page as shown in the figure after closing the Upload files dialog box.