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 SHOP 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 | SHOP Builder for more instructions on color settings.
2. Touch up your storefront looks
i. Banner
Go to [SHOP Builder] > [Layout] > [Header] and click + Widget.
Click Gallery, add only 1 image, and drag it to the top of the Header.
ii. Present marketing promotions more prominently in the banner
With Ultra Chic, the homepage banner is displayed in full width. The store logo and menu appear on top of the banner image. Since the colors in the top area affect visual clarity, it’s recommended to use an image with simpler colors at the top so the logo and menu stand out. For images with more complex colors or compositions, the overall appearance will differ. You can freely choose the image based on your brand style and design needs.
- Top of banner with simple colors
- Top of banner with multiple colors
When customers scroll down the page, the menu will display on a white background to enhance text clarity and make it easier to read.
*Notes:
- Only the page set as the homepage can display a full-width banner. Please refer to this article.
- Please be reminded to remove the top and bottom padding and enable full-width images to display the image in full width.
iii. Recommended banner size
- Desktop version
- Rectangle – 2:1 ratio: Single image recommended size: 2000 × 1000 px
- Rectangle – 3:4 ratio: Single image recommended size: 1500 × 2000 px
- Square – 1:1 ratio: Single image recommended size: 2000 × 2000 px
- Mobile version
- Rectangle – 2:1 ratio: Single image recommended size: 1080 × 540 px
- Rectangle – 3:4 ratio: Single image recommended size: 810 × 1080 px
- Square – 1:1 ratio: Single image recommended size: 1080 × 1080 px
In the Ultra Chic template, the logo and menu are displayed by default on the first image component of the advanced page section. If you don’t want them to overlap with the first image component, you can add an empty text component at the top of the page as a spacer. This will create a clean, well-organized layout.
iv. 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.
v. Images from Instagram are larger!
SHOPLINE resizes the Instagram elements to show bigger and clearer images on both desktop and mobile versions.
vi. 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.
Comments