You can change elements on your online store to further align it with your brand’s image. To do this:

 

  1. On the left panel of the platform, click on the Appearance tab then on the Themes tab.
  2. Next, click the Customize button of your chosen theme. 
  3. You will be directed to the next page, where you will be able to change the font, color, and other formats of the parts of your online store by clicking on any of the tabs on the left panel. 
  4. As you make changes, you will see a preview on the right side of your screen.

 

 


 

 


Changing Logo and Favicon

Your online store needs to reflect your brand and uploading your current logo will be essential. It is also advisable to upload a favicon to further strengthen your online branding on this site.

 

  1. To upload your logo, click on the Appearance tab on the left panel and then click on the Themes tab. 
  2. Next, click the Customize button of your chosen theme. 
  3. You will be directed to the next page, click on the Logo-Banner tab on the left panel. The dropdown will show options to upload a logo and a favicon. 
  4. To upload a logo, click on Choose File under the Logo heading and select the image to upload from your computer. Take note that the file size should be 1920 x 500 pixels. 
  5. Once you have uploaded the image, click on Save. 
  6. The page on the right of your screen will refresh to show your logo.

 

 

 

 

 

 

 


Now, to customize the favicon:

 

  1. Click the Logo-Banner on the left panel. 
  2. This time, click on Choose File button under the Favicon heading and select the file from your computer. Take note of the required size: 32 x 32 pixels. 
  3. Once you have chosen the image for your favicon, click Save.

 

 

 

Changing Text Color

To change the text color on your online store:

 

  1. Click on the Appearance tab on the left panel and then click on the Themes tab.
  2. Next, click the Customize button of your chosen theme. 
  3. You will be directed to the next page. On the left panel, click on the Typography button. 
  4. This will show a dropdown list of options which allows you to change the color for the following:
    • Primary Text
    • Secondary Text
    • Default Text
    • Primary Heading (text and background color)
    • Secondary Heading (text and background color)
  5. You can choose the color by dragging the small circle across the square section and the triangular icons from the rainbow strip, or 
  6. You may enter the HEX code in the field labeled #.
  7. Once everything is set, click Save.


 

 

 

 


Changing Button Colors

To change the colors of the buttons on your site: 

 

  1. Click on the Appearance tab on the left panel and then click on the Themes tab.
  2. Next, click the Customize button of your chosen theme. You will be directed to the next page. 
  3. On the left panel, click on the Button tab. 
  4. This will show a dropdown list of options which allows you to change the background color and text color for the following buttons:
    • Primary Button
    • Secondary Button
    • Default Button
    • Primary Button Hover
    • Secondary Button Hover
  5. You can choose the color by dragging the small circle across the square section and the triangular icons from the rainbow strip, or 
  6. You may enter the HEX code in the field labeled #. 
  7. Once everything is set, click Save.


 

 

 

 

 


Changing Link Colors

To change the link text and hover colors:

 

  1. Click on the Appearance tab on the left panel and then click on the Themes tab.
  2. Next, click the Customize button of your chosen theme. You will be directed to the next page. 
  3. On the left panel, click on the Link button. 
  4. This will show a dropdown list of options which allows you to change the text color for the following:
    • Primary Link
    • Secondary Link
    • Primary Link Hover
    • Secondary Link Hover
  5. You can choose the color by dragging the small circle across the square section and the triangular icons from the rainbow strip, or 
  6. You may enter the HEX code in the field labeled #. 
  7. Once everything is set, click Save.

 

 

 

 

 

 

 

 

Changing Breadcrumb Colors

To change the breadcrumb colors: 

 

  1. Click on the Appearance tab on the left panel and then click on the Themes tab.
  2. Next, click the Customize button of your chosen theme. You will be directed to the next page. 
  3. On the left panel, click on the Breadcrumbs button. 
  4. This will show a dropdown list of options which allows you to change the color for the following:
    • Background
    • Link Background and Text 
    • Link Hover Background and Text 
  5. You can choose the color by dragging the small circle across the square section and the triangular icons from the rainbow strip, or 
  6. You may enter the HEX code in the field labeled #. 
  7. Once everything is set, click Save.


 

 

 

 

 

 

 

Changing Form Colors

