Want to grab your customers' attention right on your product listing? Scrolling Badge displays eye-catching badges (discounts, certificates, promotions, etc.) right below each product with a smooth scrolling effect.
Step 01: From Shopify Admin, click on Online Store > Select Theme > In the Current theme section, click the Customize button.
Step 02: In the theme editor (Customize), click the Sections button > Click the Add section button > In the Sections tab, scroll through the list or use the search bar to find and select a Collection product section
Example: Featured collection grid section
Step 3: In the theme editor (Customize), click the Theme settings button > find and open the Products tab > find Scrolling badge > turn it on & do some more tweaks
You can add Scrolling Badge to all products or just select specific products as you want.
You can add Icon svg & Text
Icon svg: use Remixicon to make it more attractive and eye-catching
Text: use text to promote a promotion or emphasize the benefits of your product.
You can also enable sales badges in Percentage or Text format.
Sale percentage will be given priority.
Prioritize getting data from product metafields then settings
2.1. Create metafield
Step 1: From the Shopify store home screen > click open Settings tab > open Custom data tab > open Products metafields > click Add definition button
Step 2: Enter name = Scrolling badge > Namespace and key is theme.scrolling_badge > select type = Metaobject > then Reference will appear > click dropdown to select Entry > click Add definition button
Step 3: In the Add metaobject definition screen > add Name = Scrolling badge > add Fields
With Name field: click Add field button > find and select Single line text type > set name = Name (you can set it as required field or not) > click Add button
With Icon field: click Add field button > find and select Multi-line text type > set name = Icon (you can set it as required field or not) > click Add button
With Text field: click Add field button > find and select Single line text type > set name = Text (you can set it as required field or not) > click Add button
With Show sale text field: click Add field button > find and select True or false type > set name = Show sale text (you can set it as required field or not) > click Add button
With Show sale percentage field: click Add field button > find and select True or false type > set name = Show sale percentage (you can set it as required field or not) > click Add button
Step 4: After adding all the necessary fields > click Save button > return to the Add products metafield definition page to select the newly created Scrolling badge entry > click Save button
Watch our video below...
2.2. Add entry & add metafield to product
Add entry
Step 1: From the Shopify store home screen > click open Content tab > open Metaobjects tab > find & open Scrolling badge data field > click Add entry button
Step 2: Name the badge "Scrolling badge" > visit the Remixicon website to select an icon (click on your chosen icon > then click "Copy SVG") > you can customize attributes like width, height, and color > enter the desired text > choose whether to display the "Sale" label or the sale percentage.
Add metafield to product
Step 1: From the Shopify store home screen > click open Products tab > open Product you want > find & click the Scrolling badge data field > click Add entry button > select Scrolling badge entry
Step 2: view result
