Pricing Cards Module

Develop, Build & Integrate CMS Development
1

How to create a pricing cards module?

2

Hey @SBENALI9, pricing Cards Module can create by coding in HubL along with HTML and CSS. I can help you for creating simple pricing card module.

This is the code that you can add for dynamically displaying pricing module:

<div class=“pricing-card”>
<div class=“pricing-header”>
<h2>{{ card_title }}</h2>
</div>
<div class=“pricing-price”>
<span class=“currency”>{{ currency_symbol }}</span>{{ price }}
</div>
<ul class=“pricing-features”>
{% for feature in features %}
<li>{{ feature }}</li>
{% endfor %}
</ul>
<a href=“{{ cta_link }}” class=“pricing-button”>{{ cta_text }}</a>
</div>

And for customizing colors, fonts, and spacing, you will have to write CSS:

.pricing-card {
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
}

.pricing-header {
background-color: #f2f2f2;
padding: 10px;
}

.pricing-price {
font-size: 24px;
margin: 15px 0;
}

.pricing-features {
list-style-type: none;
padding: 0;
}

.pricing-features li {
margin-bottom: 8px;
}

.pricing-button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: #fff;
text-decoration: none;
border-radius: 5px;
}

Then do customize the content and variables (like {{ card_title }}, {{ price }}, etc.) in the code to match the details of your pricing plans then save your template and click “Preview” to see how your pricing cards look. Make adjustments as needed.

Hope this helps!