Megamog
Try Megamog freeResourcesOther solutions
  • What is Megamog theme?
  • Changelog
  • Refund policy
  • Support policy
  • Terms of Service
  • Getting started
    • Install Megamog theme
      • Install Megamog in 1-click fast way
      • Install Megamog manually
    • Add Custom code/ CSS correctly
    • Integrate Shopify Review apps
    • Mega menu
    • Purchase code & activation
    • Update Megamog theme
    • FoxHome
  • Build for success series
    • Product page for Beauty store like Kylie Jenner 🔥
    • Landing page for Fashion store like Bremont
  • Page's global sections
    • Announcement bar
    • Age verifier pop-up
    • Header
    • Footer
    • Mobile sticky bar
  • Theme sections
    • Before/ After image slider
    • Blog posts
    • Brand list
    • Collapsible content
    • Collection spotlight
    • Collection list
    • Collection links
    • Countdown timer
    • Custom content
    • Favorite product slider
    • Featured collection
    • Featured product
    • Featured promotion
    • Featured products slider
    • Google Maps
    • Image banner
    • Image with text
    • Instagram
    • Lookbook
    • Newsletter
    • Press
    • Product tabs
    • Recently viewed products
    • Scrolling promotion
    • Slideshow
    • Testimonials
    • Video
    • Video hero
    • Banner grid
    • Multiple columns
    • Store locator
  • Theme settings
    • General settings
    • Layout settings
    • Additional pages
    • Advanced
    • Animation
    • Article card
    • Badges
    • Cart settings
    • Checkout
    • Colors & Color schemes
    • Corner radius
    • Currency format
    • GDPR settings
    • Intergrated apps
    • Integration
    • Pop-up & drawer
    • Product card
    • Product options design
    • Product options swatches
    • Social sharing
    • Search settings
    • Store contact
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Page sections
        • Breadcrumb
        • Product information
        • Product information tabs
        • Product recommedations
    • Collection page
      • Collection template
      • Collection sections
        • Collection banner
        • Product listing
  • Other pages
    • 404 page
    • Blogs
    • Blog posts
    • Cart & Checkout
    • Password
  • FAQS
    • Add a gift wrap option to my cart
    • Add custom badges to my product card
    • Add recipient fields to my gift card product
    • Add/ Remove Social icons in footer
    • Change the default product order in collection
    • Customize search results
    • Move the collection description to under the product listing
    • Remove the tax-included information in product page
    • Set up local pickup
    • Show Payment icons on the Footer
  • TROUBLESHOOTING
    • Contact form submissions not found
    • Translation apps incompatibility
Powered by GitBook
On this page
  • Section settings
  • Layout settings
  • Section header setting
  • Product cards settings
  • Grid settings
  • Slider settings
  • Mobile settings
  • View more button
  • Block settings
  • Tab block settings
  • Image card settings
  1. Theme sections

Product tabs

Featured products from a handpicked collection

PreviousPressNextRecently viewed products

Last updated 3 months ago

Display your products from a selected collection in an engaging and attractive section.

Steps

  1. In the theme editor (Customize), click Add section

  2. Locate Product tabs

  3. Save

Section settings

Layout settings

Enable boxed layout for your section and the Grid bordered if needed.

You can also set the Color scheme for your Boxed layout.

Section header setting

Insert your section's heading, its size, and select the tab header style.

Tab header styles include:

Product cards settings

Select your Product card's design layout and its image aspect ratio.

You can also show the product vendors in this section.

Grid settings

Select the number of shown products (4-18 products) and the number of products per row (3-8 products).

Then, adjust the gap between columns and rows accordingly (0-50px).

Slider settings

You can check the Enable slider option to make your product list appear as a slider (the number of products to show > the number of products per row).

Show the pagination or navigation, or both to let visitors navigate the slider.

Navigation can be added Outside container/ Inside container/ Inline.

Mobile settings

Adjust how the section displays on mobile view.

  • Mobile layout: Inherit/ 1 column/ 2 columns;

  • Column gap on mobile view (0-50px);

  • Row gap on mobile view (0-50px);

  • Enable swipe on mobile or not.

View more button

The view more button is used to redirect visitors to the collection page.

Give your button a label and select the button style. If you don't want to show the view more button, simply leave the label blank.

Block settings

In the Product tabs section, you can add Tab blocks and an Image card.

Tab block settings

Select the collection you want to showcase in the tab.

Give the tab a heading.

You can also add an icon before your heading and adjust the icon width if needed.

Image card settings

You can select/upload the image for the desktop and mobile view separately.

Give the image a link and select how the link is applied (on the whole image card or just the CTA button).

Then, you can add content to your card using the Heading, Subheading, and Description text fields.

Select the position of the card content and its alignment.