Product Main
1. Configure Product Main option
In Theme Customize, go to Product page (Default product) > Product Main option to configure the product summary settings on the Single Product page.
1.1. Product Layout
Product Layout option: You can choose a layout for the Product page here. We have 3 layouts for you to choose: Default layout, Width 1600px and Fullwidth layout.
Enable sticky product information on large screens checkbox: Tick on this checkbox to enable sticky product information on large screens.
You can view the video below to check the product page layouts:
1.2. Media
Media layout: Please choose a layout for the Product page here. We have total of 7 layouts for you to choose.
You can check the product layout in the video below:
Media size: Choose a size for the Product featured image here. We have 3 sizes for you to choose: Large, Medium and Small.
Thumbnail left/right size: Choose a size for the Product thumbnail images here. We have 3 sizes for you to choose: Large, Medium and Small.
Media ratio, Media ratio size, Media position: Configure the ratio, ratio size, position for the Product featured image here.
Image click action: Choose an action for the image when you click on it here, we have 2 actions for you to choose: PhotoSwipe popup and Zoom. You can choose None if you don't wanna use action.
Zoom type: Choose a zoom type for the product main image (when you choose action Zoom) here. We have 3 types for you to choose.
Enable 'zoom image' icon: Tick on this checkbox to enable the Zoom icon.
Enable click image show zoom popup: Tick on this checkbox to enable show a popup when clicking on the image.
Enable video looping: Tick on this checkbox to enable video looping (when your product media has a video).
1.3. Product Slider
Configure the styles for Product slider in the options below:
Use prev/next button
Visible: Choose to show the pre/ next buttons always or only when hovering here.
Button style, Button shape, Button color, Button size: choose the style for the pre/ next buttons.
Hidden buttons on mobile checkbox: Tick on this checkbox to hide the pre/ next buttons on the image on mobile device.
Moreover, you can enable the page dots and change the style.
1.4. Product Tabs
Product tabs design: Choose a design for the product tabs here. We have 2 designs for you to choose: Tab and Accordion.
Product tabs design mobile: Choose a design for the product tabs on mobile devices here.
Product tabs position: Choose a position for the product tabs
Enable auto-open first tab checkbox: Tick on this checkbox to enable auto-open first product tabs.
Product tabs layout: Choose a layout for the product tabs here.
Background Color: configure the background color for the product tabs here. This option also supports configuring Metafield, so you can change the background color of Description option for every single product title.
Background Color (mobile): configure the background color for the product tabs on mobile devices here. This option also supports configuring Metafield, so you can change the background color of Description on Mobile devices for every single product title.
(Frequently Bought Together) Products: Choose products for the Frequently Bought Together option here. You can read more in this article.
1.5. Sticky Add To Cart
Sticky mode: You can choose a mode for the Sticky Add To Cart button here. We have 3 modes: Visible on desktop, mobile, Only visible on desktop and Disable.
Show sticky add to cart after: We have 2 types for you to choose: Show when scrolls outside the scope of the form and Always show.
Enable choose variants: Only working with product has variant.
Button animation: Choose an animation styles for the Add to Cart button here.
Loop time (seconds): Configure the time that you wanna loop the animation here.
2. Blocks in the Product Main option
The Product Main option has total of 24 blocks for you to add to the sidebar:
Product Title
Product Price, review
Description
Live view
Product Form
Size chart, Delivery, Ask
Product meta
Tab Description
Tab Additional Infor
Tab Custom HTML
Tab Review
Pickup availability
Product social
Trust Badge
Brand Image
Inventory Quantity
Trust Badge
Total Sold Flash
Delivery Time
Text
Custom HTML
Custom Liquid
Tab Custom HTML
Tab Custom Liquid
With Image, Custom HTML and Text block, you guys can add more than 1 time to the Product Main option.
When you add each block to the Product main option, the right settings sidebar (of that block) will show, and allow you to configure those blocks to follow what you want. You can see some example images below:
[Private Offer] EComposer Partner Plan
Exclusively for Kalles 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 Kalles 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 “Kalles+EComposer” to upgrade for free
Cheers, The4.
Last updated
