The theme template Sangria is designed for apparel shops. It fits to display clothing photos along with a stunning layout. The responsive layout featured images to fill up any screen size.

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

• Customized theme colors and fonts
• Responsive layout
• Category banner
• Two columns on Product detail page
• Blog page

 

 

1. Customized theme colors and fonts

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

 

A. Theme color

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

The colour code can be referred to at https://htmlcolorcodes.com/

 

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 styles,
• 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 a product image is 3:4, it goes well in 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 uploading, large image causes the loading speed of the website.

Compression tool: https://tinypng.com/

 

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 banners with a larger height.

Go to [Products & Categories] > [Categories] in the Admin. Click Edit next to the category you want to use the banner, then scroll down to the "Category Banners" section. 

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, the 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, the "Add to Cart" button will stick to the top so customers can always find it and go to checkout.

 

5. Blog Page

Sangria provided a new layout for 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 a ratio of 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!