Ella Documentation
Open a Store for FREEExclusive OffersServicesResources
  • Greeting + Useful Resources
  • Exclusive Offers 🔥
  • Changelog
  • Full Theme Features in Ella 6
  • Installation
    • Install Theme 🎯
    • Update Theme 🔔
      • Update from Ella 1.0, 2.0, 3.0, 4.0, 5.0 to Ella 6.0
      • Update from Ella 6.0 to a higher version
      • Theme Update Service
    • Install App
  • Basic Configuration
    • Customer Registration
    • Shipping Rates
    • Navigation
    • Sticky Toolbar Mobile
    • Online Store 2.0
      • Color Gradient
      • Dynamic Source
  • Theme Settings
    • Multiple Layouts
    • Typography
    • General
      • Favicon
      • Wishlist
      • X-shaped cursor
      • Terms and conditions
      • Swatch
      • Variant picker
      • Customization option
      • Customer login
      • Hot stock function
      • Add to cart action
      • Lazy load image
      • Slider dots
      • Slider arrows
      • Pagination
      • Trusted image
      • Dynamic browser tab title
      • Saved price
      • Scroll down to the next section
      • View documentation
    • Product card
      • Change product card layout
      • Set up for product card
      • Positive vibes bundle
      • Product badges
      • Product Swatch
      • Product Action
      • Quick Shop
      • Marquee
    • Theme Language
      • How to set up a different language?
      • How to set up Multiple Languages?
    • Multiple Currencies
    • Multi-Level Categories
    • Quick Search
    • Quick Cart/ Quick Edit Cart
    • Quick View
    • Countdown
    • Free Shipping Calculator Message
    • Someone Purchased Notification Popup
    • GDPR Popup
    • Popup
    • Recently Viewed Popup
    • Before You Leave
    • Notify Me When Out Of Stock
    • Ask An Expert
    • Social Media
    • Product Colors
    • General colors
    • Animations
    • Adding custom CSS to your theme
    • Custom JS
    • Checkout
  • Header
    • Header For Desktop
      • Home 01 - Classic
      • Home 02 - Trendy Style
      • Home 03 - In vogue
      • Home 04 - High Fashion
      • Home 05 - Surfing
      • Home 06 - SuperMarket
      • Home 07 - Electronics
      • Home 08 - Large Catalogs
      • Home 09 - Pet Supplies
      • Home 10 - Jewelry
      • Home 11 - Health & Beauty
      • Home 12 - Men Fashion
      • Home 13 - Winter Sport
      • Home 14 - Automotive 1
      • Home 15 - Automotive 2
      • Home 16 - Game
      • Home 17 - Gym
      • Home 18 - Shoes
      • Home 19 - Swimwear 1
      • Home 20 - Furniture
      • Home 21 - Yoga
      • Home 22 - Eyes Wears
      • Home 23 - Plant+ Garden
      • Home 24 - Bicycle
      • Home 25 - Swimwear 2
      • Home 26- Bagratica
      • Home 27 - Men Fashion 02
      • Home 28 - Single Product
      • Home 29 - Chic Couture
      • Home 30 - POD Store
      • Home 31 - Hair Wigs
      • Home 32 - Suitcase
      • Home 33 - Coffee Shop
      • Home 34 - Lunch Set
      • Home 35 - Dietary Supplement
      • Home 36 - Deluxe Interior
    • Header For Mobile / Tablet
    • Set up Advanced Mega Menu/ Drop Down Menu
      • Label For Menu
    • Mobile Menu
  • FOOTER
    • Footer Layout
      • Home 01 - Classic
      • Home 02 - Trendy Style
      • Home 03 - In vogue
      • Home 04 - High Fashion
      • Home 05 - Surfing
      • Home 06 - SuperMarket
      • Home 07 - Electronics
      • Home 08 - Large Catalogs
      • Home 09 - Pet Supplies
      • Home 10 - Jewelry
      • Home 11 - Health & Beauty
      • Home 12 - Men Fashion
      • Home 13 - Winter Sport
      • Home 14 - Automotive 1
      • Home 15 - Automotive 2
      • Home 16 - Games
      • Home 17 - Gym
      • Home 18 - Shoes
      • Home 19 - Swimwear 1
      • Home 20 - Furniture
      • Home 21 - Yoga
      • Home 22 - Eyes Wears
      • Home 23 - Plant+ Garden
      • Home 24 - Bicycle
      • Home 25 - Swimwear 2
      • Home 26 - Bagratica
      • Home 27 - Men Fashion 02
      • Home 28 - Single Product
      • Home 29 - Chic Couture
      • Home 30 - POD Store
      • Home 31 - Hair Wigs
      • Home 32 - Suitcase
      • Home 33 - Coffee Shop
      • Home 34 - Lunch Set
      • Home 35 - Dietary Supplement
      • Home 36 - Deluxe Interior
  • SECTIONS
    • Section On Every Page
    • All Sections in Theme
      • Announcement Bar
      • Multitab Image
      • Brand Slider
      • Brands Showcase
      • Banner Motion
      • Before/After Image Slider
      • Blog Posts
      • Blog Posts List
      • Blog Posts Slider
      • Custom Text
      • Custom Image Banner
      • Custom Liquid
      • Custom Press Banner
      • Customer testimonial
      • Customer Review
      • Custom Service Block
      • Custom Product Widget
      • Counter Positions Image Banner
      • Collapsible Content
      • Collection List
      • Featured Categories
      • Featured Product
      • FAQs
      • Google Map
      • Image Banner
      • Instagram
      • Instagram Visual Grid
      • Instagram Special
      • Highlights Lookbook
      • Newsletter
      • Newsletter with banners
      • Newsletter With Countdown
      • Marquee
      • Multilayer image
      • Page
      • Policies Block
      • Product Block
      • Product Block Duo
      • Product Tabs
      • Product Vertical
      • Product Highlight
      • Puzzled Image Banner
      • Promo banner with product grid
      • Rich Text
      • Slideshow
      • Search Block
      • Spotlight Block
      • Special Banner
      • Spotlight Products
      • Slidable Spotlight
      • Sticky Scrolling Banner
      • TikTok Video
      • Video
      • Video carousel
      • Visual Lookbook
  • Collections List Page
    • Demo & Settings Data
    • Collections List Section
  • Collections Page
    • Demo & Settings Data
    • Sub Collection
    • Collection section
      • Collection header
      • Main collection
        • Filter
  • Product Page
    • Demo & Settings Data
    • Product Information
      • Product Media
      • Product Tabs
      • Product Variant
      • Size Chart
      • Description
      • Delivery Time
      • Dynamic Checkout Button
      • Color Comparison
      • Sticky Add To Cart
      • Sold In Last Period
      • Customers Viewing
      • Custom Information
      • How To Set Up Product Description For Each Variant?
      • How To Set Up Product Property By Metafields?
      • How To Set Up Complementary Products?
      • Positive Vibes Bundle
      • Combined Products Listing
      • List Tags
    • Variant Image Grouped
    • Product Bundle
    • Product Combo
    • Quick Order List
    • Product Description Tab
    • Product Recommendations
    • Recently Viewed Products
    • How To Set up Pre-Order Product?
    • How To Set Up Local Pickup?
  • How to set up a product template 'step by step'?
  • Blog
    • Blog
    • Default Layout
    • Layout 01
    • Layout 02
    • Layout 03
    • Layout 04
  • Article
    • Article
    • Default Layout
    • Layout 01
  • Page
    • How To Create A Page?
    • Find A Store/ Store Locator Page
    • Landing Page
      • Landing Page 01
      • Landing Page 02
      • Landing Page 03
    • Wishlist Page
    • Brands Page
    • Collection Detail Page/ Sub Collection Page
    • FAQs Page
      • Layout 01
    • Lookbook Page
      • Layout 01
    • Contact Us Page
      • Layout 01
      • Layout 02
    • About Us Page
      • Layout 01
      • Layout 02
    • Portfolio Page
      • Layout 01
      • Layout 02
    • Password Page
      • Layout 01
      • Layout 02
    • Other Pages
      • 404 Page
      • Search Page
  • Our Services
    • Theme Installation Service
    • Theme Update Service
    • Theme Development Service
    • Website UI Design
  • Knowledge Base
  • Theme Support
