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
    • Newsletter 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
    • 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
  • 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
      • Rich Text
      • Slideshow
      • Search Block
      • Spotlight Block
      • Special Banner
      • Spotlight Products
      • Slidable Spotlight
      • Sticky Scrolling Banner
      • TikTok Video
      • Video
      • Visual Lookbook
    • Product Combo
  • 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?
  • 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
  • Product
  • Main image
  • Thumbnails
  • Media
  • Product badges
  • Section top padding
  • Section bottom padding
  • Block settings
  • [BLOCK] Title
  • [BLOCK] Meta
  • [BLOCK] Description
  • [BLOCK] Price
  • [BLOCK] Custom block
  • [BLOCK] Variant picker
  • [BLOCK] Buy Buttons
  • [BLOCK] Quantity
  • [BLOCK] Quantity
  • [BLOCK] Countdown
  • [BLOCK] Vendor
  • [BLOCK] Hot stock function
  1. SECTIONS
  2. All Sections in Theme

Featured Product

PreviousFeatured CategoriesNextFAQs

Last updated 5 months ago

To add this section, please follow below steps:

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

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

  3. Click Add section and choose "Featured product".

Section settings

General

Settings
Meaning

Section ID

Enter the Section ID to match the Menu link to enable the scroll to Section feature. Note: Enter the section ID to match the menu link and enable the scroll-to-section feature.

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.

Show sticky product information on large screen

Show Sticky Product Information On Large Screens

Background color

Set color for the section background.

Section header

Title

Enter in the title for the section.

Title color

The color of the section title.

Title font size

Specify the font size of the title.

Title font size on mobile

Specify the font size of the title on mobile.

Title bottom margin

Determine the spacing of the title from bottom on Desktop.

Title bottom margin on mobile

Determine the spacing of the title from bottom on Mobile.

Alignment

Select the position of the title to be either to the left, right or center of its container on desktop.

Alignment on mobile

Select the position of the title to be either to the left, right or center of its container on mobile.

Description

Enter the text for the description.

Description color

Apply a color to the description.

Description font size

Specify the font size of the description on desktop.

Description bottom margin

Determine the spacing of the description from bottom.

Description bottom margin on mobile

Determine the spacing of the description from bottom on Mobile.

Alignment

Select the alignment of the header text to be either to the Left, Center or to the Right of the section.

Product

Settings
Meaning

Product

Choose a product to show

Main image

Settings
Meaning

Show navigation arrows on desktop

Toggle the navigation arrows on Desktop.

Show counter on mobile

Show above next arrow of slider. (Position current of item on slider / total items.)

Layout

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

Main image position

Select the position of the main image: left/right.

Background image

Upload/Select an image as the main image background

Thumbnails

Settings
Meaning

Desktop layout

Select layout thumbnail. There are 3 layouts:

Show thumbnails on the left Show thumbnails on the right Hide thumbnails

Show thumbnails on mobile

Toggle the Thumbnail on Mobile.

Maximum thumbnails to show

Limit the maximum number of thumbnails to display.

Active thumbnail color

Apply a color to the thumbnail active.

Navigation arrows color on mobile

Apply a color to the navigation arrows on Mobile.

Background color

Apply a color to the background.

Media

Settings
Meaning

Media fit

Select the product card 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.

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 width and height of the image. Note: Only applicable to the portrait option of the product image ratio setting.

Image popup

Select the gallery popup when clicking the main image. There are 2 options: No popup

Open fancybox

Video layout

Select the video layout There are 2 options: Thumbnails

Popup

Product badges

Settings
Meaning

Show product badges

Toggle to show or hide the Badges on the main image.

Section 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 200px, 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).

Section 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 200px, 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).

Block settings

[BLOCK] Title

Settings
Meaning

Font size

The font size of the section title on tablet and desktop devices.

Font size on mobile

The font size of the section title on mobile devices.

Text color

The color of the section title.

Top padding / Bottom padding

Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Meta

Settings
Meaning

Show sold in last period

Toggle the Show Sold In Last Function.

Product quantity list

Enter the number of products sold. Example: 3,5,6,7,8,10,12,15. Separate quantities with a comma (,).

Hours

Enter the number of hours since the product was last sold. Example: 10,15,16,17,18,20,25,35. Separate hours with a comma (,).

