Multiplier Badge
Relevant Skills
- HTML
- CSS
- JavaScript
- Liquid
Objective: Create a Custom Sweepstakes Entry Multiplier Badge from references on competitors’ stores.
Description: Built on the Stiletto theme using HTML, CSS, Liquid, and JavaScript. The functionality allows the user to assign a “multiplier number” to the badge. Which is multiplied by the product price to output the number of sweepstakes entries earned by purchasing each product. The multiplier number applies to all products in the store. Or can be assigned to individual products using a custom metafield in the admin.
The user can customize the badge's appearance in the Theme Settings. Including: show / hide, colors, font, font-size, badge layout, flash, flash color, and multiplier number.
Problem: The entries calculation was not running on the badge in the product header on product pages.
Solution: Upon further investigation I discovered that the Stiletto theme renders the product block in two different ways. On the product page the product variable assigned to the product block is prod: product. On product grids it is prod: prod. My liquid snippet used the prod variable. As I was working from a collection grid while building it. Simply re-assigning the variable in the render tag in the product-header.liquid file solved the issue.
{% render 'multiplier-badge' with prod:product %}
Problem: On mobile product pages the Multiplier Badge was covering the price. The Stiletto theme renders the entire product block using the prod variable. So rendering the badge inside the product block using liquid alone was not possible.
Solution: I created a JavaScript function to append the badge under the product price in it's parent container. Resolving the positioning issue.
Problem: The product page also contains a Recommended Products section. By using document.querySelector('.badge-wrapper'); in the JavaScript snippet, I was also selecting the first element with a class of 'badge-wrapper' in each row of the Recommended Products grid. I needed a way to adjust the positioning on the badge in the product block. Without affecting the position of the badges in Recommended Products.
Solution: I refactored the snippet to append an ID to the first instance of the badge. Then used document.getElementById to adjust the position by the unique ID instead of class name.
Summary: This was an enjoyable project. Working with the Stiletto Theme exposed me to theme architecture that I had not seen before. Giving me an opportunity to explore the theme files, and gain a deeper understanding of what is possible on Shopify. Including aspects of the theme being hosted off platform.
Ready to elevate your website?
Let's collaborate!