Elessi

Go to Theme Settings -> Product Page

1. Product page design:

1. 1. • Product detail layout 1

1. 1. • Product detail layout 2

1. 1. • Product detail layout 3

1. 1. • Product with thumb at bottom

1. 1. • Product with thumb on right

2. Product image size: You can decide the image size

3. Product description design: You can go to Product Tab Description to show product infomation

1. 1. • – Product tab description

How to configure this Tab description

Go to Sections -> Tab description

***Setting

1. 1. • • Tabs style: Only For Product Tab Description

1. 1. • • Tab aligns: Right, center, left
        • Use tabs vertical

***Content

Choose type of contents which you want to show by: Click to Add content

Result:

Theme setting

** Product description design: There are 3 types.

1. 1. • • Product tab description

1. 1. • • Product tab accordions full with

1. 1. • • Product tab sidebar

End Tab description configuration

1. 1. • • – Product tab accordions full width

1. 1. • • – Product tab accordions sidebar

1. 1. • • – Use sticky description: Description section is fixed on the right, and scroll down effect is only validated on the left section

Note:

Not support Product Detail Layout 3.

If you write the short description so long, the Add to cart button and Checkout button will be overlaped. Please make it fewer

4. Main image click action

1. 1. • • Zoom

1. 1. • • Photoswipe: You need click on the image, system will show image larger.

1. 1. • • None: When click on the image, nothing happens
        •  Show “Zoom image” icon: Click to open image in popup and swipe to zoom.

5. Add to cart style

1. 1. • • Style button 2D

1. 1. • • Style button 3D: has shadow box

6. Deliver & return: You can go to Delivery & Return to know how to create a new page

Click to Shipping info to see Deliver & Return page. You also can change the text: “Shipping info” by refering this post How to change texts

Result: The page appear as a pop-up and you can config how it appear by choose an option of animation effects

7. Upload image size chart

+ Animation effects: Choose animation effects when Image sizechart appear.

Result:

(You also can change the text: “Size guide” by refering this post How to change texts)

Image size chart:

8. Product trust seal

Result:

9. Product real time visitor

Result:

10. Total sold flash

Result: The numbers is showed randomly

11. Shipping tab

Delivery Start Date: enter a number of date in the month

Delivery End Date: enter a number of days you spend for shipping, eg: within 15 days

If you want to change the date format follow your language, please do these steps:

Result:

12. Share button

There 2 type share buttons:

1. 1. • • Share: when clicking on this button, share this product

1. 1. • • Follow: when click on this button, go to your account to follow

13. Product feature

1. 1. • • Use Add to cart full width?

+ If you tick on :

+ If you not tick on:

14. Design image

1. 1. • •  Use equal thumb height images?: Tick on to use Equal thumb height images.

__Aspect Ratio Thumb : There are many aspects ratio thumb when you hover on image of product. It help you your customer view clearier your product.

Result:

+ Before hover image:

+ When hover image:

__Image Size Thumb

+ Auto

+ Full

+ Image Position Thumb: The first value is the horizontal position and the second value is the vertical.

1. 1. • •  Use equal nav height images?: Tick on to use Equal nav height images.

+ Aspect Ratio Nav

+ Image Size Nav

+ Full

+ Auto

+ Image Position Nav: The first value is the horizontal position and the second value is the vertical.

15. Product swatch

15.1 Swatch design setting

1. 1. • • Variant with circle

1. 1. • • Variant with radio

1. 1. • • Variant with radio full width

1. 1. • • Variant with rectangle

1. 1. • • Variant simple(Default)

15.1 Swatch color setting for design

1. 1. • • Swatch color circle

1. 1. • • Swatch color square

16. Countdown timer

1. 1. • • Countdown timer light

1. 1. • • Countdown timer light 2

1. 1. • • Countdown timer default

17. Related product

1. 1. • •  Show related product:Tick on option to show related products.
        •  Heading: Enter heading/sub heading for related products.

+ Style 1:

+ Style 2:

+ Style 3:

The condition is that all product must be in the same collection.

*By collection: the products in the same collection will be related to each other

• Use sale countdown: Tick on option to show countdown.
• Countdown style : It’s like Countdown timer: Countdown timer only show for the products that have been set by Metafield
• Show product vendors

__ Design image

1. 1. • •  Equal height image: Set the height for thumbnail of related products

Result:

1. 1. • • Image size

1. 1. • • Image position

__ Setting slider

__ Breakpoint

__ Recently viewed products

Note: You can go to Recently viewed product to know more.

1. 1. • •  Show related product:Tick on option to show related products.
        •  Heading: Enter heading/sub heading for related products.
        • Use sale countdown: Tick on option to show countdown.
        •  Style title

+ Style 1:

+ Style 2:

+ Style 3:

1. 1. • • Countdown style : It’s like Countdown timer
        • Show product vendors

__ Design image

1. 1. • • Aspect ratio: It allow you change aspect ratio of image, radio custom 1-4 is setting section allow customer use ratio by upload image. After, aspect will calculate and get ratio of image as they upload.

Result:

1. 1. • • Image size

1. 1. • • Image position

__ Setting slider

Result:

__ Breakpoint