A Shopify store owner using the Taste theme wants to display product prices inside the \
Hey, i just made my shopify store and i ran into this problem, i have the price in the add to cart button on the product page, but on the collection page, it does not show it how i want to. How do i do this? I will show an example down below.
Link: https://e8aaa0-3.myshopify.com/
password: mohwhi
Example:
Hello,
To address your inquiry, kindly navigate to the collection product grid section/snippet. Within this section, you’ll locate the code related to pricing. Copy this code and proceed to integrate it into the “Add to Cart” button.
This process involves extracting the pricing code from the collection product grid section and incorporating it seamlessly into the designated area within the “Add to Cart” button.
If you encounter any challenges during this process or require further clarification, feel free to reach out for assistance.
Hi ,
adding price to the ATC button on the collection will require updating template files. As you have a custom theme, I cannot provide actual solution without looking into the actual theme files.
Hey, i dont have a custom theme, i got the Taste theme. But if you need any files i’d be happy to provide them
Hi,
I’ve just reviewed the default taste theme and prepared code that works on the default theme. The below codes should be replaced in the file “card-product.liquid.”
Before making changes to any theme files, make sure to keep a backup of the original files. [REF: https://mangit.myshopify.com/]
NOTE: I also noticed you have not marked my answer on another post as a solution. I request you to mark it as a solution. This will boost my energy to keep helping in the forum.
{% comment %}
Renders a product card
Accepts:
- card_product: {Object} Product Liquid object (optional)
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- image_shape: {String} Image mask to apply to the product image card. Values are "arch", "blob", "chevronleft", "chevronright", "diamond", "parallelogram", and "round". (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_rating: {Boolean} Show the product rating. Default: false
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
- show_quick_add: {Boolean} Show the quick add button.
- section_id: {String} The ID of the section that contains this card.
- horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
- horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
- placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-2' (optional)
Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}
{%- if card_product.featured_media -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
{%- if card_product.media[1] != null and show_secondary_image -%}
{%- endif -%}
{%- endif -%}
###
{{ card_product.title | escape }}
{%- if card_product.available == false -%}
{{- 'products.product.sold_out' | t -}}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{- 'products.product.on_sale' | t -}}
{%- endif -%}
###
{{ card_product.title | escape }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}
{{ block.settings.description | escape }}
{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
{{- card_product.metafields.reviews.rating.value }} /
{{ card_product.metafields.reviews.rating.value.scale_max -}}
({{ card_product.metafields.reviews.rating_count }})
{{- card_product.metafields.reviews.rating_count }}
{{ 'accessibility.total_reviews' | t -}}
{%- endif -%}
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
{%- if card_product.quantity_price_breaks_configured? -%}
{{ 'products.product.volume_pricing.note' | t }}
{%- endif -%}
{%- if show_quick_add -%}
{%- liquid
assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
assign qty_rules = false
if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
assign qty_rules = true
endif
-%}
{%- if card_product.variants.size > 1 or qty_rules -%}
{%- else -%}
{%- endif -%}
{%- endif -%}
{%- if card_product.available == false -%}
{{- 'products.product.sold_out' | t -}}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{- 'products.product.on_sale' | t -}}
{%- endif -%}
{%- else -%}
{%- if placeholder_image -%}
{{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
{%- else -%}
{{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
###
{{ 'onboarding.product_title' | t }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%}
{% render 'price', show_compare_at_price: true %}
{%- endif -%}
Hey, it is looking good thanks, but now the normal price tag is still showing. How do i remove this one?
Please add below code at the end of theme.liquid file just before “”
Please do accept my answer as solution.
I just reviewed the site and found that you have already implemented the changes. However, you have not accepted any of my answers as a solution.
Hey, thanks for your help, but how do i make the font size smaller on mobile?
could you please reply?
Hi
Please add below css at the end of theme.liquid file just above “” to adjust the font size of the ATC button.
@media only screen and (max-width: 600px) {
product-form .quick-add__submit {
font-size: 13px!important;
padding: 5px!important;
}
.quick-add.no-js-hidden {
margin: 0rem!important;
}
.card__information {
padding: 0px;
}
.quick-add__submit span {
margin-left: 0px!important;
}
}
hey, it is not working on my end. Could you provide me with another code?
Thanks in regard!
@theycallmemakka can you please help me do this on Dawn 14.0.0? Trying to get “Add To Cart” on left side of button and price with compare at price (if there is one) with a strike through compare at, on the right side of that button?
Hi @FloridaGlow ,
This seems to be a customization request. This is a little time consuming as i have to do this on your theme only. It will require atleast 30min for me to make this changes.
Yeah, I don’t really have any coding experience
