Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Product Main

Annie

Written by Annie

Last updated

2285 views

On this page


This guideline helps you config the settings on Product Main of Product page.

1. Product Main options

Go to Theme Customize > Product page (Default product) > Product Main to configure the product main settings on the Single Product page.

11.png

1.1. Product Layout

  • Product Layout option: choose a layout for the Product page: Default, Width 1600px, and Fullwidth layout.

  • Enable sticky product information on large screens

You can view the video below to check the product page layouts:

1.2. Media

  • Media layout: choose a layout for product images. You can check some product layouts 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, Small

14.png
  • Thumbnail left/right size: Choose a size for the Product thumbnail images here.

15.png
  • Media ratio, Media ratio size, Media position:

There are some options to config zoom image feature:

  • Image click action: Choose an action for the image when you click on it here: None, PhotoSwipe popup and Zoom. You can choose a Zoom type (when you choose action Zoom)

  • Enable 'zoom image' icon:

  • Enable click image show zoom popup: show a popup when clicking on the image.

Please check this video about Zoom feature:

  • Enable video looping/muting/autoplaying: enable some features when your product media has a video

1.3. Product Image Slider

Configure the styles for Product slider in the options below:

  • Slider effect: Effect between transitioning slides

  • Use prev/next button: choose devices you want to show 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.

  • Moreover, you can enable the page dots and change the style for them.

1.4. Product Tabs

  • Product tabs design: there are 2 designs: Tabs and Accordion.

  • Enable tabs design accordion mobile: change to accordion design on mobile device.

  • Product tabs position: put the tabs inner/external of product main.

  • Enable auto-open first tab: Only working with layout 'Accordion'

  • Product tabs layout: You can choose the width for product tabs. Moreover, you can config the Background Color for desktop and mobile devices. These options not working when enable 'tabs position inner'.

You can see this video to know more about Product tabs:

1.5. Frequently Bought Together

You can choose products for the Frequently Bought Together feature here. Please read more in this article.

1.6. Sticky Add To Cart

Only working when enable ajax add to cart in Theme Settings > General Product

21.png

Not work if you choose in 'Theme settings > Product Single > Variant picker: No pick'.

So you have to choose 'Pick first variant' or 'Pick first available variant' to show Sticky Add to cart

61.gif
  • Sticky Mode, there are 3 options: Disable, only visible desktop, and visible on desktop, mobile.

  • Show sticky add to cart after: There are 2 types of sticky showing: Always show and Show when scrolling outside the scope of the form.

  • Layout Mobile: you can choose Default, Minimal or Very Minimal layout.

  • Button Animation, Loop time: You can change the animation of the button.

  • Enable choose variants: You can enable/disable this option to show variants on Sticky add to cart. Only working with product has variant.

Please check this video to know more:

2. Blocks in the Product Main

The Product Main option has many blocks for you to add to the content product page. When you add each block to the Product main option, the settings sidebar (of that block) will show, and allow you to configure those blocks to follow what you want. You can check these guidelines to config them in detail:

With Text, Custom HTML, Custom Liquid, Tab Custom HTML, Tab Custom Liquid and Customizable Product block, you guys can add more than 1 time to the Product Main section.

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, 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, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

We uses cookies to ensure you get the best experience on our website.