Shopify themes, liquid, logos, and UX
Good day, Sorry if this question was asked before i wouldn't find the asnwer for it.
On the collection pages in my store the Sold Out text is displayed no the way i would like it (I can't explain) so here is the picture:
I would like for it to be 'SOLD OUT' (Without the "_" and capitalized)
Store link: https://www.truetosole.hu/en
Thank you very much for your help in advance!
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
.template-collection .ProductItem__Wrapper {
text-transform: uppercase !important;
}
Thanks!
The solution worked and made them Uppercase but how can i remove the Undescore ?
Please share your sections/collection.liquid file code .
Thanks!
I believe this is the one:
{%- if section.settings.show_layout_switch -%}
{%- assign desktop_items_per_row = cart.attributes.collection_desktop_items_per_row | default: section.settings.grid_desktop_items_per_row | times: 1 -%}
{%- assign mobile_items_per_row = cart.attributes.collection_mobile_items_per_row | default: section.settings.grid_mobile_items_per_row | times: 1 -%}
{%- if desktop_items_per_row >= 3 and desktop_items_per_row != section.settings.grid_desktop_items_per_row -%}
{%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row -%}
{%- endif -%}
{%- else -%}
{%- assign desktop_items_per_row = section.settings.grid_desktop_items_per_row | times: 1 -%}
{%- assign mobile_items_per_row = section.settings.grid_mobile_items_per_row | times: 1 -%}
{%- endif -%}
{%- if desktop_items_per_row == 4 -%}
{%- assign tablet_items_per_row = 3 -%}
{%- else -%}
{%- assign tablet_items_per_row = 2 -%}
{%- endif -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
CONTENT FOR NORMAL TEMPLATE
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- assign active_tags = '' -%}
{%- for tag in current_tags -%}
{%- assign tag_as_handle = tag | replace: ''', '' | replace: '"', '' | handle -%}
{%- assign active_tags = active_tags | append: tag_as_handle -%}
{%- unless forloop.last -%}
{%- assign active_tags = active_tags | append: '+' -%}
{%- endunless -%}
{%- endfor -%}
{%- capture section_settings -%}
{
"collectionUrl": {{ collection.url | default: '/collections/all' | json }},
"currentTags": {% if active_tags != blank %}{{ active_tags | split: '+' | json }}{% else %}[]{% endif %},
"sortBy": {{ collection.sort_by | default: collection.default_sort_by | json }},
"filterPosition": {{ section.settings.filter_position | json }}
}
{%- endcapture -%}
<section data-section-id="{{ section.id }}" data-section-type="collection" data-section-settings='{{ section_settings }}'>
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
COLLECTION INFO
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- if section.settings.show_collection_info and collection.all_products_count > 0 -%}
{%- if section.settings.show_collection_image and collection.image and collection.template_suffix != 'no-image' -%}
<div class="FlexboxIeFix">
<header class="PageHeader PageHeader--withBackground {% if section.settings.collection_image_size != 'normal' %}PageHeader--{{ section.settings.collection_image_size }}{% endif %}" style="background: url({{ collection.image | img_url: '1x1', format: 'jpg' }})">
<div class="PageHeader__ImageWrapper Image--lazyLoad Image--fadeIn Image--contrast"
data-optimumx="1.2"
data-bgset="{{ collection.image | img_url: '600x' }} 600w, {{ collection.image | img_url: '800x' }} 800w, {{ collection.image | img_url: '1200x' }} 1200w, {{ collection.image | img_url: '1400x' }} 1400w, {{ collection.image | img_url: '1600x' }} 1600w">
</div>
<noscript>
<div class="PageHeader__ImageWrapper Image--contrast" style="background-image: url({{ collection.image | img_url: '800x' }})"></div>
</noscript>
<div class="Container">
<div class="SectionHeader SectionHeader--center">
<h1 class="SectionHeader__Heading Heading u-h1 boost-pfs-filter-collection-header">{{ collection.title }}</h1>
</div>
</div>
</header>
</div>
{%- else -%}
<header class="PageHeader">
<div class="Container">
<div class="SectionHeader SectionHeader--center">
<h1 class="SectionHeader__Heading Heading u-h1 boost-pfs-filter-collection-header">{{ collection.title }}</h1>
</div>
</div>
</header>
{%- endif -%}
{%- endif -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
COLLECTION TOOLBAR
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- if collection.all_products_count > 0 -%}
{%- comment -%}
In order to provide more predictable results (for instance not showing filters by tag even if the option is checked in settings,
but that there are no tags for the given collection to show), we are doing some more logic here. Basically, we try to check if there
are tags to show by stripping internal tags (those that start by "__")
{%- endcomment -%}
{%- assign has_visible_tags = false -%}
{%- case section.settings.filter_mode -%}
{%- when 'tag' -%}
{%- for tag in collection.all_tags -%}
{%- unless tag contains '__' -%}
{%- assign has_visible_tags = true -%}
{%- break -%}
{%- endunless -%}
{%- endfor -%}
{%- when 'group' -%}
{%- for tag in collection.all_tags -%}
{%- assign tag_parts = tag | split: '_' -%}
{%- if tag_parts.size == 2 -%}
{%- assign has_visible_tags = true -%}
{%- endif -%}
{%- endfor -%}
{%- endcase -%}
{%- assign show_filters = true -%}
{%- assign quick_links = linklists[section.settings.filter_menu] -%}
{%- capture collection_toolbar -%}
{%- if show_filters or section.settings.show_sort_by or section.settings.show_layout_switch -%}
<div class="dsxcc CollectionToolbar CollectionToolbar--{{ section.settings.toolbar_position }} {% unless section.settings.show_layout_switch and show_filters == false and section.settings.show_sort_by == false %}CollectionToolbar--reverse{% endunless %}">
{%- if show_filters or section.settings.show_sort_by -%}
<div class="CollectionToolbar__Group">
{%- if show_filters -%}
<button class="CollectionToolbar__Item CollectionToolbar__Item--filter Heading {% unless current_tags %}Text--subdued{% endunless %} u-h6 {% if section.settings.filter_position != 'drawer' %}hidden-lap-and-up{% endif %}"
data-action="open-drawer"
data-drawer-id="collection-filter-drawer"
aria-label="{{ 'collection.filter.show_filter' | t }}">
{{ 'collection.filter.title' | t }} {% if current_tags %}<span class="Text--subdued">({{ current_tags.size }})</span>{% endif %}
</button>
{%- endif -%}
{%- if section.settings.show_sort_by -%}
<button class="CollectionToolbar__Item CollectionToolbar__Item--sort Heading Text--subdued u-h6"
aria-label="{{ 'collection.sorting.show_sort' | t }}"
aria-haspopup="true"
aria-expanded="false"
aria-controls="collection-sort-popover">
{{ 'collection.sorting.title' | t }} {% include 'icon' with 'select-arrow' %}
</button>
{%- endif -%}
</div>
{%- endif -%}
{%- if section.settings.show_layout_switch -%}
<div class="CollectionToolbar__Item CollectionToolbar__Item--layout">
<div class="CollectionToolbar__LayoutSwitch hidden-tablet-and-up">
<button aria-label="{{ 'collection.layout.show_one_per_row' | t }}" class="CollectionToolbar__LayoutType {% if mobile_items_per_row == 1 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="mobile" data-count="1">{% include 'icon' with 'wall-1' %}</button>
<button aria-label="{{ 'collection.layout.show_two_per_row' | t }}" class="CollectionToolbar__LayoutType {% if mobile_items_per_row == 2 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="mobile" data-count="2">{% include 'icon' with 'wall-2' %}</button>
</div>
<div class="CollectionToolbar__LayoutSwitch hidden-phone">
<button aria-label="{{ 'collection.layout.show_two_per_row' | t }}" class="CollectionToolbar__LayoutType {% if desktop_items_per_row == 2 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="desktop" data-count="2">{% include 'icon' with 'wall-2' %}</button>
<button aria-label="{{ 'collection.layout.show_four_per_row' | t }}" class="CollectionToolbar__LayoutType {% if desktop_items_per_row >= 3 %}is-active{% endif %}" data-action="change-layout-mode" data-grid-type="desktop" data-count="{{ section.settings.grid_desktop_items_per_row }}">{% include 'icon' with 'wall-4' %}</button>
</div>
</div>
{%- endif -%}
</div>
{%- endif -%}
{%- endcapture -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
FILTERS AND SORT BY POPOVER
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
{%- assign quick_links = linklists[section.settings.filter_menu] -%}
<div id="collection-filter-drawer" class="CollectionFilters Drawer Drawer--secondary Drawer--fromRight" aria-hidden="true">
<header class="Drawer__Header Drawer__Header--bordered Drawer__Header--center Drawer__Container">
<span class="Drawer__Title Heading u-h4">{{ 'collection.filter.all' | t }}</span>
<button class="Drawer__Close Icon-Wrapper--clickable" data-action="close-drawer" data-drawer-id="collection-filter-drawer" aria-label="{{ 'header.navigation.close_sidebar' | t }}">
{%- include 'icon' with 'close' -%}
</button>
</header>
<div class="Drawer__Content">
<div class="Drawer__Main" data-scrollable>
<div class="boost-pfs-filter-tree boost-pfs-filter-tree-v"></div>
</div>
</div>
</div>
{%- if section.settings.show_sort_by -%}
<div id="collection-sort-popover" class="Popover" aria-hidden="true">
{%- assign current_sort_by = collection.sort_by | default: collection.default_sort_by -%}
<header class="Popover__Header">
<button class="Popover__Close Icon-Wrapper--clickable" data-action="close-popover">{% include 'icon' with 'close' %}</button>
<span class="Popover__Title Heading u-h4">{{ 'collection.sorting.title' | t }}</span>
</header>
<div class="Popover__ValueList boost-pfs-filter-top-sorting" data-scrollable>{% include 'boost-pfs-filter-skeleton', width: 3 %}</div>
</div>
{%- endif -%}
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
COLLECTION PRODUCTS
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}
<div class="CollectionMain">
{%- if section.settings.toolbar_position == 'top' -%}
{{- collection_toolbar -}}
{%- endif -%}
<div class="CollectionInner">
{%- if show_filters and section.settings.filter_position == 'sidebar' -%}
<div class="CollectionInner__Sidebar {% if collection_toolbar != blank and section.settings.toolbar_position == 'top' %}CollectionInner__Sidebar--withTopToolbar{% endif %} hidden-pocket">
<div class="CollectionFilters">
<div class="boost-pfs-filter-tree-mobile-button">{% include 'boost-pfs-filter-skeleton', type: 'button' %}</div>
<div class="boost-pfs-filter-tree boost-pfs-filter-tree-v">
{% comment %} Include placeholder template {% endcomment %}
{% include 'boost-pfs-filter-skeleton', type: 'filter-tree' %}
</div>
</div>
</div>
{%- endif -%}
<div class="CollectionInner__Products" >
{%- paginate collection.products by section.settings.grid_items_per_page -%}
<div class="ProductListWrapper">
<div class="boost-pfs-filter-products ProductList ProductList--grid {% if paginate.pages > 1 %}ProductList--removeMargin{% endif %} Grid" data-bc-sort="{{ collection.default_sort_by }}" data-mobile-count="{{ mobile_items_per_row }}" data-desktop-count="{{ desktop_items_per_row }}">
{%- for product in collection.products -%}
{% if product.available %}
<div class="Grid__Cell 1/{{ mobile_items_per_row }}--phone 1/{{ tablet_items_per_row }}--tablet-and-up 1/{{ desktop_items_per_row }}--{% if section.settings.filter_position == 'drawer' %}lap-and-up{% else %}desk{% endif %}">
{%- include 'product-item', show_product_info: true, show_color_swatch: section.settings.show_color_swatch, show_labels: true, show_vendor: section.settings.show_vendor -%}
</div>
{% endif %}
{%- endfor -%}
</div>
</div>
<div class="boost-pfs-filter-bottom-pagination">{%- include 'pagination' -%}
</div>
{%- if section.settings.toolbar_position == 'bottom' -%}
{{- collection_toolbar -}}
{%- endif -%}
{%- if collection.description != blank -%}
<div class="SectionHeader__Description Rte boost-pfs-filter-collection-description" style="max-width: 100%;
text-align: left;
margin-bottom: 24px; padding: 24px 24px 0 24px;">
{{- collection.description -}}
</div>
{%- endif -%}
<div class="boost-pfs-filter-load-more"></div>
{%- endpaginate -%}
</div>
</div>
</div>
{%- else -%}
<div class="EmptyState">
<div class="Container">
<h3 class="EmptyState__Title Heading u-h5">{{ 'collection.general.empty' | t: collection_title: collection.title }}</h3>
<a href="{{ shop.url }}" class="EmptyState__Action Button Button--primary">{{ 'collection.general.empty_button' | t }}</a>
</div>
</div>
{%- endif -%}
</section>
{%- capture hack -%}
{%- comment -%}This is just an ugly hack to make those variables appear as part of the theme editor in the General Settings{%- endcomment -%}
{{ settings.product_list_horizontal_spacing }},{{ settings.product_list_vertical_spacing }}
{%- endcapture -%}
<script>
// Declare boostPFSThemeConfig variable
var boostPFSThemeConfig = {
label: {
sorting: {% assign temp = 'collections.sorting.title' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "Sorting" {% endunless %},
sorting_best_selling: {% assign temp = 'collections.sorting.best_selling' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "Best Selling" {% endunless %},
sorting_featured: {% assign temp = 'collections.sorting.featured' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "Featured" {% endunless %},
sorting_title_ascending: {% assign temp = 'collections.sorting.az' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "Alphabetically, A-Z" {% endunless %},
sorting_title_descending: {% assign temp = 'collections.sorting.za' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "Alphabetically, Z-A" {% endunless %},
sorting_price_ascending: {% assign temp = 'collections.sorting.price_ascending' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "Lowest Price" {% endunless %},
sorting_price_descending: {% assign temp = 'collections.sorting.price_descending' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "Highest Price" {% endunless %},
sorting_date_ascending: {% assign temp = 'collections.sorting.date_ascending' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "Date, Old to New" {% endunless %},
sorting_date_descending: {% assign temp = 'collections.sorting.date_descending' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "Date, New to Old" {% endunless %},
sorting_sale_descending: {% assign temp = 'collections.sorting.sale_descending' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "% Off" {% endunless %},
sorting_relevance: {% assign temp = 'collections.sorting.relevance' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "Relevance" {% endunless %},
view_product: {% assign temp = 'collection.product.view_product' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "View" {% endunless %},
sale: {% assign temp = 'product.labels.on_sale' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "On Sale" {% endunless %},
sold_out: {% assign temp = 'product.labels.sold_out' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "Sold out" {% endunless %},
from: {% assign temp = 'collection.product.from_price_html' | t %} {% unless temp contains 'translation missing' %} "{{ temp }}" {% else %} "From" {% endunless %},
search_results_zero: "{{ 'search.general.results_with_terms_count.zero' | t }}",
search_results_one: "{{ 'search.general.results_with_terms_count.one' | t }}",
search_results_other: "{{ 'search.general.results_with_terms_count.other' | t }}",
},
custom: {
section_id : {{ section.id | json }},
product_show_price_on_hover: {{ settings.product_show_price_on_hover | json }},
product_info_alignment: {{ settings.product_info_alignment | json }},
product_image_size: {{ settings.product_image_size | json }},
product_show_secondary_image: {{ settings.product_show_secondary_image | json }},
use_horizontal: false,
show_product_info: true,
show_color_swatch: {{ section.settings.show_color_swatch | json}},
show_labels: true,
mobile_row: '{{ mobile_items_per_row }}',
tablet_row: '{{ tablet_items_per_row }}',
desktop_row: '{{ desktop_items_per_row }}',
filter_position: '{{section.settings.filter_position}}',
products_per_page: {% if section.settings.grid_items_per_page %} {{ section.settings.grid_items_per_page | json }} {% else %} 16 {% endif %},
products_per_row: {% if section.settings.grid_desktop_items_per_row %} {{ section.settings.grid_desktop_items_per_row | json }} {% else %} 4 {% endif %},
products_per_row_mobile: {% if section.settings.grid_mobile_items_per_row %} {{ section.settings.grid_mobile_items_per_row | json }} {% else %} 2 {% endif %},
show_vendor: {% if section.settings.show_vendor %} {{ section.settings.show_vendor | json }} {% else %} false {% endif %},
show_color_swatch: {% if section.settings.show_color_swatch %} {{ section.settings.show_color_swatch | json }} {% else %} false {% endif %},
show_price: {% if section.settings.show_price %} {{ section.settings.show_price | json }} {% else %} false {% endif %},
show_sale_label: {% if section.settings.show_sale_label %} {{ section.settings.show_sale_label | json }} {% else %} false {% endif %},
show_sold_out_label: {% if section.settings.show_sold_out_label %} {{ section.settings.show_sold_out_label | json }} {% else %} false {% endif %},
active_image_swap: {% if section.settings.active_image_swap %} {{ section.settings.active_image_swap | json }} {% else %} false {% endif %},
show_sorting: {% if section.settings.show_sort_by %} {{ section.settings.show_sort_by | json }} {% else %} false {% endif %},
show_layout_switch: {% if section.settings.show_layout_switch %} {{ section.settings.show_layout_switch | json }} {% else %} false {% endif %},
theme_script: "{{ 'theme.min.js' | asset_url }}",
}
};
</script>
<style>
@media screen and (min-width: 600px) {
.dsxcc {
width:96%;
margin:auto;
}
}
</style>
{% schema %}
{
"name": "Collection page",
"class": "shopify-section--bordered",
"settings": [
{
"type": "checkbox",
"id": "show_collection_info",
"label": "Show collection info",
"default": true
},
{
"type": "checkbox",
"id": "show_collection_image",
"label": "Show collection image",
"default": false
},
{
"type": "checkbox",
"id": "apply_overlay",
"label": "Apply overlay on image",
"info": "This can improve text visibility.",
"default": true
},
{
"type": "checkbox",
"id": "show_color_swatch",
"label": "Show color swatch",
"info": "Some colors appear white? [Learn more](http://support.maestrooo.com/article/80-product-uploading-custom-color-for-color-swatch).",
"default": false
},
{
"type": "checkbox",
"id": "show_vendor",
"label": "Show vendor",
"default": false
},
{
"type": "select",
"id": "collection_image_size",
"label": "Collection image size",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "normal",
"label": "Normal"
},
{
"value": "large",
"label": "Large"
}
],
"default": "normal"
},
{
"type": "header",
"content": "Toolbar"
},
{
"type": "checkbox",
"id": "show_sort_by",
"label": "Show sort by",
"default": true
},
{
"type": "checkbox",
"id": "show_layout_switch",
"label": "Show layout switch"
},
{
"type": "select",
"id": "toolbar_position",
"label": "Position",
"options": [
{
"value": "top",
"label": "Top"
},
{
"value": "bottom",
"label": "Bottom"
}
],
"default": "top"
},
{
"type": "header",
"content": "Filters"
},
{
"type": "select",
"id": "filter_position",
"label": "Desktop position",
"options": [
{
"value": "sidebar",
"label": "Sidebar"
},
{
"value": "drawer",
"label": "Drawer"
}
],
"default": "sidebar"
},
{
"type": "select",
"id": "filter_mode",
"label": "Mode",
"info": "Filters by group requires specific tag formatting. [Learn more](https://help.shopify.com/manual/using-themes/themes-by-shopify/supply#product-tips-tips-specific)",
"options": [
{
"value": "hidden",
"label": "Hidden"
},
{
"value": "tag",
"label": "By tag"
},
{
"value": "group",
"label": "By group"
}
],
"default": "tag"
},
{
"type": "checkbox",
"id": "show_filter_color_swatch",
"label": "Show filter color swatch",
"info": "This is only used if filters by group is enabled.",
"default": true
},
{
"type": "link_list",
"id": "filter_menu",
"label": "Quick links",
"info": "This menu won't show dropdown items."
},
{
"type": "header",
"content": "Grid"
},
{
"type": "range",
"id": "grid_items_per_page",
"label": "Products per page",
"min": 4,
"max": 48,
"step": 4,
"default": 16
},
{
"type": "select",
"id": "grid_mobile_items_per_row",
"label": "Products per row (mobile)",
"options": [
{
"value": "1",
"label": "1"
},
{
"value": "2",
"label": "2"
}
],
"default": "2"
},
{
"type": "range",
"min": 2,
"max": 4,
"id": "grid_desktop_items_per_row",
"label": "Products per row (desktop)",
"default": 4
}
]
}
{% endschema %}
Not found sold out code please share your theme zip file i will check theme file and send correct solution for you.
Thanks!
Please check URL for help https://community.shopify.com/c/shopify-design/change-sold-out-text-on-collection-page/td-p/1031262
thanks!
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024