Hello. I am trying to figure out a way to add text next to the price on my collection pages for a specific product type on my store. I am using the Minion theme and don’t believe I can do it in the theme settings. I would like to add it to my rack card products so it would read $48.95 / Pack of 50. I have included a screen shot below of what it ideally would look like. My store url is https://woodburnpress.com/collections/all-products?filter.p.m.custom.product_type=Rack+Card&page=3. Any help would be very much appreciated.
1 Like
Check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
#product-grid > div:nth-child(13) > div > div.product-card__container.mt--first-child-0 > div:nth-child(2) > div.price.mt5 > div:after {
content: "/ Pack of 50";
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
- Edit collection.liquid, product-grid-item.liquid, or a similar file depending on your theme.
- Search for code {{ product.price | money }}
- Add conditional statement
{% if product.type == 'YourProductType' %}
{{ product.price | money }} Your Text Here
{% else %}
{{ product.price | money }}
{% endif %}
1 Like
Thanks for this. I am having a hard time figuring out where to add this in my main-collection-product-grid.liquid section. Could you advise where to add it from the pasted code below please?
{%- liquid
assign enable_products_count = section.settings.enable_products_count
assign enable_sorting = section.settings.enable_sorting
if section.settings.enable_filtering contains 'enable'
assign enable_filtering = true
assign horizontal_filters = false
elsif section.settings.enable_filtering == 'horizontal'
assign enable_filtering = true
assign horizontal_filters = true
else
assign enable_filtering = false
endif
-%}
{%- if settings.animate_content_show -%}
{%- if settings.swatches_design != 'none' and settings.enable_color_swatches -%}
{%- endif -%}
{%- if enable_sorting -%}
{%- endif -%}
{%- if enable_sorting or enable_filtering -%}
{%- endif -%}
{%- if enable_filtering and horizontal_filters -%}
{%- elsif enable_filtering -%}
{{ 'component-facets--vertical.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- else -%}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-product-card.css' | asset_url | stylesheet_tag }}
{%- if settings.swatches_design != 'none' and settings.enable_color_swatches -%}
{{ 'product-card-variants.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- if enable_sorting -%}
{{ 'component-inputs.css' | asset_url | stylesheet_tag }}
{{ 'disclosure.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- if enable_sorting or enable_filtering -%}
{{ 'component-facets.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- if enable_filtering and horizontal_filters -%}
{{ 'component-facets--horizontal.css' | asset_url | stylesheet_tag }}
{%- elsif enable_filtering -%}
{{ 'component-facets--vertical.css' | asset_url | stylesheet_tag }}
{{ 'component-toggle.css' | asset_url | stylesheet_tag }}
{%- endif -%}
{%- endif -%}
{%- if enable_sorting or enable_filtering -%}
{%- endif -%}
{%- capture page_width -%}{%- if section.settings.width != "default" %}{{ section.settings.width }}{%- else -%}{{ settings.page_width_main }}{%- endif -%}{%- endcapture -%}
{%- render 'collection-toolbar',
results: collection,
enable_filtering: enable_filtering,
enable_sorting: enable_sorting,
horizontal_filters: horizontal_filters,
enable_products_count: enable_products_count
-%}
{%- if enable_filtering and horizontal_filters == false -%}
{%- render 'facets',
results: collection,
enable_filtering: enable_filtering,
enable_sorting: enable_sorting,
enable_products_count: enable_products_count
-%}
{%- endif -%}
{%- paginate collection.products by section.settings.product_limit -%}
{%- if collection.products.size == 0 -%}
###
{{ 'sections.collection_template.empty' | t }}
{{ 'sections.collection_template.use_fewer_filters_html' | t: link: collection.url, class: "btn-small color-accent-to-base" }}
{%- else -%}
{%- for product in collection.products -%}
{%- liquid
if page_width == "page-wide"
assign page_is_wide = true
else
assign page_is_wide = false
endif
-%}
{%- render "product-card",
product_card_product: product,
settings_image_ratio: section.settings.image_ratio,
show_button_quickview: section.settings.show_button_quickview,
show_badge_sold_out: section.settings.show_badge_sold_out,
show_badge_on_sale: section.settings.show_badge_on_sale,
show_badge_feature: section.settings.show_badge_feature,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_type: section.settings.show_type,
product_name_size: section.settings.product_name_size,
hover_underline: section.settings.hover_underline,
truncate_product_name: section.settings.truncate_product_name,
show_price: section.settings.show_price,
button_type_product: section.settings.button_type_product,
page_is_wide: page_is_wide,
section_id: section.id
-%}
{%- endfor -%}
{%- if paginate.pages > 1 -%}
{%- render 'pagination', paginate: paginate, anchor: '', aligment: section.settings.pagination_aligment -%}
{%- endif -%}
{%- endif -%}
{%- endpaginate -%}
{%- if section.settings.button_type_product != 'hide' or section.settings.show_button_quickview -%}
{%- endif -%}
{% javascript %}
class SortByHandler extends HTMLElement {
constructor() {
super();
this.elements = {
button: this.querySelector('button'),
panel: this.querySelector('ul'),
};
this.elements.button.addEventListener('click', this.openSelector.bind(this));
this.elements.button.addEventListener('focusout', this.closeSelector.bind(this));
this.addEventListener('keyup', this.onContainerKeyUp.bind(this));
this.querySelectorAll('.disclosure__link').forEach(item => item.addEventListener('click', this.onItemClick.bind(this)));
}
hidePanel() {
this.elements.button.setAttribute('aria-expanded', 'false');
this.elements.panel.setAttribute('hidden', true);
}
onContainerKeyUp(event) {
if (event.code.toUpperCase() !== 'ESCAPE') return;
this.hidePanel();
this.elements.button.focus();
}
onItemClick(event) {
event.preventDefault();
this.elements.button.innerHTML = event.target.dataset.name;
event.target.closest('ul').querySelector('.animation-underline--active').classList.remove("animation-underline--active");
event.target.classList.add("animation-underline--active");
if(document.getElementById('SortBy')){
document.getElementById('SortBy').value = event.target.dataset.value;
document.getElementById('FacetFiltersForm').dispatchEvent(new Event('input'));
}
else{
document.getElementById('SortBy-mobile').value = event.target.dataset.value;
document.getElementById('FacetFiltersFormMobile').dispatchEvent(new Event('input'));
}
}
openSelector() {
this.elements.button.focus();
this.elements.panel.toggleAttribute('hidden');
this.elements.button.setAttribute('aria-expanded', (this.elements.button.getAttribute('aria-expanded') === 'false').toString());
}
closeSelector(event) {
var _this = this;
setTimeout(function(){_this.hidePanel();}, 150)
}
}
customElements.define('sort-by-select', SortByHandler);
{% endjavascript %}
{%- render "sticky-filter-button", section:section, enable_filtering:enable_filtering, enable_sorting:enable_sorting -%}
{% schema %}
{
"name": "t:sections.main-collection-product-grid.name",
"tag": "section",
"settings": [
{
"type": "header",
"content": "t:sections.general.settings.header_layout.content"
},
{
"type": "select",
"id": "top_spacing",
"options": [
{
"value": "none",
"label": "t:sections.general.settings.top_spacing.options__none.label"
},
{
"value": "small",
"label": "t:sections.general.settings.top_spacing.options__small.label"
},
{
"value": "medium",
"label": "t:sections.general.settings.top_spacing.options__medium.label"
},
{
"value": "normal",
"label": "t:sections.general.settings.top_spacing.options__normal.label"
}
],
"default": "normal",
"label": "t:sections.general.settings.top_spacing.label"
},
{
"type": "select",
"id": "width",
"options": [
{
"value": "default",
"label": "t:sections.general.settings.width.options__default.label"
},
{
"value": "page-width",
"label": "t:sections.general.settings.width.options__boxed.label"
},
{
"value": "page-wide",
"label": "t:sections.general.settings.width.options__wide.label"
}
],
"default": "page-width",
"label": "t:sections.general.settings.width.label",
"info": "t:sections.general.settings.width.info"
},
{
"type": "select",
"id": "grid",
"options": [
{
"value": "col-6",
"label": "t:sections.general.settings.grid.options__2.label"
},
{
"value": "col-4",
"label": "t:sections.general.settings.grid.options__3.label"
},
{
"value": "col-st-6 col-3",
"label": "t:sections.general.settings.grid.options__4.label"
},
{
"value": "col-md-4 col-one_fifth",
"label": "t:sections.general.settings.grid.options__5.label"
},
{
"value": "col-md-4 col-2",
"label": "t:sections.general.settings.grid.options__6.label"
}
],
"default": "col-md-4 col-2",
"label": "t:sections.general.settings.grid.label"
},
{
"type": "select",
"id": "mobile_grid",
"options": [
{
"value": "12",
"label": "t:sections.general.settings.mobile_grid.options__1.label"
},
{
"value": "6",
"label": "t:sections.general.settings.mobile_grid.options__2.label"
}
],
"default": "6",
"label": "t:sections.general.settings.mobile_grid.label"
},
{
"type": "select",
"id": "enable_filtering",
"options": [
{
"value": "disable",
"label": "t:sections.main-collection-product-grid.settings.enable_filtering.options__1.label"
},
{
"value": "enable",
"label": "t:sections.main-collection-product-grid.settings.enable_filtering.options__2.label"
},
{
"value": "enable_closed",
"label": "t:sections.main-collection-product-grid.settings.enable_filtering.options__2_1.label"
},
{
"value": "horizontal",
"label": "t:sections.main-collection-product-grid.settings.enable_filtering.options__3.label"
}
],
"default": "enable",
"label": "t:sections.main-collection-product-grid.settings.enable_filtering.label",
"info": "t:sections.main-collection-product-grid.settings.enable_filtering.info"
},
{
"type": "checkbox",
"id": "enable_sorting",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_sorting.label"
},
{
"type": "checkbox",
"id": "enable_sticky_filter_button",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_sticky_filter_button.label"
},
{
"type": "checkbox",
"id": "enable_products_count",
"default": true,
"label": "t:sections.main-collection-product-grid.settings.enable_products_count.label"
},
{
"type": "select",
"id": "pagination_aligment",
"options": [
{
"value": "text-left",
"label": "t:sections.general.settings.texts_aligment.options__left.label"
},
{
"value": "text-center",
"label": "t:sections.general.settings.texts_aligment.options__center.label"
},
{
"value": "text-right",
"label": "t:sections.general.settings.texts_aligment.options__right.label"
}
],
"default": "text-left",
"label": "Pagination aligment"
},
{
"type": "header",
"content": "t:sections.featured-collection.settings.header_products.content"
},
{
"type": "range",
"id": "product_limit",
"min": 2,
"max": 50,
"step": 1,
"default": 6,
"label": "t:sections.main-collection-product-grid.settings.products_per_page.label"
},
{
"type": "select",
"id": "image_ratio",
"options": [
{
"value": "auto",
"label": "t:sections.general.settings.image_ratio.options__auto.label"
},
{
"value": "0.75",
"label": "t:sections.general.settings.image_ratio.options__portrait.label"
},
{
"value": "1.333333",
"label": "t:sections.general.settings.image_ratio.options__landscape.label"
},
{
"value": "1",
"label": "t:sections.general.settings.image_ratio.options__square.label"
},
{
"value": "1, round-image",
"label": "t:sections.general.settings.image_ratio.options__round.label"
}
],
"default": "auto",
"label": "t:sections.general.settings.image_ratio.label"
},
{
"type": "checkbox",
"id": "show_secondary_image",
"default": true,
"label": "t:sections.featured-collection.settings.show_secondary_image.label"
},
{
"type": "select",
"id": "texts_aligment",
"options": [
{
"value": "text-left",
"label": "t:sections.general.settings.texts_aligment.options__left.label"
},
{
"value": "text-center",
"label": "t:sections.general.settings.texts_aligment.options__center.label"
}
],
"default": "text-center",
"label": "t:sections.general.settings.texts_aligment.label"
},
{
"type": "select",
"id": "product_name_size",
"options": [
{
"value": "normal",
"label": "t:sections.general.settings.description_size.options__normal.label"
},
{
"value": "body2",
"label": "t:sections.general.settings.description_size.options__small.label"
}
],
"default": "body2",
"label": "t:sections.featured-collection.settings.product_name_size.label"
},
{
"type": "checkbox",
"id": "show_vendor",
"default": true,
"label": "t:sections.featured-collection.settings.show_vendor.label"
},
{
"type": "checkbox",
"id": "show_type",
"default": true,
"label": "t:sections.featured-collection.settings.show_type.label"
},
{
"type": "checkbox",
"id": "show_price",
"default": true,
"label": "t:sections.featured-collection.settings.show_price.label"
},
{
"type": "checkbox",
"id": "truncate_product_name",
"default": false,
"label": "t:sections.featured-collection.settings.truncate_product_name.label"
},
{
"type": "checkbox",
"id": "hover_underline",
"default": false,
"label": "t:sections.general.settings.hover_underline.label"
},
{
"type": "select",
"id": "button_type_product",
"options": [
{
"value": "hide",
"label": "t:sections.featured-collection.settings.button_type_product.options__hide.label"
},
{
"value": "show",
"label": "t:sections.featured-collection.settings.button_type_product.options__show.label"
},
{
"value": "only_text",
"label": "t:sections.featured-collection.settings.button_type_product.options__only_text.label"
},
{
"value": "only_icon",
"label": "t:sections.featured-collection.settings.button_type_product.options__only_icon.label"
}
],
"default": "show",
"label": "t:sections.featured-collection.settings.button_type_product.label"
},
{
"type": "checkbox",
"id": "show_button_quickview",
"default": true,
"label": "t:sections.featured-collection.settings.show_button_quickview.label"
},
{
"type": "checkbox",
"id": "show_badge_on_sale",
"default": true,
"label": "t:sections.featured-collection.settings.show_badge_on_sale.label"
},
{
"type": "checkbox",
"id": "show_badge_sold_out",
"default": true,
"label": "t:sections.featured-collection.settings.show_badge_sold_out.label"
},
{
"type": "checkbox",
"id": "show_badge_feature",
"default": true,
"label": "t:sections.featured-collection.settings.show_badge_feature.label"
}
]
}
{% endschema %}