Install #1 Page Builder App for FREE and get deal 6 months of Standard Plan. Hurry up! See Detail  

Header background

Ecomus - Theme Settings - Product card

Mie Tran

Written by Mie Tran

Last updated

2000 views

On this page


In Shopify, a product card is a visual snapshot of a product, displaying essential details like image, title, and price. It streamlines the shopping experience by providing key information without requiring users to visit a separate product page, enhancing the overall user interface design.

To configure it, you will access Theme Settings > Product card.

2023-12-28_15-58-32.gif

1. Product Image

There are many options to config Product image:

  • Show secondary image on hover: Disable this option if you want to show 1 image for product.

  • Effect secondary image: There are 6 effects None, Opacity, Zoom, Move top to bottom, Flip, Rotate

  • Product image custom ratio: An image's aspect ratio is the ratio of its width to its height. You will change ratio in the section.

2. Product buttons

  • Show quick view

  • Show ultra button: Ultra buttons are Quick add, Choose options, Add to cart, View product.

  • Show quick add: Requires showed ultra button

  • Show quantity selector: Requires showed ultra button and only show with button add to cart. Quantity selector button shows with Product Design 2,3,4,6,7,10

product buttons.gif

3. Product Info

  • Text alignment: This option allows you change align text to Left, Center or Right.

  • Show rating: To display a rating, add a product rating app.

Produc info.gif

4. Color list

  • Color display mode: There are 3 options Hide, Count or Color List.

  • Show color type: This option allows you show All color or Only color available.

Untitled design.png

Config below, requires color display mode is color list.

  • Color shape: There are 2 options Square or Circle

  • Color image source: There are 2 options Variant images or Custom images

  • Change product image when click swatch on event: Swatch color will change when you Hover or Click

  • Enable color limit: You can limit the swatch color to show with options below.

Maximum color to show: 0 to responsive auto number. Requires color limit is enabled.

Action after color view more is clicked: You have two options for it Expand all color or Go to product page. The require color limit is enabled.

5. Size list

  • Size display mode: Hide, Count or Size list

  • Show size type: All size or Only size available

6. Miscellaneous

Remove collection URL: Remove the collection portion from product URLs for better SEO.

7. Options for products on mobile

  • Enable minimal product infos: Hidden countdown product, color, size list ...

Group product buttons.Only work on mobile

  • Hidden add to cart on mobile

  • Hidden quickview on mobile

  • Hidden wishlist on mobile

  • Hidden compare on mobile

[Private Offer] EComposer Partner Plan

ecomposer.jpg
Exclusively for The4 users, when you bougth any theme from us, you can get Ecomposer - Theme Partner Plan for ZERO and start making beautiful, high-converting store pages today:

  • FREE 100% EComposer Standard plan for 6 months (save you $114)
  • Build ANY Shopify pages: Landing page, Sale Funnel page, Lead pages, & other custom pages tailored for your marketing campaigns.
  • Create advanced sections & add to your theme with ease
  • 100+ professtional, stunning designer-made templates
  • Build pages with a love drag-drop editor, no coding required

How to claim offer. Install EComposer HERE. Then open chatbox icon in EComposer dashboard and leave a message with subject "Theme name+EComposer" to upgrade for free

Ecomposer1.jpg
Cheers, The4.

Enjoy a free 3-day trial. Then get your first month for $1. Try Now

We uses cookies to ensure you get the best experience on our website.