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.
- Customize the store's color
- Full-width banner
- Customize the menu & recommended banner size
- Footer design guide
- Add/remove text spacing and underlines
- Recommended product detail page layout
- Other details
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.
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.
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:
Example for a header in white background and black wordings:
No worries about using a complicated image as the banner! When customers scroll down, they can still view the menu items.
The example here is using a white background and black wording.
- 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:
The display at the storefront:
Remember to check the layout on mobile devices as well.
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:
C. Recommended Banner Size
Try this image compressor to help your website load faster: https://tinypng.com/
You can use a full-screen banner for the homepage top banner. The applicable size is 1920x1080px.
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.
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.
- For advanced pages created with the new page builder, please switch on the toggle for "Adapt Height to the Media Size" when adding the Slider widget to avoid image cropping.
- For advanced pages created with the new page builder, please refer to:
- Recommended image proportions for the desktop version
- Rectangular (2:1 ratio) - Recommended single image dimension: 2000 x 1000px.
- Rectangular (3:4 ratio) - Recommended single image dimension: 1500 x 2000px
- Square (1:1 ratio) - Recommended single image dimension: 2000 x 2000px.
- Recommended image proportions for the mobile version
- Rectangular (2:1 ratio) - Recommended single image dimension: 1080 x 540px.
- Rectangular (3:4 ratio) - Recommended single image dimension: 810 x 1080px
- Square (1:1 ratio) - Recommended single image dimension: 1080 x 1080px.
- Recommended image proportions for the desktop version
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.
When the background color of the header is white, the color of the footer will be light gray.
*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).
E. Text title with underline
When using title elements, the system will automatically apply the theme color set to underlines.
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.
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.
2. Paste this code: <span style="letter-spacing:3px;"> behind the first "<p>" , click OK to save the changes.
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.
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.
H. Images from Instagram are larger!
SHOPLINE resizes the Instagram elements to show bigger and clearer images on both desktop and mobile versions.
I. Please add shading and frames for your white logos
White logos and black header backgrounds create an excellent combination.
But while sharing websites or sending emails, the white logo will not be shown clearly as in the example below.
Therefore, it is better to add shading or a frame for white logos for optimal display.