Move ratings next to price (on the same line)

Technical Q&A
1

Hi, I have added customer reviews to my products and would like to have the star rating next to price, i.e. on the same line as price.

spiritofsummer_0-1610720769490.png
spiritofsummer_0-1610720769490.png1200×573 341 KB

I’m using the Debut theme. The code of the product-template.liquid is below. The star review rating is this: 


    

      {%- assign featured_media = product.selected_or_first_available_variant.featured_media | default: product.featured_media -%}

      {%- for media in product.media -%}
        {% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
      {%- endfor -%}

      

      {% assign first_3d_model = product.media | where: "media_type", "model" | first %}

      {%- if first_3d_model -%}
        
      {%- endif -%}

      {% if product.media.size > 1 %}
        {% if product.media.size > 4 %}
          {%- assign enable_thumbnail_slides = true -%}
        {% endif %}

        

          

            {% if enable_thumbnail_slides == true %}
              
            {% endif %}

            

              {% if enable_thumbnail_slides == true %}
                

              {% endif %}

              {% for media in product.media %}
                - {%- capture thumbnailAlt -%}
                          {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
                            {{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                          {%- elsif media.media_type == 'model' -%}
                            {{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                          {%- else -%}
                            {{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
                          {%- endif -%}
                        {%- endcapture -%}

                      
                        {%- if media.media_type == 'video' or media.media_type =='external_video' -%}
                        

                            {% include 'icon-video-badge-full-color' %}
                        

                        {%- endif -%}
                        {%- if media.media_type == 'model' -%}
                        
                            {% include 'icon-3d-badge-full-color' %}
                        

                        {%- endif -%}
                  
                
              {% endfor %}

              {% if enable_thumbnail_slides == true %}
                

              {% endif %}
            

            {% if enable_thumbnail_slides == true %}
              
            {% endif %}
          

        

      {% endif %}
      
    

    
      

        # {{ product.title }}
        

          

            {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %} 
          

        
            

          {% capture "form_classes" -%}
            product-form product-form-{{ section.id }}
            {%- if section.settings.enable_payment_button and product.has_only_default_variant %} product-form--payment-button-no-variants {%- endif -%}
            {%- if current_variant.available == false %} product-form--variant-sold-out {%- endif -%}
          {%- endcapture %}

          {% form 'product', product, class:form_classes, novalidate: 'novalidate', data-product-form: '' %}
            {% unless product.has_only_default_variant %}
              

                {% for option in product.options_with_values %}
                  

                    
                    
                  

                {% endfor %}
              

            {% endunless %}

            

            {% if section.settings.show_quantity_selector %}
              

                

                  
                  
                

              

            {% endif %}

            
              {{ 'general.accessibility.error' | t }} 
              {% include 'icon-error' %}
              {{ 'products.product.quantity_minimum_message' | t }}
            

            
              

                
                {% if section.settings.enable_payment_button %}
                  {{ form | payment_button }}
                {% endif %}
              

            

          {% endform %}
        

        {%- comment -%}
          Live region for announcing updated price and availability to screen readers
        {%- endcomment -%}
        

        {%- comment -%}
          Live region for announcing that the product form has been submitted and the
          product is in the process being added to the cart
        {%- endcomment -%}
        

{{ 'products.product.loader_label' | t }}

        
        

        
          {{ product.description }}
        

      
      

        {% if section.settings.show_share_buttons %}
          {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}
        {% endif %}
    

    

    
{{ product.metafields.spr.reviews }}

  

{% unless product == empty %}
  
  
{% endunless %}

Thank you in advance!

2

Hi, in Sections/product-template.liquid (which is the code you pasted, finde the following:


            {% include 'product-price', variant: current_variant, show_vendor: section.settings.show_vendor %}

Then wrap a

around that code like this:


          	

            	{% include 'product-price', variant: current_variant %}

Then at the end of Assets/theme.css.liquid paste the following:

.product__price_review {
    display: flex;
}
1 Like
3

Worked brilliantly, thank you!

4

@spiritofsummer can you then Like and mark as the accepted answer my solution? thanks