Implement Customizable Stats Bar Section 📊

[anishdalvi]

Objective

• [x] New Feature

User Story

As a store owner, I want to have a customizable Stats Bar section on the website to showcase various achievements and progress metrics of my company, such as the number of customers, total orders, repeat rate, company years, and Amazon rating (these are just an example).

Background/Context

Currently, our website lacks a dedicated section to highlight important company achievements and metrics. By implementing a customizable Stats Bar section, we can effectively communicate our success and credibility to visitors, thereby enhancing our brand image and encouraging customer trust.

User Role

• [x] Store Owner

Acceptance Criteria

1. The Stats Bar section should be customizable, allowing me to add any number of blocks, each representing a different achievement or metric.
2. Each block in the Stats Bar should include options to add an icon (optional), a title, and a small description.
3. I should be able to easily reorder, edit, or remove blocks within the Stats Bar section using the theme editor.
4. The Stats Bar section should be fully responsive, ensuring that it displays properly on various devices and screen sizes.
5. The design of the Stats Bar section should be visually appealing and consistent with the overall theme of the website.

Technical Details (If Known)

• The implementation of the Stats Bar section may require Tailwind CSS to design the section.
• Custom liquid code may be utilized to create a dynamic and customizable section within the Shopify theme editor.

Estimated Effort

• [x] Medium

Some Reference Images

• Example 1: ( Preferred Design)

• Example 2:

Additional Notes

The Stats Bar section will provide valuable information to visitors about our company's achievements and progress, helping to build trust and credibility. It will also serve as a visually engaging element on our website, enhancing the overall user experience.

Issue Creator Details

Developer Intern Experience Level with Project: Intermediate

[deardigital-evaluation[bot]]

Thanks for opening this issue @anishdalvi :)

[tanujbordikar]

Hey @anishdalvi, I have a idea of making a simple architecture containing block of the stats with appropriate styling for this particular section, but i have question regarding the icons been rendered ??

[anishdalvi]

Yes @tanujbordikar , what's the question about the icons?

[tanujbordikar]

Yes @tanujbordikar , what's the question about the icons?

Wanted to know that the icons must be rendered from the Shopify customisable settings?

[anishdalvi]

Yes @tanujbordikar , what's the question about the icons?

Wanted to know that the icons must be rendered from the Shopify customisable settings?

You can make the section and for each block, you can render the default icon if the user haven't put the custom image (icon). This way user can see how the section looks and customize the icons for block as he desire. 🙌🏻

[tanujbordikar]

Yes @tanujbordikar , what's the question about the icons?

Wanted to know that the icons must be rendered from the Shopify customisable settings?

You can make the section and for each block, you can render the default icon if the user haven't put the custom image (icon). This way user can see how the section looks and customize the icons for block as he desire. 🙌🏻

Okay, I'll try to implement your method.

[tanujbordikar]

/attempt

[deardigital-evaluation[bot]]

@tanujbordikar has requested to attempt this issue #280. Here are their stats:

📇 Username	💯 XP	⭐RP	🥇 Badges
tanujbordikar	61	61	🧪[Beta Tester]

This message was generated automatically. Please check the contribution guidelines for more details.

[deardigital-evaluation[bot]]

@tanujbordikar has successfully contributed to this issue #280. Here are their updated stats:

📇 Username	💯 XP	⭐RP	🥇 Badges
tanujbordikar	120	120	🧪[Beta Tester]

This message was generated automatically. Please check the contribution guidelines for more details.