Text color

Apply a color to the text.

Top padding / Bottom padding

Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Description

Settings
Meaning

Show short description

Toggle to show the short description.

Short description word count

Limit the description word count to truncate. Example: 17

Font size

Specify the font size of the description.

Text color

Apply a color to the description.

Top padding / Bottom padding

Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Price

Settings
Meaning

Font size

Specify the font size of the price.

Style

Select the style for the price. Note: For products to have a compare price.

Sale price color

Apply a color to the sale price. Note: For style 2.

Top padding / Bottom padding

Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Custom block

Settings
Meaning

Title

Enter in the title for the block.

Icon

Description

Enter the text for the description.

Font size

Specify the font size of the description.

Content padding

Determines the padding of the block from its top, right, bottom, left block separately.

Content alignment

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

Text color

Apply a color to the text.

Background color

The background color of the block.

Background gradient

The background gradient of the block.

Top padding / Bottom padding

Determines the spacing of the block from its top and bottom block separately.

[BLOCK] Variant picker

Settings
Meaning

Type

Select the option type for the variant picker. There are 2 types: Dropdown

Square / Rectangle / Swatch

Show variant image grouped

Toggle variant image grouped

Style

Select the style for the variant picker layout.

Font size

Specify the font size of the label variant picker.

Text color

Apply a color to the label variant grouped.

Show top border

Toggle border top

Show bottom border

Toggle border bottom

Border color

Apply a color to the border.

Top padding / Bottom padding

Determines the spacing of the block from its top and bottom block separately.

[BLOCK] Buy Buttons

Settings
Meaning

Dynamic checkout buttons

Show dynamic checkout buttons

Toggle to show or hide the dynamic checkout buttons.

Font size

Specify the font size of the Terms & Conditions checkbox.

Text color

Apply a color to the label.

Border color

Apply a border color to the label.

Quantity

Text color

Apply a color to the label.

Icon color

Apply a color to the icon.

Input color

Apply a color to the input.

Input background color

Apply a color to the input background.

Wishlist

Icon color

Apply the color to the wishlist icon.

Border color

Apply the border color to the wishlist button.

Background color

Apply the background color to the wishlist button.

Icon hover color

Apply the color to the wishlist icon for hover state.

Border hover color

Apply the border color to the wishlist button for hover state.

Background hover color

Apply the background color to the wishlist button for hover state.

Add to cart action

Animation

Select the animation of the button. There are 4 options: None Tilt shaking Vertical shaking Horizontal shaking

Text color - Border color - Background color - Background gradient - Text 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 to cart action' button.

Buy it now action

Text color - Border color - Background color - Background gradient - Text 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 'Buy it now action' button.

Top padding / Bottom padding

Determines the spacing of the block from its top and bottom block separately.

[BLOCK] Quantity

Settings
Meaning

Style

Select the style for the quantity. There are 2 styles: Button Box

Layout

Select the layout for the quantity. There are 2 layouts: Movable Fixed Note: The quantity block cannot be moved up or down if the layout setting is set to fixed.

Font size

Specify the font size of the quantity label.

Movable layout

Text color

Apply a color to the label.

Icon color

Apply a color to the icon.

Input color

Apply a color to the input.

Input Background Color

Apply a color to the input background.

Top padding / Bottom padding

Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Quantity

Settings
Meaning

View Detail

Enter the text.

Font size

Specify the font size of the text.

Text color

Apply a color to the text.

Top padding / Bottom padding

Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Countdown

Settings
Meaning

Top padding / Bottom padding

Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Vendor

Settings
Meaning

Font size

Specify the font size of the vendor.

Text color

Apply a color to the vendor.

Text style

Transform the description to be None, Capitalize, Uppercase or Lowercase.

Top padding / Bottom padding

Determine the spacing of the block from its top and bottom block separately.

[BLOCK] Hot stock function

Settings
Meaning

Style

Select Style for Hot Stock Function. There are 2 options:

Text

Text with progress bar

Color

Apply a color to the text.

Top padding / Bottom padding

Determine the spacing of the block from its top and bottom block separately.

Learn more about .

Enter the SVG icon that stands next to the title. Note: Go to this link . Find the icon you want, then copy the SVG code and paste it here.

media types
find your icon