Re: How to make Compare at price and sales price appear on same line on collection pages mobile

Littleluxebubba · ‎02-06-2024

Hi,

I need help making the compare at price and sale price appear in the same line on collection pages and featured collection on home page.

wt the moment the appear as the compare at price and sale price underneath in a seperate line on mobile?

Also they are different sizes and I’d like to made the size the same.

Also I am happy to removed the AUD for space if needed!

I have attached a screen shot to how they look now.

Thank you

TerenceKEANE · ‎02-07-2024

The following code will unify the price section to a single line and ensure consistent font sizes on mobile. I've attempted to adjust the 'AUD' part, but it seems to conflict with the existing software. Of course, with some effort, it can be done.

Add these between the <body> tags. Or simply add the contents of the <style> </style> section to your CSS and clear the caches. I've tested it on Google Chrome and it worked seamlessly. I recommend checking for any conflicts with other areas after testing.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

<style>
    @media (max-width: 991.98px){
        s.price-item.price-item--regular {
    font-size: 12px;
    margin: 0;
}

span.price-item.price-item--sale.price-item--last {
    font-size: 12px;
}
    }

</style>

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ If my support was a lifeline for you, The COFFEE
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

View solution in original post

StephensWorld · ‎02-06-2024

The only way to do that is via custom coding, and it'll be different, depending on which theme you're using. I couldn't really tell you how to do this, without being able to play around with the coding myself first. This is definitely doable though.

Your best bet is to hire a Shopify Partner who specializes in "theme customizations": https://www.shopify.com/partners/directory/services/store-setup/customize-theme

If you want to hire me for this, then feel free to reach out via email directly. **Edited by Community Moderator**

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
support@stephensworld.ca

TerenceKEANE · ‎02-07-2024

Hello,

Yes, what you mentioned can be done. Could you please share the link to the site?

Terence Keane

Best Regards,

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ If my support was a lifeline for you, The COFFEE
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

Littleluxebubba · ‎02-07-2024

Thank you

it’s: www.littleluxebubbas.com

TerenceKEANE · ‎02-07-2024

The following code will unify the price section to a single line and ensure consistent font sizes on mobile. I've attempted to adjust the 'AUD' part, but it seems to conflict with the existing software. Of course, with some effort, it can be done.

Add these between the <body> tags. Or simply add the contents of the <style> </style> section to your CSS and clear the caches. I've tested it on Google Chrome and it worked seamlessly. I recommend checking for any conflicts with other areas after testing.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

<style>
    @media (max-width: 991.98px){
        s.price-item.price-item--regular {
    font-size: 12px;
    margin: 0;
}

span.price-item.price-item--sale.price-item--last {
    font-size: 12px;
}
    }

</style>

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ If my support was a lifeline for you, The COFFEE
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

Littleluxebubba · ‎02-07-2024

Thank you for the reply.

do you mean to add the code above the </body> tag in theme.liquid code

?

Thank you

Littleluxebubba · ‎02-09-2024

Thank you adding the content between the style tags works on custom css section on theme settings.

Really appreciate the help.

TerenceKEANE · ‎02-10-2024

you are welcome 🙂

★ Looking for Dedicated Premium Coding Support? Join our unique "PREMIUM SUPPORT" service starting at 59 USD for 1 MONTH!
★ Get skilled Shopify developers at BUDGET-FRIENDLY RATES — explore Novajetsoft.com for a rapid quote!
☕ If my support was a lifeline for you, The COFFEE
would be the anchor keeping me steady!
★ For Quick response --> WhatsApp | Email --> info@novajetsoft.com | Software Engineer - Specializing In Advanced E-Commerce Websites

k1vinn · ‎10-15-2024

hello, mine doesn't work. www.jsdistrict.com

Re: How to make Compare at price and sales price appear on same line on collection pages mobile

How to make Compare at price and sales price appear on same line on collection pages mobile

Community Blog Articles