Prestige Customizations
Relevant Skills
- HTML
- CSS
- JavaScript
- Liquid
Objective: Help redesign Shopify's Prestige theme with section specific typography changes, custom sections, and app integration.
Description: The client was preparing for a relaunch of their store. Key priorities were converting the flavor text on the product images to actual text so it would be readable on mobile. Building out the Infographic, and 3 Step Process sections. And moving the Mailberry email sign up form over the video section above.
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!