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
  • 1. Layout and image
  • 2. Variant options
  • 3. Content and Badges
  1. Theme settings

Product card

Change layout, content and display variant options

PreviousPop-up & drawerNextProduct options design

Last updated 3 months ago

Steps

  1. In the theme editor (Customize), click Theme settings

  2. Locate Product card

  3. Make necessary changes

  4. Save.

1. Layout and image

Card style

There are 5 styles to select from:

Content alignment

The product card's content can be set as center-aligned, left-aligned, or right-aligned and show border.

Image

Set the suitable Aspect ratio for your image card. There are 4 options:

  • Adapt to image

  • 1:1 (square image)

  • 3:4

  • 4:3

  • 16:9

2. Variant options

Enable or disable showing variants in product items and how they display on the front store.

Only one product option can be shown on the product card.

3. Content and Badges

Control what to show on the product card.

Content

  • Add to cart button: let customers add items to the cart without leaving the current page.

  • Quickview button: let customers preview product basic information without going to the product page.

  • Wishlist button: let customers add their favorite products to the list.

  • Compare button: let customers add products to the comparison page to check the differences and similarities among stores' products.

See how to set up Wishlist and Compare page here: Additional pages

  • Countdown: display time when there is an event for the product to release/discount.

  • Actions when clicking the Select options button: It either pops up the Select options dialogue or goes directly to the product page.

Badges

  • Sale badge: hide or show the sale badge in % discount or text.

  • Sold-out badge: display badge to let customers know which products are out of stock.

The sale badge and sold-out badge labels can be edited in Actions > Edit default theme content.

Product titles

  • Show vendor: display vendor/brand names under the product title.

  • Capitalize product name.

  • Product title line limit: control the maximum line of the product titles as No limit/1 lines/2 lines/3 lines.

Product prices

Show lowest prices: display the lowest prices of each product as 'From ...'

Reviews badge: display ratings from the customers ( is required).

Custom badges: display/hide other badges rather than sale and sold-out badges. To display custom badges, you need to add tags to your products, see .

A review application
Product tags