How to Customize the Star Rating Widget Alignment and Size
Plans: All Plans Platforms: Shopify
AfterShip Reviews offers extensive customization options, empowering you to tailor the appearance of your star rating widgets to suit your brand's aesthetic and enhance the user experience for your customers.
In this article, we will discuss:
Prerequisites
Customize the star rating widget on the Product page
Customize the star rating widget on the Collections page
Please ensure that your star rating widget is correctly inserted and functional before making any adjustments to alignment and size. If you encounter any issues, refer to this help article for guidance on inserting your star rating widget.
Using Shopify theme editor
If you've inserted your star rating widget using the Shopify theme editor, you'll find options for block alignment and star rating size settings, enabling you to customize them according to your preferences.
Using custom code
To prevent duplicate star ratings, ensure your star rating code block is already inserted. If so, locate the basic code snippet in your theme codes and add the following variables mentioned below. (Avoid inserting a new code snippet)
To customize the star rating alignment, utilize the blockAlign variable. Accepted values include:
Left alignment: blockAlign: 'flex-start'
Centered alignment: blockAlign: 'center'
Right alignment: blockAlign: 'flex-end'
To adjust the star rating size, use the size variable to customize both the star size and font size. Set it to your desired number.
For instance, to set both the star size and font size as 14 px, use: size: 14
Sample star rating code snippet for the product page after adding customized alignment and size variables:
Due to limitations in the Shopify editor, it's not possible to directly insert a star rating widget extension on the collection page. However, if you have already set up the star rating widget on the collection page and wish to customize its alignment and size, follow the steps mentioned below. (Avoid inserting a new code snippet)
Locate the code snippet in your theme codes. Typically, it's found in the “card-product.liquid” file.
Add the following variables to the existing code snippet:
To customize the star rating alignment, utilize the blockAlign variable. Accepted values include:
Left alignment: blockAlign: 'flex-start'
Centered alignment: blockAlign: 'center'
Right alignment: blockAlign: 'flex-end'
To adjust the star rating size, use the size variable to customize both the star size and font size. Set it to your desired number.
For example, to set both star size and font size as 14 px, use: size: 14
Save your changes and ensure the star rating widget is displayed correctly on the collection page.
Sample star rating code snippet for the collection page after adding customized alignment and size variables:
This process ensures that you can customize the alignment and size of the star rating widget without needing to insert a new code snippet, thereby maintaining code efficiency.
If you have any queries, feel free to connect with our support team for quick assistance.
Overview
AfterShip Reviews offers extensive customization options, empowering you to tailor the appearance of your star rating widgets to suit your brand's aesthetic and enhance the user experience for your customers.
What you’ll learn
In this article, we will discuss:
Prerequisites
Customize the star rating widget on the Product page
Customize the star rating widget on the Collections page
Prerequisites
Please ensure that your star rating widget is correctly inserted and functional before making any adjustments to alignment and size. If you encounter any issues, refer to this help article for guidance on inserting your star rating widget.
Customize the star rating widget on the Product page
Using Shopify theme editor
If you've inserted your star rating widget using the Shopify theme editor, you'll find options for block alignment and star rating size settings, enabling you to customize them according to your preferences.
Using custom code
To prevent duplicate star ratings, ensure your star rating code block is already inserted. If so, locate the basic code snippet in your theme codes and add the following variables mentioned below. (Avoid inserting a new code snippet)
<!--BEGIN_AS_REVIEWS:production:PRODUCT_TITLE_STAR_WIDGET-->
{% render 'asrv-star-widget', product: product, blockAlign: 'flex-start', size: 14 %}
<!--END_AS_REVIEWS:production:PRODUCT_TITLE_STAR_WIDGET-->To customize the star rating alignment, utilize the blockAlign variable. Accepted values include:
Left alignment: blockAlign: 'flex-start'
Centered alignment: blockAlign: 'center'
Right alignment: blockAlign: 'flex-end'
To adjust the star rating size, use the size variable to customize both the star size and font size. Set it to your desired number.
For instance, to set both the star size and font size as 14 px, use: size: 14
Sample star rating code snippet for the product page after adding customized alignment and size variables:
<!--BEGIN_AS_REVIEWS:production:PRODUCT_TITLE_STAR_WIDGET-->
{% render 'asrv-star-widget', product: product, blockAlign: 'flex-start', size: 14 %}
<!--END_AS_REVIEWS:production:PRODUCT_TITLE_STAR_WIDGET-->Customize the star rating widget on the Collections page
Due to limitations in the Shopify editor, it's not possible to directly insert a star rating widget extension on the collection page. However, if you have already set up the star rating widget on the collection page and wish to customize its alignment and size, follow the steps mentioned below. (Avoid inserting a new code snippet)
Locate the code snippet in your theme codes. Typically, it's found in the “card-product.liquid” file.
Add the following variables to the existing code snippet:
<!--BEGIN_AS_REVIEWS:production:PRODUCT_COLLECTION_STAR_WIDGET-->
{% render 'asrv-star-widget', product: card_product, anchor: false, blockAlign: 'flex-start', size: 14 %}
<!--END_AS_REVIEWS:production:PRODUCT_COLLECTION_STAR_WIDGET-->To customize the star rating alignment, utilize the blockAlign variable. Accepted values include:
Left alignment: blockAlign: 'flex-start'
Centered alignment: blockAlign: 'center'
Right alignment: blockAlign: 'flex-end'
To adjust the star rating size, use the size variable to customize both the star size and font size. Set it to your desired number.
For example, to set both star size and font size as 14 px, use: size: 14
Save your changes and ensure the star rating widget is displayed correctly on the collection page.
Sample star rating code snippet for the collection page after adding customized alignment and size variables:
<!--BEGIN_AS_REVIEWS:production:PRODUCT_COLLECTION_STAR_WIDGET-->
{% render 'asrv-star-widget' , product: card_product, anchor: false, blockAlign: 'flex-start', size: 14 %}
<!--END_AS_REVIEWS:production:PRODUCT_COLLECTION_STAR_WIDGET-->This process ensures that you can customize the alignment and size of the star rating widget without needing to insert a new code snippet, thereby maintaining code efficiency.
If you have any queries, feel free to connect with our support team for quick assistance.
Updated on: 13/03/2024
Thank you!