SHOPLINE proudly presents the theme UltraChic. Merchants with this theme are able to design a more dynamic storefront for their online stores.
Customize Colors
A. Manual background color for the header
In SHOPLINE Admin, go to [Online Store Design] > [Design], then click on the [Ultra Chic] theme and scroll down to [Header Background Color].
Merchants may refer to the branding style to choose the background color to be black or white. Footer and shopping cart colors are also referred in this setting.
Black: Header Menu, footer and shopping cart
- Header Menu
- Footer
- Shopping cart
White: Header menu, footer and shopping cart
- Header Menu
- Footer
- Shopping cart
Ｂ. Custom theme color
Merchants can change the colors of all the buttons, highlighted info and underlines with the 6-digit color code.（Dark color is recommended for better readability）
Color code can be referred at https://htmlcolorcodes.com/
＊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!
A. 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:
Example for header white background and black wordings:
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.
Example here is using white background and black wordings.
＊Reminders:
- It is only for homepage when the top banner will be shown in full-width
- 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
B. 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:
Effect shown in storefront:
Remember to check the layout in mobile devices as well!
In Ultra Chic theme, the logo and menu will be covered on the first image on the top (which is the first element on advanced page), if you don't want to overlap the logo and menu with the image, you can add a "Text" element with empty content as below:
C. Footer shown in black or light gray, 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.
When background colour of header is white, colour of footer will be light gray.
Note: only the latest version of footer editor can support this design
SHOPLINE Admin > Navigation & Pages > Menu Navigation> Shop Footer
The editor does not show the background colour during setting. The effect can only be seen by preview or publishing.
D. Text title with underline
When using title elements, system will automatically apply underline with the theme colour set.
E. Pictures from Instagram are bigger!
SHOPLINE resize the Instagram elements to show bigger and clearer pictures in merchants' stores.
F. Please add shading and frames for your white logos
White logos help an eye-catching effect for black backgrounds.
But while sharing websites or sending emails, white logo will not be shown clearly as the example below.
It is suggested to add shading or frame for white logos as a result.
Comments