User Guide of Theme Philia


SHOPLINE launches the new theme - Philia, an elegant and delicate design which is recommended to merchants who sell jewellery, boutique clothing, groceries, food products etc. and want to emphasise product image with quality details and display a lot of information.

Merchants can insert a bigger logo on the header by applying theme 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.


A. Customize the color and font of the store according to branding

1. Custom theme color

The color will be applied to all buttons and tags. You can decorate the shop with your brand color or custom color.(Dark color is recommended for better readability.)


Location: Admin Panel > Online Store Design > Design > Storefront Template > Theme setting of Philia
(Please set up the color with 6-digit HEX color code.HEX color code reference:


2. Custom theme font

We provide two types of font for the Philia theme, Playfair and Montserrat. Once applied, the entire site will be replaced with the font of choice.

  • Playfair - an elegant and transitional serif font
  • Montserrat - a neat and modern font



B. Features of Theme Philia

In the Product Listing Page

  • The category name and path to 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.



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



Product Images

  • It is recommended that the ratio of product images is 3:4.
  • The merchant can unify their product images to fill the product box by going to Admin Panel > Online Store Design > Design > Advanced Settings > check the "Crop product images to fill the product box".

Suggested image size: 825px (W) x 1100px (H)


C. Banner size suggestion

Try this compressed image tool! It will help your website faster!

1. Advanced page

You can use a full-screen banner for home page, 1920 x 850px is recommended. 

If you want your product to be displayed on the first screen, 1920x450px is recommended. The screen will be occupied three-quarters only and the products will be shown at the bottom.



2. Product listing page

At this page, merchants can upload a full-width banner to enhance the richness of the whole collection. Banner's height within 640px is highly recommended so that customers can see the first row of products when they land the page. 


The above is a special introduction of Philia, try it out now!

Have more questions? Submit a request