Product Badges & Color Swatches
The Emoll theme includes built-in support for Product Badges and Color Swatches to enhance product presentation. Product badges help highlight promotions such as sales, discounts, or stock status, while color swatches allow customers to visually select product variants using color samples instead of text options. These features improve the shopping experience and make product browsing more engaging.
Product Badges
Product badges in the Emoll theme help highlight important product information such as discounts, sale offers, or stock status. These badges make products stand out in the collection and product pages, helping customers quickly identify promotions and special deals.
How to Enable Product Badges
- Log in to your Shopify Admin.
- Go to Online Store >> Themes.
- Click Customize on the Emoll theme.
- Open Theme Settings in the Theme Editor.
- Select the Badges option.
- Enable the Show Badges setting.
- Click Save to apply the changes.
Badge Settings
- Badge Position: Choose where badges appear on product images (Top Left or Top Right).
- Sold Out Badge Color Scheme: Select a color scheme for the 'Sold Out' badge displayed on out-of-stock products.
- Sale Badge Color Scheme: Choose a color scheme used for sale badges on discounted products.
- Custom Badge Color Scheme: Define a color scheme for custom badges. This may also affect product count badges on collection list pages.
- Sale Badge Style: Choose how sale badges appear, either as simple text (Sale) or as a percentage discount (% OFF).
Product Swatches
Color swatches in the Emoll theme visually display product color options as clickable color samples instead of plain text. This allows customers to easily select product variants and improves the overall shopping experience.
Step 1: Assign a Product Category
Shopify enables category metafields such as Color and Size only when a product is assigned to a category.
- From your Shopify Admin, go to Products.
- Select the product you want to edit.
- In the Category section, click Browse Categories.
- Select a relevant category (for example: Apparel & Accessories ? Clothing).
- Click Save.
Step 2: Configure the Color Metafield
Once the category is assigned, you can configure available color values for that category.
- Go to Settings >> Custom Data >> Categories.
- Select the category you assigned earlier.
- Locate the Color metafield.
- Click Manage Entries.
- Add color entries such as Red, Blue, Black, etc.
- You can also add a hex color code or upload a swatch image.
- Click Save.
Step 3: Connect the Color Metafield to Variant Options
- Open the product in the Products section.
- Scroll to the Variants section.
- Click Add options like size or color.
- Enter Color as the option name.
- Click the Dynamic Source icon next to it.
- Select the Color Category Metafield.
- Assign each variant its corresponding color entry.
- Click Save.
Step 4: Configure Swatch Shape
You can customize the appearance of color swatches globally from the theme settings.
- Go to Online Store >> Themes.
- Click Customize on the Emoll theme.
- Open Theme Settings.
- Navigate to Color Swatches Selectors.
- Select your preferred swatch shape.
- Click Save.
- Circle: Displays round color swatches.
- Square: Displays square color swatches.
- Pill: Displays rounded pill-shaped swatches.
- Default: Uses the theme's default swatch styling.
