App using in Gecko

Product Page

1 - Prestep

Go to Theme settings > Product page

2 - Single Product

Select main content and sidebar alignment for single product pages

2.1 - Full Width

2.2 - Content full width

2.3 - Sidebar Left

2.4 - Sidebar Right

  • Sidebar size: You can set different sizes for your single product pages sidebar


3 -Product page design

Choose between different predefined designs

3.1 - Product Detail Layout 01

3.2 - Product Detail Layout 02

3.3 - Product Detail Layout 03

3. 4 - Product Detail Layout 04

3.5 - Product Detail Layout 05

3.6 - Product with Thumb at bottom

3.7 - Product with Thumb on right

3.8 - Product with Thumb outside

4 - Product description design

Choose between different predefined designs

4.1 - Product tab description

4.2 - Product tab accordions

5 - Main image click action

  • Zoom: When you move mouse to image, it will be zoom in

  • Photoswipe popup: When you click to image, a big image will be showed

  • None: Of course dont have any change

6 - Delivery & Return

7 - Upload image size chart

8 - Product trust seal

This is to increase your customer's trust with your store and website.

9 - Product real time visitor

10 - Total sold flash

10.1- Icon

10.2 - Text color

10.3 - Text Font Style


10.4 - Config fake data

11 - Promo shipping

Free shipping to any coutry you want.

12 - 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:

Step 01: Go to Theme settings > Edit code

Step 02: Find this code and change

13 - Share/follow button

13.1 - Share button

13.2 - Follow button

14 - Product features

Some section you can config:

15 - Design image

15.1 - Use equal thumb height image?

15.2 - Use equal nav height images?

XV. Product Features:

  • This is some function for product and you can disable it.

XVI. Product Swatch:

+ Variants with circle – Layout swatch color:

+ Variants with circle – Layout swatch image variant:

+ Variant with rectangle:

+ Variant simple:

+ Variant simple with color:

+ Swatch size for Design variants with circle: Choose size for circle.

*** Countdown timer:

  • + Show Countdown timer: Show timer for products that have scheduled date for the sale price.

*** Related Products:

  • Show related products: Tick on option to show related products.

  • Heading: Enter heading for related products.

  • Sub Heading: Enter sub heading for related products.

  • Style title: There 2 styles.

+ Style 1:

+ Related Products: Choose the products to show on related products section. There 4 the way.

+ Remember that all the products must be in the same collection to can be related to each other.

1. By Collection:

When you choose Collection type, you‘ll see all products of the collection which the main product into that collection

+ In collection

+ In Related Product

2. By Handle:

+ With handle, you can choose exactly which product you want to show as related product by adding handle name of mainproduct to related product.

+ You can see what is handle in here: Understand about the Handle.

+ Remember, the products must be into the same collection.

+ Let see with Gecko, I have product 1 with handle “hoodie-over-men” and I will adding this handle to tag list of product 2.


3. By Tag

I have 2 products

Product 1:

Product 2:

As you can see they have same tags: Clothing, Color Black, Color Blue, XS, XL….

So product 2 will be a related product from product 1.

4. By ID

It’s the same By Handle

+ Let see with Gecko, I have product 1 with ID “2322964283469” and I will enter it with tag to related product 2.

+ Get the ID product 1.

+ Paste it in the tag of product 2.


Note: You can go to this artical of knowledge base of Gecko to know more about Related Product: How to use Related Product

***Show breadcrumb, Vendor, Availability,…

Show Add to cart Full width + Additional checkout button. When click this button, customer go to checkout page promptly



*** Recently Viewed Products:

  • + Show recently viewed products: Tick on option to show recently viewed products.

  • + Heading: Enter heading for recently viewed products.

  • + Number of Products to display: Enter number of product to show per page.

  • + Products hover: Select style when hover over products.

  • + Use Sale countdown: Tick on option to show countdown.