Powered by GitBook
On this page
  • Section settings
  • General
  • Media
  • Main images
  • Thumbnails
  • Sidebar
  • Badge
  • Quantity
  • Sticky add to cart
  • Quick order list
  • Tabs
  • Product bundle
  • Top padding
  • Bottom padding
  1. Product Page

Product Information

PreviousDemo & Settings DataNextProduct Media

Last updated 5 months ago

  1. From your Shopify admin, go to Online Store -> Themes.

  2. Find the theme that you want to edit, and then click Customize.

  3. Choose Products from the dropdown window.

Section settings

General

Settings
Meaning

Section width

Select the layout width of the whole section. The options are: Default (same as the body width) Width (1170px) Width (1770px) Full width (100% of the viewport width)

Padding for 'full width' option on desktop

Determine the left and right spacing of the full width layout.

Enable sticky Product information on desktop/tablet.

Enable sticky Product information on desktop/tablet.

Media

Learn more about

Settings
Meaning

Media fit

Product image ratio

Select the desired ratio of the image: Adapt to image (the original image width and height are adopted) Portrait (the image is cropped to be portrait) Square (the image is cropped to be square)

Portrait aspect ratio

Determine the ratio between the width and height of the image. Note: Only applicable to the portrait option of the product image ratio setting.

Video layout

Select the layout for video media. There are 2 options: Thumbnails Popup

Enable zoom image

Enable the use image zoom function when hovering over the image.

Zoom image style

Select the style for the zoom image function. There are 2 options:

Cursor

Enable custom cursor

Enable the use custom cursor when hovering over the image. Note: When the 'Enable custom cursor' setting is enabled, the Image Zoom feature will be disabled.

Icon color

Set the color for the icon.

Main images

Settings
Meaning

Main image position

Select the display position of the main image. There are 2 options left or right.

Layout

