In this article, we explore how to leverage customization within the product card template to convey tailored messages to your customers, thereby enhancing user experience and driving sales. You can specifically utilize this customization to accommodate temporary promotions and optimize inventory management.
Customization Approach
This customization strategy focuses on two key fields within the product card template: Availability Flags and Stock. By harnessing these fields, you can display information beyond the standard product details, effectively communicating specific messages aligned with your marketing objectives. Such us:
- Online Exclusive Discount
- Valid until: 15/5/2024
- Only 2 left in stock
Implementation Steps
1.Data Feed Indexing: Before implementing any customizations, you need to ensure that the relevant information is properly indexed within your data feed. For instance, in the case of the Stock field, you can substitute numerical stock counts with descriptive messages tailored to individual products.
2.Template Customization: The next step is to make modifications to the product card template to incorporate the customized messaging. This involves accessing the Layers > Appearance > Advanced settings and selecting "Customize" within the Product Card Template section. Here, insert the code to dynamically display the desired information.
<%= if @item["stock"] do %>
<div class="dfd-card-stock">
<%= @item["stock"] %>
</div>
<% end %>
3.CSS Styling: Lastly, further enhance the visual presentation of the customized elements by applying CSS rules. This ensures that the messaging aligns with the store's branding and enhances readability.
.dfd-card-stock {
font-size: 13px;
position: relative !important;
display: flex;
color:#28C92F;
border: 1px solid #28C92F;
width: fit-content;
padding: 3px 5px;
border-radius: 5px;
font-weight: 500;
min-height: 15px;
margin-left: 0px;
margin-top: 10px;
}
Customized Message in the Availability Flag Field
If you want to learn how to customize the message displayed in the flag field, we provide you with a link to this documentation that explains how to do it step by step: The Benefits of Displaying Availability Flags.
Benefits
By customizing the product card templates in this manner, you can achieve several benefits:
-
Enhanced Communication: You can convey specific messages, such as promotional offers or stock status, directly within the product cards, improving customer engagement and clarity.
-
Flexibility: The ability to customize product card templates provides you with flexibility in adapting to different marketing campaigns and inventory management strategies.
-
Branding Consistency: Through CSS styling, you ensure that the customized elements maintain a cohesive visual identity with the rest of the store, reinforcing brand recognition.
Conclusion
This article demonstrates the power of customization within product card templates to elevate the online shopping experience. By strategically leveraging fields like Availability Flags and Stock, coupled with CSS styling, you can effectively communicate targeted messages to your customers, driving sales and fostering brand loyalty.