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
  • Countdown
  • Grid layout
  • Slider layout
  • Scroll layout
  • Banner color
  • Categories block
  • Section top padding
  • Section bottom padding
  • Block settings
  • [BLOCK] Banner
  1. SECTIONS
  2. All Sections in Theme

Product Block

PreviousPolicies BlockNextProduct Block Duo

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 "Product block".

Section settings

General

Settings
Description

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

Determines the left and right padding of the full width layout.

Remove content right padding

Sets the width of the padding area on the right of an element is 0.

Show top border

Toggle to show/hide the bottom border of the section.

Show bottom border

Enable to displays a horizontal line to separate sections

Border height

Determines the border thickness.

Border color

Sets the color of the bottom border.

Enable negative top margin

Toggle to let spacing accepts minus value, so the section will overlap on the top section if any. Note: Move this section to overlap the section above.

Negative top margin

Determines how much the section moves upward.

Layout

Select a layout for the product block: Grid Slider Scroll

Background color

Sets the background color of the section background.

Background gradient

Sets the background gradient of the section background.

Background image

Upload/Select an image as the section background.

Collection

Select a collection that you want show in this section.

Maximum products to show

The number of products from the collection to display. Minimum: 1. Maximum: 20.

Grid gap

Determines the gap between each product item.

Product block style

Select a style for the product block:

Style 1 Style 2 Style 3

Note: Style 3 is only used when 'products per row' is 1

Section header

Style

Select a layout for the header block: Style 1 (When there is a banner, this style will appear inside the products container) Style 2 Style 3 (When there is a banner, this style will appear across the entire section's container) Style 4

Title

The title for the section.

Show title border

Allows displaying the top or bottom border of the title depending on the style of the Header Block.

Show title underline

Enables the display of underlines of title text. Note: Only applicable for style 2.

Title font size

Determines the font size of the title on the tablet and desktop devices.

Title font size on mobile

Determines the font size of the title on the mobile devices.

Title top margin

Determines the spacing of the title from the line on the its top. Note: Only applies to style 4 and the title has a top border.

Title bottom margin

Determines the spacing of the title from the bottom content on the tablet and desktop devices.

Title bottom margin on mobile

Determines the spacing of the title from the bottom content on the mobile devices.

Title border color

Sets the color of the title border.

Title color

Sets the color of the title.

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.

View all

Enter the text for the view all link.

'View all' alignment

The alignment of the view all link within container of the Header Block.

'View all' font weight

Select the font weight of the view all link text to be either Normal, Medium, Semibold, Bold, Extra bold, or Black.

'View all' bottom margin

Determines the spacing bottom of the view all link on the tablet and desktop devices.

'View all' bottom margin on mobile

Determine the spacing bottom of the view all button on the mobile devices.

Show 'view all' border

Enables the display of underlines of the view all link text.

'View all' link

Specify the link for the view all link to redirect to.

'View all' link color

Sets the color of the view all link text.

'View all' icon

Enter the SVG icon that stands next to the view all link text.

'View all' icon color

Sets the color for icon of the View All link.

Show more button

Button label

Enter the text for the Show More button. Note: Only applicable for grid layout.

Font size

The font size of the Show More button text.

Font Weight

Select the font weight of the Show More button text to be either Normal, Medium, Semibold, Bold, Extra bold, or Black.

Text style

Specifies how to capitalize of the Show More text.

Button width

Determines the width of the Show More button.

Top padding

Determines the height of the top inner space of the Show More button.

Bottom padding

Determines the height of the bottom inner space of the Show More button.

Button icon

Enter the SVG icon that stands next to the Show More button text.

Top margin

Adjust the space between the top edge of the Show More button and the elements or content above it.

Show button shadow

Enables the shadow of the Show More button.

Label color

Sets the color of the Show More button text.

Border color

Sets the border color of the Show More button.

Background color

Sets the background color of the Show More button.

Background gradient

Sets the background gradient of the Show More button.

Label hover color

Sets the color of the Show More button on hover states.

Border hover color

Sets the border color of the Show More button on hover states.

Background hover color

Sets the background color of the Show More button on hover states.

Background hover gradient

Sets the background gradient of the Show More button on hover states.

Countdown

Settings
Description

Countdown style

Select the style of the countdown. There are 2 styles: Under the title Beside the title

Countdown end date

Enter the due date for the countdown. Please use this exact format: yyyy/mm/dd hour/minute/second. Example: 2021/12/4 0:0:00.

Countdown text font size

The font size of the coundown text.

Countdown color

Sets the color of the coundown.

Countdown bottom margin

Adjust the space between the bottom edge of the countdown block and the elements or content below it.

Grid layout

Settings
Description

Products per row

Select the column count for the grid.

Show infinite scroll feature

Toggle the feature to automatically load more products when user scrolls to the bottom of the grid.

Enable swipe on mobile

Turn the grid to built-in slider on mobile device.

Enable bottom padding for product card

Toggle to apply the below 'Product Card Spacing Bottom' setting.

Bottom padding for product card

Determines the bottom spacing of the product card.

Slider layout

Settings
Description

Show navigation dots on desktop

Toggle the paginating dots on Desktop.

Show navigation dots on mobile/tablet

Toggle the paginating dots on Tablet and Mobile.

Top margin of the navigation dots

Determines the spacing of the dots from the slider.

Show navigation arrows on desktop

Toggle the navigation arrows on Desktop.

Show navigation arrows on mobile/tablet

Toggle the navigation arrows on Mobile.

Show navigation arrows on hover

Show arrows when hovering over this section.

Show scroll bar

Show the progress bar for the slider. Progress bars give visitors a visual indicator of how much product is left on the current slide. As the slide, the bar will gradually fill up.

Show slide counter

Displays the number of products on the current slide compared to the total number of products on the slide.

Enable infinite looping for slider

Enables infinite looping of the carousel slides and scrolling through them continuously. It automatically restarts from the beginning when it reaches the end.

Autoplay on mobile

Toggle slides to auto-play on mobile.

Enable custom positioning of navigation arrows on desktop

Toggle to enable custom positioning of navigation arrows on the desktop.

Vertical position (unit % or px)

Enter the position of the arrows relative to the top of the slider.

Use special arrow position

Toggle to use special position for arrow on destkop.

Spacing bottom

Determines the right distance of the arrows.

Spacing right

Determines the bottom distance of the arrows.

Products per row

The number of product columns per row.

Button label

Enter the text for the button.

Button link

Specify the link for the button to redirect to.

Button width

Determines the width of the button.

Button top margin

Determines the top distance of the button.

Scroll layout

Settings
Description

Products per row

The number of product columns per row.

Show a part of product on the right side

Toggle to show a partial of product at the scroll box's edge.

Scrollbar

Height

Determines the height of the scroll bar.

Track background color

Sets the color for the background of the scrollbar, which is generally fixed regardless of the scrolling position.

Thumb background color

Sets the background color for the moving part of the scrollbar, which usually floats on top of the track.

Thumb background hover color

Sets the background color on hover states for the moving part of the scrollbar.

Banner color

Settings
Description

Desktop position

Select the position of the banner to be to the Left or Right of the products. Note: Position is automatically optimized for mobile.

Width on desktop

Set the width of the banner. The remaining width is for the products layout.

Show image on mobile

Toggle to show or hide the image on mobile.

Categories block

Settings
Description

Show categories block

Toggle to show the block.

Text color

Sets the color of the text on this block.

Text hover color

Sets the color on hover states of the link on this block.

Background color

Sets the background color of this block.

Background gradient

Sets the background gradient of this block.

Button label

Enter the text for the button.

Button link

Enter URL for the button to redirect to.

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] Banner

