Sleek
Try Sleek freeResourcesOther solutions
  • What is Sleek theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Sleek theme
    • Set up my store as Sleek demo
    • Update Sleek theme
    • Theme license & Transfer
  • BUILD FOR SUCCESS SERIES
    • Homepage for Health & Beauty 🔥
  • Page's global sections
    • General settings
    • Announcement bar
    • Cart drawer
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Mobile navigation bar
    • Pop-up
    • Quick view
  • Theme sections
    • Before/ After image slider
    • Blog post
    • Card images
    • Collage tabs
    • Collapsible tabs
    • Collection image showcase
    • Collection list
    • Collections showcase
    • Collections slider
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products
    • Feature list
    • Featured product
    • Featured collection
    • Featured products tab
    • Highlight text with image
    • Image gallery
    • Image with text
    • Image with text columns
    • Image with text overlay
    • Layered images with text
    • Lookbook banner
    • Lookbook cards
    • Lookbook slider
    • Media with collection
    • Multicolumn
    • Press
    • Products bundle
    • Product tabs
    • Product showcase
    • Recently viewed products
    • Rich text
    • Scrolling promotion
    • Slideshow
    • Store locator
    • Testimonials
    • Video
    • Video hero
    • Video with text
  • Theme settings
    • General 🔥
    • Animations
    • Buttons
    • Custom CSS
    • Blog cards
    • Cart
    • Collection cards
    • Color swatches
    • Colors
    • Currency format
    • Layout
    • Logo
    • Product cards
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Page sections
        • Breadcrumbs
        • Product information
        • Related products
        • Sticky add to cart bar 🔥
    • Collection page
      • Collection template
      • Collection sections
        • Collection banner
        • Product grid
    • Collections list page
  • Other pages
    • 404 page
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Generic
      • Add gift wrap option to my cart
      • Combined listings app
      • How to add custom fonts in Sleek? 🔥
      • JavaScript events for developers
    • Product
      • Set up quantity rules and volume pricing 🔥
      • Add custom badges using product tags
      • Set up Local Pickup option
      • Show dynamic content for Products using Metafields 🔥
Powered by GitBook
On this page
  • Image settings
  • Content
  • Quick add button
  • Color swatches
  • Sale badge
  • Mobile layout
  1. Theme settings

Product cards

Customize the appearance and functionality of product cards across your store

PreviousLogoNextSearch behavior

Last updated 4 months ago

Steps

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

  2. Locate Product cards.

  3. Make necessary changes.

  4. Save.

Image settings

In this setting, you can choose Style, Content alignment, and Color scheme for all Product cards in the store.

  • Style: Choose the style for product cards as Standard/Card.

  • Content alignment: Define the alignment of the text and elements on each product card as Left/Center/Right.

  • Card color scheme: Set the color scheme for product cards. You can edit the colors in Theme Settings > Colors. Learn more Colors

  • Image ratio: Adjust the aspect ratio of the product images to fit your preference.

    • Adapt to image

    • Square (1:1)

    • Portrait (3:4)

    • Landscape (4:3)

Content

Decide what to show on your product cards, including:

  • Show the second image on hover: Enable this to show the second product image when a customer hovers over a product card.

  • Show vendor: Display the vendor name on the product card.

  • Show type: Show the product type on the card.

  • Show sold out badge: Display a "Sold Out" badge on out-of-stock products.

Go to Actions > Edit default theme content to change the label of the sold out badge.

To change the badge colors, go to Theme settings > Colors.

Quick add button

In the Button Settings, you can enable/ disable:

  • Quick add button: Let customers add items to their cart without visiting the product page (only for products without variants).

For products with variants, the button will become a "Choose options" button.

  • "Choose options" action:

    • Open popup: Open a Quick View popup with the detailed product information.

    • Go to product page.

  • Quick view button: Allow customers to preview product details in a quick view modal without leaving the page.

To customize your Quick view, see Quick view

Color swatches

Select the option Enable color swatches to display color swatches for product with multiple color variants.

Make sure you have entered your Color swatch trigger in Theme settings > Color swatches

  • Set the number of maximum swatches to show in the product cards: between 1-6.

For products that have more colors than the maximum number you set, the other swatches will be displayed as numbers.

  • Swatch type: Choose between custom color swatch, Shopify swatch, or variant image (each variant must have a corresponding image).

Sale badge

  • Show sale badge: Display a sale badge for products with a discount (Compare-at price).

  • Sale badge type: Choose the badge type (Text, Percentage, or Fixed amount).

Mobile layout

  • Hide Quick add button on mobile: Hide the quick add button for mobile views to streamline the mobile shopping experience.

See

✍️ Learn how they are different:

4. Variant picker
Badges
Source:
Install FoxTransfer Chrome Extension FREE here
Sleek Jumped demo