How do i move the Star review badge onto the same line as Price?

Aplussa · ‎03-20-2024

Im using the Sense theme and im wondering how i move the reviews so they are on the same line/ next to the price.

ThePrimeWeb · ‎03-20-2024

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 990px) {
    div.no-js-hidden[role="status"] {
        display: inline-block !important;
    }
    
    .product__tax.caption.rte {
        display: none !important;
    }
    
    div:has(>form.installment) {
        display: none !important;
    }
    
    div.shopify-app-block:has(>.jdgm-widget) {
        display: inline-block !important;
        margin-left: 10px !important;
    }
    
    div .jdgm-prev-badge {
        display: flex !important;
        gap: 2px !important;
    }
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

It will remain in the same line as long the display has space

Once there isn't enough space, it'll drop down to the next line again

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎03-20-2024

Hey @Aplussa,

Can you share the link to your store? Thanks!

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

Aplussa · ‎03-20-2024

do you know how to fix this?

ThePrimeWeb · ‎03-20-2024

Hey @Aplussa,

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
@media only screen and (min-width: 990px) {
    div.no-js-hidden[role="status"] {
        display: inline-block !important;
    }
    
    .product__tax.caption.rte {
        display: none !important;
    }
    
    div:has(>form.installment) {
        display: none !important;
    }
    
    div.shopify-app-block:has(>.jdgm-widget) {
        display: inline-block !important;
        margin-left: 10px !important;
    }
    
    div .jdgm-prev-badge {
        display: flex !important;
        gap: 2px !important;
    }
}
</style>

Screenshot is for reference only, the correct code to paste is the one shown above.

It will remain in the same line as long the display has space

Once there isn't enough space, it'll drop down to the next line again

Was I helpful?