Horizontally Aligning Star Rating and Q&A Buttons (Legacy)

      Horizontally Aligning Star Rating and Q&A Buttons (Legacy)


        Article summary

        Products


        Reviews
        Supported plans

        Free, Starter, Pro, Premium, Enterprise

        eCommerce Platform

        Shopify, Shopify Plus, Adobe Commerce (Magento), BigCommerce, WooCommerce, Volusion, Salesforce Commerce Cloud, Custom

        Both the star rating and the Q&A bottomline widgets are block-level elements, meaning that they will not sit next to each other when placed one after the other in HTML code.

        Please note:
        • This article explains how to customize a Yotpo feature using external code.
        • The code is generic and provided as is. Implementation or modification of this code is not supported by Yotpo.
        • We recommend using the services of a developer for the purpose of integrating this customization into your website.

        Placing the star rating and Q&A buttons next to each other

        Paste the following style element into the <head> of your product's template page.

        <style>
            .yotpo-icon-double-bubble, .yotpo-stars { margin: 0 5px 0 0 !important; }
            div.yotpo.bottomLine { display: inline-block; margin: 0 10px 1px 0;}
            .thumbnail .yotpo a { display: inline-block; }
            div.yotpo.QABottomLine { display: inline-block; }
        </style>

        When implemented correctly, the results should look like the image below:

        Adding the star rating and Q&A buttons on opposite sides of a container div

        1. Locate the template or snippet where the code should be placed. If you're using Shopify, the default is product.liquid.
        2. Place the following code within the div you'd like the bottomLine elements to appear in:
        <div class="bottomLine-container" style="width: 100%; display: table; margin-top: 10px"> 
          <div style="display: table-cell;">
            <div class='yotpo QABottomLine' style="float: left;"
                 data-product-id='{{ product.id }}'>
            </div>
          </div>
          <div style="display: table-cell;">
            <div class="yotpo bottomLine" style="float: right;"
                 data-product-id="{{ product.id }}"
                 data-name="{{ product.title | escape }}"
                 data-url="{{ page.url }}">
            </div>
          </div>
        </div>
        1. Place the recommended style:
        <style>
            .yotpo-icon-double-bubble, .yotpo-stars { margin: 0 5px 0 0 !important; }
            div.yotpo.bottomLine { display: inline-block; margin: 0 10px 1px 0;}
            .thumbnail .yotpo a { display: inline-block; }
            div.yotpo.QABottomLine { display: inline-block; }
        </style>
        Please note:
        • The product variables used in this guide are Shopify's. You can replace them with variables or calls used by another platform.
        • We recommend you test for responsiveness by checking the layout in different screen widths.

        Was this article helpful?