Theme template Philia is an elegant and delicate design that is recommended to merchants who sell jewelry, boutique clothing, groceries, food products, etc. Any products that you want to emphasize product image with quality details and display a lot of information.
Merchants can insert a bigger logo on the header by applying the theme template Philia to make the Brand Image more evident. When the customer scrolls down the page, the header will be minimized, therefore, there are no worries about affecting the viewing experience.
*Note: You cannot change the store layout if your store is using an official plan and only the “Social Commerce” plan.
- Customize the website theme color and font of the store brand
- Features of theme Philia
- Banner size suggestion
1. Customize the color and font of the store brand
A. Custom theme 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.
In SHOP Builder, go to [Store Setting] > [Color] to customize the color for each block on the page. The default color for each block will be the color you set in the beginning.
B. Custom theme font
In SHOP Builder, go to [Store Setting] > [Font]. You can set the font and font size of the Title and Paragraph.
*Note:
- 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/.
- For more instructions on color and font settings, please refer to Store Settings | SHOP Builder.
C. Logo Adjustment
Philia supports displaying a larger logo on the store for your marketing needs.
Go to [Header] > [Logo] to adjust the logo size (1 to 10). If you wish to provide more space for customers to view. You can choose to close the "Sticky header" toggle to improve the browsing experience.
2. Features of theme Philia
A. On the Product Listing Page
- The category name and path to the category will be shown on the banner.
- The page is Responsive Web Design and there is only one column on mobile for a better viewing experience.
B. On the Product Detail Page
- Product images can be hovered to zoom. Customers can also view a full-size image by clicking the zoom button in the lower right corner of the image.
- The website will display the Product Description, Shipping & Payment, and Customer Reviews by pagination. In this way, customers can not only find the information quickly but also concentrate on the information.
C. Product Images
- It is recommended that the ratio of product images is 3:4.
- Merchants can unify their product images to fill the product box by going to the SHOPLINE Admin > [Online Store Design] > [Pages] > [Advanced Pages] > [Store Settings] > [Product] > [Product Listing Page], switch on "Crop product image," and save the changes.
Recommended image dimension: 825px (W) x 1100px (H)
3. Banner size suggestion
Try this compressed image tool! It will help your website faster!
https://tinypng.com/
A. Advanced page
You can use a full-screen banner for the home page, a size of 1920 x 850px is recommended.
If you want your product to be displayed on the first screen, 1920 x 450px is recommended. The screen will be occupied three-quarters only and the products will be shown at the bottom.
B. Product listing page
On this page, merchants can upload a full-width banner to enhance the richness of the whole collection. A banner's height within 640px is highly recommended so that customers can see the first row of products when they land on the page.
Comments