Horizontally Aligning Star Rating and Q&A Buttons (Legacy)
- DarkLight
Horizontally Aligning Star Rating and Q&A Buttons (Legacy)
- DarkLight
Article summary
Did you find this summary helpful?
Thank you for your feedback
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
- Locate the template or snippet where the code should be placed. If you're using Shopify, the default is product.liquid.
- 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>- 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?
