Product cards

The Product Cards settings in the Ignite theme allow for detailed customization of how products are displayed across your store. These settings are crucial for creating a visually appealing and cohesive shopping experience that can drive conversions and enhance user engagement.

1. Navigate to the Theme Editor: From your Shopify admin dashboard, go to Online Store and click on Themes. Find the Ignite theme and click Customize.
2. Navigate to Product Cards Settings: In the theme editor sidebar, click on Theme settings and click on Product cards.
3. Adjust Card Style: Choose either ‘Standard or ‘Card’. The style selected here will feature throughout your store.
   Standard:
   
   Card:
   
4. Customize Image Settings: Configure the image aspect ratio and decide if images should fill the available space or not. This setting is important for maintaining the visual quality of your products across different display sizes.
   
5. Set Text Alignment: Choose how the text on your product cards is aligned – either left, center or right alignment. This will affect the product name, price and other details on your store.
6. Manage Display Options: Determine which elements to show on your product cards, such as vendor names or ratings. This customization helps you provide the necessary information at a glance to enhance shopping decisions.
7. Apply Color and Typography Settings: Adjust the color schemes and fonts used on your product cards to ensure they align with your overall store design.
8. Preview and Test: Always preview changes within the theme editor to ensure that the product cards look appealing and function well on both desktop and mobile devices.
9. Save Changes: After making all necessary adjustments and ensuring that everything displays correctly, click Save to implement the changes across your store.

Swatches

Ignite uses Shopify swatches to display small colored indicators on product cards, as well as on the product page and product filters. For more on setting up swatches, refer to Shopify’s swatch documentation.

Use the settings to customize the look and feel of these swatches in the product cards. Note also, the corner rounding of the swatches can be changed in Theme Settings > Appearance.

Quick Add

Ignite has a powerful and highly customizable Quick Buy popup. The Product Card settings contain the setting necessary to show the Quick Add button.

Note, the contents of the Quick View popup itself is set on the Product Page – by selecting which blocks are visible within Quick View.

Single variant products

The ‘Button for products without variants’ setting will change the Quick Add button for products without variants, or single variant products. These products can be directly added to cart because no variant selection needs to be made, so set this to ‘Add to cart’ to get a card which looks like:

Or set to ‘Quick view’ to still require the Quick Add popup to be opened before adding to cart. In this case, the product card will look like this:

Sold out products

If a product is sold out, the button can also appear differently. Choose from the ‘Button for sold out products’ setting to alter the button seen for these products.

Disabled button:

The button is disabled, and the Quick View cannot be opened.

Quick view:

The Quick View can be opened.

Notification:

The Quick View can be opened, and it is assumed that the ‘Back in stock alert‘ block is prominently positioned within the popup, e.g.

Product badges

Product badges are a great way to draw attention to key product features like limited stock, promotions, or bestselling items. In the Ignite theme, badges appear on product cards throughout your store – such as on collection pages, featured product grids, and other product-based sections.

Types of Product Badges

Our themes offer several types of badges, all managed under Theme Settings > Product badges:

• Sale badge: Automatically shows when a product is on sale (i.e. it has a compare-at price).

• Sold out badge: Automatically shows when a product is out of stock and has no available variants.

• New badge: Shows ‘New In’ text for products in designated ‘new’ collections (set by you).

• Preorder badge: Shows for preorder products.

• Bulk order badge: Shows for bulk order products. To show specific products as ‘Bulk order’, assign the ‘bulk-order’ template to those products.

• Custom badge: A fully customizable badge that you control using product metafields. You choose the text that appears on a product-by-product basis (e.g. “Bestseller”, “Online exclusive”, or “Staff Pick”). More about this in the next section.

You can choose which of these to show, customize the badge style and colors, etc.

Setting Up a Custom Badge

The Custom badge allows you to manually apply unique badge text to individual products.

Here’s how to set it up:

A. Create the metafield

1. In your Shopify admin, go to Settings > Custom data > Products.
2. Click Add definition.
3. Name it something like Custom badge.
4. Set the Namespace and key to:

   custom.badge

5. For Content type, choose Single line text.
6. Save the definition.

B. Add badge text to your products

1. Go to Products in your Shopify admin.
2. Open a product you want to add a custom badge to.
3. Scroll down to the Metafields area.
4. Enter your desired badge text into the “Custom badge” field (e.g. Top Rated).
5. Save the product.

C. Enable/style the custom badge

1. Go to Online Store > Themes, then click Customize for the theme.
2. Open Theme Settings > Product badges.
3. Scroll to the Custom badge section and turn it on.
4. Customize the look and position of your badge as needed.

D. (Optional) Create metafields for custom badge colors per product

To give a product badge a unique color for that product, you can create additional Color metafields using the same method described in step A above:

• Background color

  custom.badge_background_color

• Text (foreground) color

  custom.badge_foreground_color

• Border color

  custom.badge_border_color

Highlight badges

The Highlight badges feature displays small badges on product cards to spotlight unique product attributes – for example, “Wireless charging”, “Voice control”, or “Bestseller”.

To use this feature:

1. Go to Shopify Admin > Settings > Custom data > Products.
2. Create a List of values metafield with the content type Single line text.
3. Set the Namespace and key to: custom.highlights
4. Add one or more values to this metafield on any product you’d like to feature badges for.

Each value will appear as a separate badge on the product card.

You can toggle this feature on or off or change how it looks in Theme Settings > Product cards > Highlight badges.

Also note: Product option badges, found just below Highlight badges in Theme Settings > Product cards, are a very similar feature. Instead of using metafields, these badges display the selected product options (e.g. “Matte Black”, “Small”) directly on the card.