Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Hey! I'm using Dawn 14.0.0, and want to switch the add to cart quick add button on the collection page and product page to have the "add to cart" on left side and price + compare at price on right side. Also, after doing that, how do I remove the original price tag from sight?
I want to get it from this:
To this:
Solved! Go to the solution
This is an accepted solution.
Hello @FloridaGlow
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) open 'card-product.liquid' and search for render 'price' and comment it like below
4) Now Search for '<product-form ' and in that replace the add the below code in button
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
like this
Add the below css in 'base.css' file
.quick-add__submit {
justify-content: space-between;
}
Hello @FloridaGlow
You need too some code under add to cart button for the price
If you require further help to optimize your store, please don’t hesitate to reach out.
This contribution will always benefit you and you will get my full help easily and you can contact me easily.
This is an accepted solution.
Hello @FloridaGlow
Follow these Steps:
1) Go to Online Store
2) Edit Code
3) open 'card-product.liquid' and search for render 'price' and comment it like below
4) Now Search for '<product-form ' and in that replace the add the below code in button
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
like this
Add the below css in 'base.css' file
.quick-add__submit {
justify-content: space-between;
}
@oscprofessional Thanks so much! Would it also be possible to remove the cents if it ends with .00 and remove the "USD"? I want it to be one smooth line but because of the unneeded add-ons, it became 2 lines, this is what it looks like now:
,
I'd like it to look more like the picture in the post, thanks so much!
Hello
For removing the currency code there is an option in theme setting . You need to uncheck the option
@oscprofessional Got it! Do you know of a way to remove the cents if it ends in .00, like if it is $25.00, is there a way to only say $25? Also, can I add text in the area where the price was?
For removing the decimal values
1) Click on settings
2) In General tab search for 'Currency display'
3) Click on the action button( three dots) next to it
4) Click on Change currency formatting
5) And replace the {{amount}} with {{amount_no_decimals}}
Thanks
@oscprofessional Thanks! Sorry to bother, the compare at price is on the left of the regular price while the regular one is hugging the right side, can it be the opposite?
Try this
Go to the 'price.liquid' file and search for 'price__sale'.
Now replace the complete code for it with the below code
<div class="price__sale">
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.sale_price' | t }}</span>
<span class="price-item price-item--sale price-item--last">
{{ money_price }}
</span>
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
<span>
<s class="price-item price-item--regular">
{% if settings.currency_code_enabled %}
{{ compare_at_price | money_with_currency }}
{% else %}
{{ compare_at_price | money_without_trailing_zeros }}
{% endif %}
</s>
</span>
{%- endunless -%}
</div>
@oscprofessional Thanks so much! You are very helpful! One last thing and I will be done, where the price used to be, that text above the buy button, how would I go about creating my own text there, kind of like a few-word description about the product just under the product image where price used to be? Thanks!
For this better if you use metafield and show it at the place where the price used to be oriignally.
By using you can show different text for different product.
1) Go to settings > custom data > products
2) Click on Add defintion and create a metafield (For refernce: https://help.shopify.com/en/manual/custom-data/metafields/metafield-definitions/creating-custom-meta...
For example:
3) Then go to the particular product from admin and scroll down to metafield option
4) Add the text in it
5) Finally need to call the metafield in the html. For this Go to card-product.liquid file and add the code like below
<div class="card_product_text">{{ card_product.metafields.custom.card_product_text }}</div>
@oscprofessional I made the metafield, but how can I place it directly under the product title where the price was if there is no option to add there? The whole thing is just called product grid within a collection.
@oscprofessional additionally, how do I justify content in the button for mobile viewing? Once again, I apologize.
@oscprofessional Hey, on mobile, can you please help me make the price much closer to the compare at price, but only on mobile?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025