Theme Ultra Chic User Guide



SHOPLINE proudly presents the theme Ultra Chic. Merchants with this theme 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 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


  • Footer


  • Shopping cart


White: Header menu, footer and shopping cart

  • Header Menu


  • Footer


  • Shopping cart



2. 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

*Caution: Custom theme color can only be saved and published with a 6-digit color code filled.


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:


No worries 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 wordings.



  • 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.

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



B. Customize background color 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 the top and bottom padding and enable full-width image 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, 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:mceclip0.png


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

SHOPLINE system will fill in the whole footer with colours 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.



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.



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.









Have more questions? Submit a request