Design Packs Docs
design-packs.comView on Shopify App Store
  • Get started here
  • Guides
    • Adding your first section
    • Adding your first template
    • General settings
    • Helpful hints & resources
    • Troubleshooting
    • Performance
  • Fundamentals
    • Section Settings
      • Setting Solid Background Colors instead of Gradients
      • Understanding Layout Settings: Size & Maximum Width
      • Understanding Inner Padding & Outer Margin Settings
      • Custom Classes Setting
      • Show Individual Variants Setting
      • Enable Metafield Detection Setting
        • Metafield ready sections
        • How to Use Metaobjects on Product template with Image with text - simple section
      • Metafield Badge Setting
      • Using Blog Tags Setting to Show Product-Specific Blog Posts
      • Add custom events when product is added to cart
      • Size Controls for Image & Video Blocks
      • Featured collection - blocks
        • How to use the Liquid Block in "Featured collection - blocks" Section to Add Custom Review Apps
        • How to use the Metafield Image Badge block
        • How to use the Metafield text block
      • Newsletter/Signup Form Block - Tags
      • How to add a Hidden Field in Contact Form
    • Sections
      • Banners & Sliders
      • Flourish
      • Icon & Logos
      • Image with text
      • Menus & Navigation
      • Blocks & Columns
      • Text Content
      • Products & Collections
      • Article sections
      • Galleries
      • Misc
      • Modal Popup
    • Templates
      • Regular Page
      • Lookbooks
      • Blogs
      • Blog Posts
      • Collection
      • Landing pages
    • Custom CSS
      • Basic CSS examples
      • Mobile CSS examples
      • Advanced Examples
    • Shopify expertise
      • Theme editor
      • Metafields
      • MetaObjects
    • How to Guides
      • How to jump/ link to another section on the SAME page
      • How to forward a contact form in Shopify to a different email with Gmail filters
      • How to create new page templates (and keep the original as a starting point)
      • Creating a New Product Template
      • How to set default article template for all blog posts
  • Use Cases
    • For Designers
    • For Developers
    • Agency Licenses
    • Affiliate Program
  • PRODUCT BLOCKS
    • Product Blocks
      • Image with text block
      • Connected products block
      • Variant descriptions block
      • Value icons block
      • Video block
      • Collapsible content block
      • Feature range block
  • Integrations
    • Theme Updater App
Powered by GitBook
On this page
  • Setting Up Your Metafields
  • Adding a Metafield Badge Block
  • Best Practices
  • Troubleshooting
  • Advanced Tips
  • Examples Use Cases
  1. Fundamentals
  2. Section Settings
  3. Featured collection - blocks

How to use the Metafield Image Badge block

The Metafield Image Badge block allows you to display custom badges or icons on your product cards using metafield values. This is perfect for showing certifications, special labels, or promotional badges.

Setting Up Your Metafields

Before using the badge block, you'll need to set up your product metafields:

  1. Go to Settings > Custom data > Products

  2. Click Add definition

  3. Configure your metafield:

    • Type: File reference

    • Namespace: (e.g., "badges")

    • Key: (e.g., "special_offer")

    • Name: (e.g., "Special Offer Badge")

Adding a Metafield Badge Block

  • In your Featured Collection - Blocks section, add a new block

  • Select "Metafield image badge"

  • Configure the following settings:

Basic Settings

  • Metafield namespace: Enter your metafield namespace (e.g., "badges")

  • Metafield key: Enter your metafield key (e.g., "special_offer")

Position Settings

  • Badge horizontal position: -10% to 90% (0% = left edge)

  • Badge vertical position: -10% to 90% (0% = top edge)

  • Badge size: 10% to 100% of product card width

  • Badge angle: -45° to 45° rotation

Animation Settings

  • Rotation: 0-40 seconds (0 = no rotation)

  • Opacity: 10-100%

Image Settings

  • Image aspect ratio: Choose from:

  • Landscape (4:3)

  • Portrait (2:3)

  • Square (1:1)

  • Original

  • Image rounded corners: 0-50%

Mobile Settings

  • Hide on smaller screens: Toggle to hide badges on mobile devices

Best Practices

1. Image Preparation

  • Use PNG files with transparent backgrounds

  • Keep file sizes small (under 100KB)

  • Use consistent dimensions for all badges

  • Positioning

  • Avoid overlapping with product images or text

  • Consider how badges will look at different screen sizes

  • Test positions with various product image aspect ratios

  • Mobile Optimization

  • Consider hiding complex badges on mobile

  • Use smaller badge sizes for mobile displays

  • Test on multiple devices

  • Performance

  • Limit the number of animated badges per page

  • Optimize image files for web use

  • Consider using static badges for better performance

Troubleshooting

If your badge isn't appearing:

  • Verify the metafield namespace and key are correct

  • Check that the product has an image uploaded to the metafield

  • Ensure the badge size is large enough to be visible

  • Check if the position values place the badge within view

  • Verify mobile display settings if testing on smaller screens

Advanced Tips

Layering Multiple Badges

You can add multiple metafield badge blocks to create layered effects:

  • Add separate metafield badge blocks

  • Use different position values

  • Adjust z-index using Custom CSS if needed

Seasonal Badges

Create different metafields for seasonal badges:

  • badges.holiday_special

  • badges.summer_sale

  • badges.new_arrival

Custom CSS Styling

Add these to your section's Custom CSS field:

.dsgn-pck__product-tag--image {
  transition: transform 0.3s ease;
}

.dsgn-pck__product-tag--image:hover {
  transform: scale(1.1);
}

Examples Use Cases

1. Certifications

  • Organic certification badges

  • Fair trade symbols

  • Quality assurance stamps

  • Promotional

  • Sale badges

  • New arrival markers

  • Limited edition labels

  • Product Features

  • Eco-friendly indicators

  • Vegan/vegetarian symbols

  • Award badges

Remember to keep your badges consistent with your brand aesthetic and ensure they enhance rather than overwhelm your product presentations.

PreviousHow to use the Liquid Block in "Featured collection - blocks" Section to Add Custom Review AppsNextHow to use the Metafield text block

Last updated 3 months ago