A. Checkout page – the checkout form text labels are white texts on white background.

It's GC22 element. Make the text color of the Content div black.

The white text on white background may be caused by setting the CONTENT "Text" colour to white:  It's GC22. Make the text color of the Content div black. To fix the problem please follow procedure below:

- Open shop in ShopFactory

- Click Customize Design

- Right click on any area

- Click "Edit text..." under Contents

- Change the color to black (#000000)

- Click Ok

- Save and preview shop

- Publish shop again so that the changes are uploaded online

B. Basket page – link to terms and conditions is set to white text on white background

GC1 element was set to be white on white. GC1 is usually WebSiteContent.

(Note: GC classes can vary between website themes and styles.)

i.e. SFX-HOM-AA theme

- Click Customize Design

- Right click on any area

- Click "Edit text..." under Website content

- Change the color to black (#000000)

- Click Ok

- Save and preview shop

- Publish shop again so that the changes are uploaded online

C. Checkout Billing and Shipping forms: Provinces/States dropdown is white on white

Change GC41 text color from white (#ffffff) to black (#000000)

GC41 is used on the Body tag. Set the text color to black. 

- Click Customize Design

-  Left click on the header section -> at the shortcut menu, select BODY tag -> Edit Text...

- Change the text color to black

D. Mobile Search bar – search words are white on white

It's GC39. WebSiteHeader uses it. Set the text color to black. 

Or better yet make WebSiteHeader text color auto.

- Click Customize Design

-  Left click on the header section -> at the shortcut menu, select Website header -> Edit Text...

- Change the text color to black

In Customise Design, change GC39 (WebSiteHeader) text color to autocolor.

- Open shop in SF

- Designer menu -> Customize Design

- Left click on the Site Header section and change the Site Header TEXT colour to autotext.

If the above doesn't work, add custom website html image

- Open your shop in ShopFactory

- Click Central dropdown button -> Custom Website contents

- Click the + (Add) button to add a NEW custom html

- Drag the text block content into the description section

- On the top right of your new text block (HC1 or HC2 - depending on how many custom html you already have) click the EDIT (Pencil) icon

- Edit the custom html

Change the HTML Identification name: Mobile Search text

- Copy/paste the code in the content window:

<style>

#mobile_search #phrase {color:#000000;}

</style>

- Click OK

- Click Finish

- Save and preview your shop in external browser

- Publish the shop again.

E. Mobile company logo bar make background color the same as Utils element

Add as website custom code, with Field contains javascript checkbox ticked.

- Open your shop in ShopFactory

- Click Central dropdown button -> Custom Website contents

- Click the + (Add) button to add a NEW custom html

- Drag the text block content into the description section

- On the top right of your new text block (HC1 or HC2 - depending on how many custom html you already have) click the EDIT (Pencil) icon

- Edit the custom html

Change the HTML Identification name: Mobile company logo bar

- Copy/paste the code in the content window: 

<style>

.header.mobile .utils {background-color:inherit;}

</style>

- Click OK

- Click Finish

- Save and preview your shop in external browser

- Publish the shop again.

F. Search results page is white on white – put background image

- Open your shop in ShopFactory

- Click Central dropdown button -> Custom Website contents

- Click the + button to add a new content

- In the newly added HC1 or HC2 – click on the EDIT (Pencil) icon to add the contents

- Double click on the HC1 or HC2 then paste the code in the content box

- Change Identification name: Search results page texts

- Copy/paste the code in the content window:

<style>

#search-result-content {

    margin-top: -40px;

    background-image: url(../media/sf-darken.png);

}

#search-result-content #ProductList_L {

    background-color: transparent;

}

#search-result-content .SearchStringFound {

    color: #000000;

}

</style>

- Click OK

- Click OK

- Save and preview your shop in external browser

- Publish the shop again.