SHOPLINE proudly presents the theme template Ultra Chic. Merchants with this theme template are able to design a more dynamic storefront for their online stores.
*Note: You cannot change the store layout if your store is using an official plan and only the “Social Commerce” plan.
1. Manual background color for the header
In SHOPLINE Admin, go to [Online Store Design] > [Design], then click on the Ultra Chic theme template 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 to in this setting.
Black: Header Menu, footer, and shopping cart
- Header Menu
- Shopping cart
White: Header menu, footer, and shopping cart
- Header Menu
- Shopping cart
2. Custom theme color
Merchants can change the colors of all the buttons, highlight info, and underlines with the 6-digit color code. (Dark color is recommended for better readability）
Color code can be referred to at https://htmlcolorcodes.com/
＊Caution: Custom theme color can only be saved and published with a 6-digit color code filled.
A. Full-width banner
The homepage with Ultra Chic is shown as full-width. The 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:
No worries about using a complicated picture as the banner!! When customers scroll down, they are still able to see the menu items.
An example here is using a white background and black wording.
- It is only for the homepage when the top banner will be shown in full-width
- Please be reminded to remove the top and bottom padding and enable full-width for other pictures to share the effect with the top banner.
Go to [Online Store Design] > [Pages] in the Admin, then click on Edit next to the "Homepage". Click on the image section in the editor and select the Settings tab.
B. Customize the background color of the header
If merchants would like to customize the background of the header, they can upload a picture with plain color or pattern. Please be also reminded to remove the top and bottom padding and enable the full-width images to get the best effect.
Example with a patterned picture with a white background:
The effect at the storefront:
Remember to check the layout on mobile devices as well!
In the Ultra Chic theme template, the logo and menu will be covered on the first image on the top (which is the first element on the 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:
3. Footer colour following the background colour of the header
The SHOPLINE system will fill in the whole footer with colour automatically. Merchants may fill in brand info or drag-and-drop other elements as well.
For example, when the background color of the header is dark, the footer will also be dark.
When the background color of the header is white, the color of the footer will be light gray.
4. Text title with underline
When using title elements, the system will automatically apply to underline with the theme color set.
5. Pictures from Instagram are bigger!
SHOPLINE resizes 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.
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.