Settings
Description

Image

Upload/Select image for the banner block.

Link

Enter the URL for the banner.

Image height

Select the image height:

Auto: adapt to the Image ratio. Full Height: Set the height of the image to the height of the product block.

Enable image zoom on hover

Toggle the feature to zoom in image on hovered.

Corner radius

Determine the roundness of the image.

Content alignment

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

Content position

Select the vertical alignment of the text content to be either to the Top, Middle or Center.

Content top/bottom padding

Determine the top and bottom spacing of the text content relative to the image's top/bottom based on the alignment. Note: Only applies when the 'content position' setting is set to top or bottom.

Content left/right padding

Determine the left and right spacing of the text content relative to the image's left/right based on the alignment. Note: Only applies when the 'content alignment' setting is set to left or right.

Heading

The heading of the banner.

Heading font size

The font size of the heading on the tablet and desktop devices.

Heading font size on mobile

The font size of the heading on the mobile devices.

Heading bottom margin

Determines the bottom spacing of the heading.

Heading color

Sets the color of the heading.

Subheading

The subheading of the banner.

Subheading font size

The font size of the subheading on the tablet and desktop devices.

Subheading font size on mobile

The font size of the subheading on the mobile devices.

Subheading bottom margin

Determines the bottom spacing of the subheading.

Subheading color

Sets the color of the subheading.

Description

The description for the banner block.

Description font size

The font size of the description.

Description color

Sets the color of the description.

Button label

The text that displays on the button.

Button label color

Sets the color of the button text.

Button border color

Sets the border color of the button.

Button background color

Sets the background color of the button.

Button background gradient

Sets the background gradient of the button.

Button label hover color

Sets the color of the button on hover states.

Button border hover color

Sets the border color of the button on hover states.

Button background hover color

Sets the background color of the button on hover states.

Button background hover gradient

Sets the background gradient of the button on hover states.

Customize button position

Customize the position of the content. Note: These settings are only used for desktop.

Button horizontal position (unit %)

The horizontal position of the content on desktop. Calculated in % of banner width.

Button vertical position (unit %)

The vertical position of the content on desktop. Calculated in % of banner height.

Video

A video from youtube or vimeo on desktop

Enter the URL of a YouTube or Vimeo video.

Aspect ratio (unit %)

Enter the aspect ratio to show the video block.

Icon

Select the video style icon.

Style 1: the play button is a triangle. Style 2: the play button is wrapped in a circle.

Icon color

Sets the color of the video icon.

Icon background color

Sets the background color of the video icon.

Customize icon position (unit %)

Customize the position of the video icon.

Icon horizontal position (unit %)

The horizontal position of the video icon on desktop. Calculated in % of banner width.

Icon vertical position (unit %)

The vertical position of the video icon on desktop. Calculated in % of banner height.

Icon horizontal position on mobile (unit %)

The horizontal position of the video icon on mobile. Calculated in % of banner width.

Icon vertical position on mobile (unit %)

The vertical position of the video icon on mobile. Calculated in % of banner height.

[BLOCK] Categories

Settings
Description

Image

Upload/Select the image for the block.

Text

Enter text for the block title.

Button label

Enter the text for the button.

Button link

Specify the link for the button to redirect to.

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

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

find your icon
find your icon
Grid Layout without Image
List Layout without Image