Buy Belyn and get 6 months Free Standard Plan of EComposer Install App  

Header background

Product Main

Annie

Written by Annie

Last updated

1. Configure Product Main option

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

2023-03-09_15-53-04.gif

1.1. Breadcrumb

  • Tick on Use product breadcrumb to enable the breadcrumb.

  • Breadcrumb design: Default or Inner Content.

2023-03-09_15-59-41.gif

To show Prev/Next and Back to Collection buttons, you need to go Theme Settings > Product Items > Enable 'product url has link collection'.

2023-03-09_16-01-07.gif

1.2. Product Layout

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

  • Enable expanded space between content and media

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

1.3. 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 4 sizes for you to choose: Large, Medium, Small, and Full width.

media_size.gif
  • Thumbnail left/right size, Thumbnail left/right hover: Choose a size, and hover style for the Product thumbnail images here.

thumnail.gif
  • Media ratio, Media ratio size, Media position: Configure the ratio, ratio size, position for the Product featured image here.

media.gif

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) here. We have 3 types for you to choose.

  • Enable 'zoom image' icon:

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

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

1.4. Product Image Slider

Configure the styles for Product slider in the options below:

slider.gif
  • 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.5. Product Tabs

  • Product tabs design: you can see the tab designs in the video below.

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

  • Enable line tabs content:

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

2023-03-23_16-52-39.gif
  • 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 tabs layout:

1.6. Frequently Bought Together

fbt.gif

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

1.7. Sticky Add To Cart

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

sticky atc.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: 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.

  • Loop time (seconds): This option allows you to control the loop time of the button animation.

1.8. Design Option Desktop

You can enter the padding for Product Main. Only work on desktop when 'Product Layout Full'.

2023-03-24_10-17-28.gif

2. Blocks in the Product Main option

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 right 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

Exclusively for Belyn 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 Belyn 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 “Belyn+EComposer” to upgrade for free

Cheers,

The4.