User Guide of Theme UltraChic

Artboa2rd.png

SHOPLINE proudly present the new theme UltraChic. Merchants with this are able to design a more dynamic storefront for their online stores.

 

Customize Colours


1. Manual background colour for the header

Merchants may refer to the branding style to choose the background colour to be black or white. Footer and shopping cart colours are also referred in this setting.

_____2019-01-09___3.02.47.png



Black: Header Menu, footer and shopping cart

  • Header Menu

_____2019-01-09___11.50.56.png

  • Footer

_____2019-01-09___12.03.44.png 

  • Shopping cart

_____2019-01-09___12.03.36.png

White: Header menu, footer and shopping cart

  • Header Menu

_____2019-01-09___11.51.43.png

  • Footer

_____2019-01-09___12.01.56.png

  • Shopping cart

_____2019-01-09___12.02.57.png


2. Custom theme colour: 

_____2019-01-09___3.02.47_2.png

 

Merchants can change the colours of all the buttons, highlighted info and underlines with the 6-digit colour code. Colour code can be referred at https://htmlcolorcodes.com/

_____2019-01-09___11.58.27.png
*Caution: Custom theme colour can only be saved and published with 6-digit colour code filled.

 

Few steps to set up official site for brands!


1. Full-width banner

Homepage with Ultrachic is shown as full-width. Shop logo and menu are shown on top of the photos. It is recommended to adopt a simple picture for the banner.

Example for header black background and white wordings:

Artboard_Copy_2.png

Example for header white background and black wordings:

Artboard.png

There is no worries for using a complicated picture as the banner!! When customers scroll down, they are still able to see the menu items.

Artboard_Copy_3.png

Example here is using white background and black wordings.

 

*Reminders:

(1) It is only for homepage when the top banner will be shown in full-width

(2) Please be reminded to remove top and bottom padding and enable full-width for other pictures to share the effect with the top banner.

Route: SHOPLINE Admin > Navigation & Pages > Pages > Homepage-tagged page > Edit > Choose the picture to edit > Settings

Screen_Shot_2019-01-22_at_11.24.10_am.png

 

2. Customize background colour of header

If merchants would like to customize the background of the header, they can upload a picture with plain colour or pattern. Please be also reminded to remove top and bottom padding and enable full-width image to get the best effect.


Example with patterned picture with white background:

_____2019-01-07___3.48.15.png


Effect shown in storefront:

_____2019-01-07___3.47.38.png


Remember to check the layout in mobile devices as well!

_____2019-01-07___3.57.06.png

 

 

3. Footer shown in black or light grey, according to background colour of header

SHOPLINE system will fill in whole footer with colours automatically. Merchants may fill in brand info or drag-and-drop other elements as well.

Example when background colour of header is dark, footer will also be dark.

_____2019-01-07___3.12.16.png

 

When background colour of header is white, colour of footer will be light grey

_____2019-01-07___3.10.01.png

 

Note: only the latest version of footer editor can support this design

SHOPLINE Admin > Navigation & Pages > Menu Navigation> Shop Footer

Screen_Shot_2019-01-22_at_10.23.11_am.png


The editor does not show the background colour during setting. The effect can only be seen by preview or publishing.

_____2019-01-07___3.21.05.png

 

4. Text title with underline

When using title elements, system will automatically apply underline with the theme colour set.

_____2019-01-07___4.15.05.png

 

5. Pictures from Instagram are bigger!

SHOPLINE resize the Instagram elements to show bigger and clearer pictures in merchants' stores.

 

6. Please add shading and frames for your white logos

White logos help an eye-catching effect for black backgrounds.

_____2019-01-09___11.06.41.png

But while sharing websites or sending emails, white logo will not be shown clearly as the example below.

_____2019-01-09___11.12.59.png

It is suggested to add shading or frame for white logos as a result.

_____2019-01-09___11.17.12.png

 

Have more questions? Submit a request

Comments