Theme Sangria User Guide



We proudly present our new theme - Sangria. It is designed for apparel shop, it fits to display clothing photos along with stunning layout. The responsive layout featured images to fill up in any screen size.

*Note: You cannot change the store layout if your store is using an official plan and only the “Social Commerce” plan. 



1. Customized Theme Colors and Fonts

In SHOPLINE Admin, go to [Online Store Design] > [Design], then click on the [Sangria] theme.


A. Theme Color


To match with your brand identity, theme color is available to be edited by typing color hex code. Colors will display on buttons and important information, please avoid to use light color for readability.

Colour code can be referred at




B. Theme Font

This theme provides two fonts to stylize the shop, once applied, the entire website will be replaced with the chosen font.

  • Lato - is suitable for modern and simple style,
  • Nanum Myeongjo - is a serif font, which presents a feeling of classic and literary style



2. Responsive Layout

Sangria is a responsive design, which allows product images to scale according to the screen size. The default ratio of product image is 3: 4, it goes well on presenting clothing photos. You can apply "Crop product images to fill the product box" to unify all photos in the same size.

Location: Shop Design > Design > Advanced Settings

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

It is recommended to compress the image before upload, large image causes the loading speed of the website.

Compression tool:



3. Category banner

You can present the collections by adding a cover banner to each category. For a better browsing experience, it is recommended not to use banner with large height.

Location: Products & Categories > Categories > Edit > Category Banners 

Recommended size: 1800px (W) x 400px(H)



4. Two columns Product detail page

A. Two columns of product image

The product images are displayed in two columns, which is suitable for stores with many product images. It is designed for a better browsing experience.

B. Instant link

Worry about when there are a lot of images, product information will be easily ignored? We solved this problem with an anchor link underneath the "Add to Cart" button, which will take customers directly to the relevant section!

C. Sticky button

Moreover, when the page is scrolled to the bottom, "Add to Cart" button will stick to top so customers can always find it and go to checkout.


5. Blog Page

Sangria provided a new layout of the blog page and it was divided into two sections:

  • Section A - Display the latest published article in one big image to draw attention.
  • Section B - Include four articles with an eye-catching title

The image will be displayed in ratio 1:1 and no need to be cropped as Sangria displays the first image from the article and you can see the full image inside the article.

Let's try to apply Sangria to your store!






Have more questions? Submit a request