Theme Template Ultra Chic User Guide

4.EN_Support_EC_SC.png

Artboa2rd.png

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. Customize the store's color

In the SHOPLINE Admin, go to [Online Store Design] > [Pages], and click + Advanced Page to create a new store page, or click on the Edit button next to the existing pages that support New Page Builder.

Screen_Shot_2022-12-13_at_12.04.22_PM.png

 

On the advanced page, go to [Store Setting] > [Color] to customize the color for each block. The default color for each block is the color you set in the beginning.

Screen_Shot_2022-12-13_at_12.15.51_PM.png

 

You can use color code to customize the color for the entire store's button, important information, and underline. Please use a 6-digit HEX color code (avoid using light colors for better readability). Color code reference: https://htmlcolorcodes.com/. Please refer to Store Settings | Page Builder (New) for more instructions on color settings.

 

2. Touch up your storefront looks

A. Full-width banner

With Ultra Chic, the homepage banner is shown in full-width. The shop logo and menu are shown on top of the images. It is recommended to use an image with simpler color at the top for the banner.

Example for a header in black background and white wordings:

Artboard_Copy_2.png

 

Example for a header in white background and black wordings:

Artboard.png

 

No worries about using a complicated image as the banner! When customers scroll down, they can still view the menu items.

Artboard_Copy_3.png

The example here is using a white background and black wording.

 

*Note:

  • Only the page set as the homepage can display a full-width banner.
  • Please be reminded to remove the top and bottom padding and enable full-width images to display the image in full width.

 

B. Customize the background color of the menu

If you don't want to display the menu on top of the banner, you can upload an image with plain color or pattern before the banner. Please also remove the top and bottom padding and enable the full-width images to get the best effect.


Example of a patterned image with a white background:

_____2019-01-07___3.48.15.png


The display at the storefront:

_____2019-01-07___3.47.38.png


Remember to check the layout on mobile devices as well.

_____2019-01-07___3.57.06.png


The Ultra Chic theme template will display the logo and menu on top of the first image (which is on top of the first image widget on the advanced page). If you don't want to overlap the logo and menu with the image, you can add a "Text" widget with empty content as shown below:mceclip0.png

 

C. Recommended Banner Size

Try this image compressor to help your website load faster: https://tinypng.com/

 

Advanced page

You can use a full-screen banner for the homepage top banner. The applicable size is 1920x1080px.

_____2019-05-22___3.15.55.png

 

If you do not want to take up the entire banner space, please set the banner to 1920x720px. It will occupy three-quarters of the screen.

_____2019-05-22___3.16.21.png

 

On the product list page, it is recommended to set the height of the banner to less than 640px, so when customers first enter the landing page, they can slightly view the first row of product items. 

_____2019-05-22___3.20.27.png

 

D. Footer color follows the header background color

The system will fill in the whole footer with color automatically. You can fill in the brand information or drag-and-drop other widgets as well.

For example, when the background color of the header is dark, the footer will also be dark.

_____2019-01-07___3.12.16.png

 

When the background color of the header is white, the color of the footer will be light gray.

_____2019-01-07___3.10.01.png

 

*Please note that the background color will not display in the edit mode. You have to view it in preview mode or after applying the changes. Also, remember to select a vibrant color for the text and image to create an eye-catching storefront (e.g., black background with white text, vibrant images, or grey background with dark-colored text).

_____2019-01-07___3.21.05.png

 

E. Text title with underline

When using title elements, the system will automatically apply the theme color set to underlines.

_____2019-01-07___4.15.05.png

 

If you also want to add underlines for text titles:

In the "Advanced Page," you can add a "Text with Title" element, or check the box for "Show title" when adding other elements.

Screen_Shot_2022-12-14_at_10.21.56_AM.png

Screen_Shot_2022-12-14_at_10.37.57_AM.png

 

Due to the default style of the text element (e.g., color, size), if you want to match the text style with the "product category," you can use the following CSS guide:

1. While setting up the text, please set the text color to #666666 and the size to 22. After that, click the </> button.

Screen_Shot_2022-12-14_at_11.33.41_AM.png

 

2. Paste this code: <span style="letter-spacing:3px;"> behind the first "<p>" , click OK to save the changes.

_____2019-01-07___4.37.22.png

 

F. Remove text underline

If you do not want to have an underline under the text, please use the "Text" element, or check the box for "Show description" when adding other elements.

Screen_Shot_2022-12-14_at_10.59.40_AM.png

Screen_Shot_2022-12-14_at_10.49.59_AM.png

 

G. Center align product descriptions on the product detail page

In the Ultra Chic theme template, there are no side columns on the product category, so you catch customers' attention with the large and clear display of product images.

Due to the large width of the product image, it is recommended to center the product descriptions to make them look more aesthetically pleasing.

Screen_Shot_2022-12-14_at_11.21.42_AM.png

 

H. Images from Instagram are larger!

SHOPLINE resizes the Instagram elements to show bigger and clearer images on both desktop and mobile versions.

_____2020-02-11___3.29.37.png

 

I. Please add shading and frames for your white logos

White logos and black header backgrounds create an excellent combination.

_____2019-01-09___11.06.41.png

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

_____2019-01-09___11.12.59.png

Therefore, it is better to add shading or a frame for white logos for optimal display.

_____2019-01-09___11.17.12.png

 

 

 

 

 

Have more questions? Submit a request

Comments