To change the colors of online forms:

 

  1. Click on Appearance on the left panel and then click on the Themes tab. 
  2. Next, click the Customize button of your chosen theme. You will be directed to the next page. 
  3. On the left panel, click on the Form button. 
  4. This will show a dropdown list of options which allows you to change the color for the following:
    • Label Background 
    • Label Text 
    • Input Field Background 
    • Input Field Text 
  5. You can choose the color by dragging the small circle across the square section and the triangular icons from the rainbow strip, or 
  6. You may enter the HEX code in the field labeled #. 
  7. Once everything is set, click Save.


 

 

 

 

 

 

 

Changing Menu Color

To change the color of your menu:

 

  1. Click on Appearance on the left panel and then click on the Themes tab. 
  2. Next, click the Customize button of your chosen theme. You will be directed to the next page. 
  3. On the left panel, click on the Menu button. 
  4. This will show a dropdown list of options which allows you to change the color for the following:
    • Primary Menu Background and Text 
    • Secondary Menu Background and Text 
    • Primary Menu Hover Background and Text
    • Secondary Menu Hover Background and Text
  5. You can choose the color by dragging the small circle across the square section and the triangular icons from the rainbow strip, or 
  6. You may enter the HEX code in the field labeled #. 
  7. Once everything is set, click Save.


 

 

 

 

 

 

 

Changing Header Colors

To change the header colors: 

 

  1. Click on Appearance on the left panel and then click on the Themes tab. 
  2. Next, click the Customize button of your chosen theme. You will be directed to the next page. 
  3. On the left panel, click on the Header button. 
  4. This will show a dropdown list of options which allows you to change the color for the following:
    • Header Background
    • Header Text
  5. You can choose the color by dragging the small circle across the square section and the triangular icons from the rainbow strip, or 
  6. You may enter the HEX code in the field labeled #. 
  7. Once everything is set, click Save.


 

 

 

 

 

 

 

Changing Footer Colors

To change the colors of your online store’s footer:

 

  1. Click on Appearance on the left panel and then click on the Themes tab. 
  2. Next, click the Customize button of your chosen theme. You will be directed to the next page. 
  3. On the left panel, click on the Footer button. 
  4. This will show a dropdown list of options which allows you to change the color for the following:
    • Footer Background
    • Footer Text
  5. You can choose the color by dragging the small circle across the square section and the triangular icons from the rainbow strip, or 
  6. You may enter the HEX code in the field labeled #. 
  7. Once everything is set, click Save.


 

 

 

 

 

 

 

Changing Product Banner and Badge Colors

To change the colors of the product banner and badge: 

 

  1. Click on Appearance on the left panel and then click on the Themes tab. 
  2. Next, click the Customize button of your chosen theme. You will be directed to the next page. 
  3. On the left panel, click on the Product button. 
  4. This will show a dropdown list of options which allows you to add the banner image and change the color for the following:
    • Banner Heading Background and Text
    • New Item Badge Background and Text
    • Sale Item Badge Background and Text
  5. You can choose the color by dragging the small circle across the square section and the triangular icons from the rainbow strip, or 
  6. You may enter the HEX code in the field labeled #. 
  7. Once everything is set, click Save.


 

 

 

 

 

 

 

Changing Rotator Text Colors

To change the color of the rotator: 

 

  1. Click on Appearance on the left panel and then click on the Themes tab. 
  2. Next, click the Customize button of your chosen theme. You will be directed to the next page. 
  3. On the left panel, click on the Rotator button. 
  4. This will show a dropdown list of options which allows you to change the color for the following:
    • Primary Text
    • Secondary Text
  5. You can choose the color by dragging the small circle across the square section and the triangular icons from the rainbow strip, or 
  6. You may enter the HEX code in the field labeled #. 
  7. Once everything is set, click Save.


 

 

 

 

 

 

 

Uploading Custom Voucher Image

To upload a custom voucher image:

 

  1. Click on Appearance on the left panel and then click on the Themes tab. 
  2. Next, click the Customize button of your chosen theme. You will be directed to the next page. 
  3. On the left panel, click on the Voucher button. 
  4. Next, click Choose File and select the image from your computer.
  5. Click Save.