Product Page
Theme Settings > Product Page
This location allows you make some general setting for a product page
We will explain one by one option below
1 - Product Layout
This option allow you change the layout between: Full width, Wide (1600px) and Default
2 - Product Page Design
This option allow you switch between a product design. Let's see the sample below
3 - Product image size
This option allows you change the size of product image.
You can choose different page layout depending on the product image size you need.
4 - Product Description Design
You can switch between Product Tab Description and Product Tab Accordion
5 - Use sticky product
Enble this option will alway make a block product information alway sticky.
6 - Main image click action
Allow you choose between zoom or PhotoSwipe on the product image.
7 - Product Sidebar
You can enable sidebar for product page so easy, you can also choose the Sidebar Size between Small, Medium, Large
When enable a sidebar, it will show like this
To config this Sidebar, please back to Sections > Sidebar Product
Here you will see a block for Product Sidebar which allows you config to show your own data. You can also add more block by click to the Add content like screenshot above.
7.1 - Product Categories
Allow you show the categories in the sidebar such as a Menu or auto Show all Categories
7.2 - Instagram
Allow you get Instagram image in Product sidebar
Note: This Instagram Block is separate from the Instagram Section on the home page or the Instagram Block on the Blog page.
Because instagram no longer supports API connection, we recommend using Section Feed - Instagram Feed. The app is completely free and you just need to connect your account to the App.
7.3 - Shipping & Delivery
Enter the data like screenshot above to show this block, for example
truck,FREE SHIPPING,Free shipping for all US order
Truck is a icon class and you can get it here https://icons8.com/line-awesome or http://themes-pixeden.com/font-demos/7-stroke/index.html
Free Shipping is a title
Free shipping for all US order is the content
7.4 - Featured Product
7.5 - Recent Post
7.6 - Custom HTML
7.7 - Custom text
8 - Product Features
8.1 - Product variant
No pick
Pick first variant
Pick first available variant
8.2 - Show first image
Show first product image instead show a image from first variant
8.3 - Use product group variant
This is awesome features allow you show a correct image for a variant, example when you active color Cyan, the image and thumbnails will show the Cyan color only instead show all thumbnails
To use this feature, you must config thumbnail one by one by enter the variant name as a Alt tag. Let's see the screenshot below
1- Click to the thumbnail image
2- Edit alt text
3- Enter tag
If you want to enter the normal alt text for the thumbnail image, you must write like this Color_cyan | Cyan Boheme and Cyan Boheme is an Alt text
If you want to use this feature, you must configure Alt text for all thumbnail images from all products, so consider whether or not to use this feature as it will be very time consuming. We are not sure if there is a third application that will allow this in bulk but we will continue to update here.
8.4 - Show sticky add to cart?
Allows you to show the add to cart bar when scrolling down
8.5 - Use adapt to first swatch image variant
By default we show the variant image with square and fixed size, when this option is turned on, it will show the variant image the same size as the actual image. (this ratio is taken from the first product image).
8.6 - Enter variant name you want has style color
As you can see, with the Color variant, it will display as a thumbnail. But in some countries there are different ways of writing colors, such as Color, Colors, Colour ... So you need to enter the name of the variant that you want to display as a thumbnail here.
8.7 - Use Select variants by clicking thumb images?
This option allows when you click on a thumbail image or activate a product image, it will automatically reselect the corresponding variant on the right.
8.8 - Enable HistoryState?
This option allows you to display IDs on URLs every time you switch between variants.
(image demo)
8.9 - Show incoming message
If your product has an out-of-stock variant and you set the settings to new incoming product like this
Then this option will show like this
8.10 - Remove sold out
Auto hidden sold out variant from product page
8.11 - Use a back in stock notification form?
If your product / variant out of stock like this
This option will allow show the Notify form like this
When a customer submits the back in stock notification form for a sold out product, you will receive an email to the email address you have set up in the admin to be your Customer email.
To change the text in form, please go to Edit language
9 - Design main image
Aspect Ratio Main: set the aspect ratio of the main image
Image size main: main image size settings
Image Position Main: The first value is the horizontal position and the second value is the vertical.
10 - Design thumb image
You can config like main image
11 - Product social sharing options
Share source:
Growave ‑ Reviews, Loyalty ++by Growave
E-commerce solutions designed with your customers in mind to let them see you, connect with you, and stay with you.
[Private offer] EComposer Partner Plan
Exclusively for Gecko users, you can get EComposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:
FREE 100% EComposer Standard plan for 6 months (save you $114)
Build ANY Shopify pages: Landing page, Sales Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
Create advanced sections & add to Gecko with ease
Save up to 50 pages/sections
100+ professional, stunning pre-designed templates
Anyone can build pages with live drag-drop editor
How to claim offer: Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject “Gecko+EComposer” to upgrade for free
Cheers, The4.
Last updated