Select the layout for the main image. There are 3 options: Style 1 Style 2 Style 3

Show navigation arrows on desktop

Enable to show navigation arrows on desktop.

Show navigation arrows on mobile

Enable to show navigation arrows on mobile

Show slide counter on mobile

Enable to show slide counter on mobile.

Show parallax on mobile

Enable to show parallax on mobile.

Show zoom icon on mobile

Enable to show zoom icon on mobile.

Thumbnails

Settings
Meaning

Show thumbnails on mobile

Enable to show thumbnails on mobile.

Desktop layout

Select the display position of the thumbnail relative to the main image. There are 4 options:

Show thumbnails on the left

Show thumbnails on the right

Show thumbnails on the bottom Hide thumbnails

Maximum thumbnails to show

Determine the maximum number of images displayed on thumbnails.

Sidebar

The sidebar displays when blocks with the prefix [Sidebar] are added.

Settings
Meaning

Enable sticky sidebar

Enable to show sticky sidebar.

Layout

Choose the layout for the sticky sidebar. There are 2 options: Layout 1 Layout 2

Collapsible block style

Choose the collapsing styles of the blocks on the sidebar. There are 3 options: Dropdown Swipe right (on mobile) None

Collapsible

Choose how to display blocks when the page first loads. There are 2 options: Expanded by default Closed by default

Position

Select sidebar position to display on left or right.

Block heading

Font family

Set font family for heading.

Font size

Set font size for heading.

Font weight

Set font weight for heading.

Text style

Set text transform for heading.

Badge

Settings
Meaning

Show product badges

Enable to show product badges.

Quantity

Settings
Meaning

Show subtotal

Enable to show subtotal.

Style

Select the style for subtotal. There are 2 options: Style 1 Style 2

Sticky add to cart

Settings
Meaning

Enable sticky add to cart

Enable to show sticky add to cart.

Style

Select the style for sticky add to cart. There are 2 options: Style 1 Style 2

Always show sticky add to cart on Mobile

Enable to always show sticky add to cart on mobile. Note: Only applicable when the 'Style' setting is set to Style 1.

Show vendor

Enable to show the vender on sticky add to cart.

Quick order list

Settings
Meaning

Show quick order list

Enable to show the quick order list.

Show images

Enable to show the images on the quick order list.

Show SKUs

Enable to show the SKUs on the quick order list.

Tabs

Settings
Meaning

Show tabs

Enable to show the product tabs.

Desktop layout

Select the desktop layout for product tabs. There are 4 options: Vertical Vertical with sidebar Horizontal Popup

Mobile layout

Select the mobile layout for product tabs. There are 3 options: Vertical Vertical with sidebar Popup

Vertical layout style

Select the style for the vertical layout if you choose this option.

Tab titles

Font size

Set font size for the tab titles on desktop.

Font size on mobile

Set font size for the tab titles on mobile.

Font weight

Set font weight for the tab titles.

Text style

Set text transform for the tab titles.

Top/Bottom padding

Determines the height of the top and bottom inner space of the tab item.

Border color

Set the color for the border of tab titles. Note: Only applicable when the 'Style' setting is set to Style 1.

Border gradient color

Set the gradient color for the border of tab titles.

Product bundle

Settings
Meaning

Enable Product Bundle

Background

Set the background color for the product bundle.

Title

Enter the title for the product bundle.

Title alignment

Select the alignment of the title to be either Left, Right, or Center.

Product items

Style

Select the style for product items.

Image ratio

Select the desired ratio of the image: Adapt to image (the original image width and height are adopted) Portrait (the image is cropped to be portrait) Square (the image is cropped to be square)

Discount

Enable bundle discount

Enable to show the bundle discount.

Text

Enter the text for more info. Note: Use [discount] to show the discount rate.

Text color

Set the color for more info text.

Add all to cart button

Label color - Border color - Background color - Background gradient - Label hover color - Border hover color - Background hover color - Background hover gradient

Set the text color, background, and border color for both the normal and hover states of the add all to cart button.

Slider layout

Show navigation dots

Enable to show the navigation dots.

Show navigation arrows

Enable to show the navigation arrows.

Top padding

Desktop

Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Tablet

Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Mobile

Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Bottom padding

Desktop

Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Tablet

Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Mobile

Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Top padding

Settings
Meaning

Desktop

Determines the height of the top inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Tablet

Determines the height of the top inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Mobile

Determines the height of the top inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Bottom padding

Settings
Meaning

Desktop

Determines the height of the bottom inner space of the section on the desktop device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Tablet

Determines the height of the bottom inner space of the section on the tablet device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

Mobile

Determines the height of the bottom inner space of the section on the mobile device. Can be from 0px to 100px, increasing arithmetically of 5px (pixel).

You can drag & drop all blocks in Product Information to arrange the position you want.

Select the main image crop type. There are 3 types: Original: The image will keep its current scale ratio to adapt. Fit content: The image will scale to cover up the full area of set product card image with retained ratio. Fill: The image will scale to scale up until the width or height reached the width or height of the set product card image with retained ratio. Note: Learn more about .

Enable to show the product bundle. Note: Learn more .

media types
media fit
product bundle