In stores with many product variants, customers may be confused about which to choose, so displaying badges on variants can help customers make better product choices.
◆ Benefits of implementation ・Smooth support for customer product selection ・Visual information intuitively conveys product features ・Eliminates points that can easily lead to confusion, and is expected to improve dropout rates
◆Specific implementation steps ① Product variant name settings ・In the management screen, add the text you want to display as a badge to each variant using () Example: S (limited stock), M (recommended), L (new color)
② Edit the theme file. ・For the Rise/Dawn theme, open “snippets/product-variant-options.liquid”. ・Add a process to extract the characters in the () of the variant name and display them in a styled span tag.
Example of setting to display a badge when the variant picker is button type on the product page of the theme "Rise/Dawn"
[Setting Method 1] Specify the product variant name you want to display as a badge by enclosing it in ().
[(For the Rise/Dawn theme) Setting method ②] Edit the code in "snippets/product-variant-options.liquid" ( add a process to replace the characters in parentheses added to the variant name with a tag with style)
