Shopify themes, liquid, logos, and UX
Good evening, my name is Ernesto, I have been working on shopify for a very short time so I am very inexperienced.
My goal would be to eliminate that red plate with the wording new arrivals, I would like to add the current collection under the brand name (Example: Spring-Summer 2022 Collection)
The site in question was made by a user I don't know, so I hope to find useful advice on this community.
I sincerely thank those who will be able to help me and will be able to teach me useful notions
Solved! Go to the solution
This is an accepted solution.
Hi @ErnestoP,
Please find 'grid-product__tag grid-product__tag--custom' and remove code here:
Hi @ErnestoP,
Please send your site and if your site is password protected, please send me the password. I will check it.
Hi, thanks for your concern.
Unfortunately I am not authorized to give you the passwords of the site, thank you anyway, do you have any other ideas to help me solve the problem?
Hi @ErnestoP,
If you are using impulse theme, please send me the code of product-grid-item.liquid file, I will check and guide you in detail.
Hi @ErnestoP,
Go to snippets > product-grid-item.liquid file and send me the full code.
Hope it is clear to you.
Thank you enormously for your patience
{%- liquid
unless grid_item_width
assign grid_item_width = 'medium-up--one-quarter small--one-half'
endunless
unless per_row
assign per_row = '4'
endunless
assign on_sale = false
if product.compare_at_price > product.price
assign on_sale = true
endif
assign product_tags = product.tags | join: ','
assign has_custom_label = false
if product_tags contains '_label_'
for tag in product.tags
if tag contains '_label_'
assign tag_starts_with = tag | slice: 0
if tag_starts_with == '_'
assign has_custom_label = true
assign custom_label = tag | replace: '_label_', ''
endif
endif
endfor
endif
-%}
<div class="grid__item grid-product {{ grid_item_width }}{% if settings.quick_shop_enable %} grid-product__has-quick-shop{% endif %}" data-aos="row-of-{{ per_row }}" data-product-handle="{{ product.handle }}" data-product-id="{{ product.id }}">
<div class="grid-product__content">
{%- if has_custom_label -%}
<div class="grid-product__tag grid-product__tag--custom">
{{ custom_label }}
</div>
{%- else -%}
{%- unless product.available -%}
<div class="grid-product__tag grid-product__tag--sold-out">
{{ 'products.product.sold_out' | t }}
</div>
{%- endunless -%}
{%- if on_sale and product.available -%}
<div class="grid-product__tag grid-product__tag--sale">
{{ 'products.general.sale' | t }}
</div>
{%- endif -%}
{%- endif -%}
{%- liquid
assign fixed_aspect_ratio = false
unless settings.product_grid_image_size == 'natural'
assign fixed_aspect_ratio = true
endunless
assign preview_image = product.featured_media.preview_image
assign img_url = preview_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
-%}
<a href="{{ product.url | within: collection }}" class="grid-product__link">
<div class="grid-product__image-mask">
{%- if settings.quick_shop_enable -%}
<div class="quick-product__btn quick-product__btn--not-ready js-modal-open-quick-modal-{{ product.id }} small--hide">
<span class="quick-product__label">{{ settings.quick_shop_text }}</span>
</div>
{%- endif -%}
{%- if fixed_aspect_ratio -%}
<div
class="grid__image-ratio grid__image-ratio--{{ settings.product_grid_image_size }}">
<img class="lazyload{% unless settings.product_grid_image_fill %} grid__image-contain{% endunless %}"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080]"
data-aspectratio="{{ preview_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ preview_image.alt | escape }}">
</div>
{%- else -%}
<div class="image-wrap"
style="height: 0; padding-bottom: {{ 100 | divided_by: preview_image.aspect_ratio }}%;"
>
<img class="grid-product__image lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 900, 1080]"
data-aspectratio="{{ preview_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ preview_image.alt | escape }}">
<noscript>
<img class="grid-product__image lazyloaded"
src="{{ preview_image | img_url: '400x' }}"
alt="{{ preview_image.alt | escape }}">
</noscript>
</div>
{%- endif -%}
{%- if settings.product_hover_image and product.media.size > 1 -%}
{%- for media in product.media offset: 1 limit: 1 -%}
{%- assign second_image = media.preview_image -%}
{%- endfor -%}
<div class="grid-product__secondary-image small--hide">
{%- assign img_url = second_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540, 720, 1000]"
data-aspectratio="{{ second_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ second_image.alt }}">
</div>
{%- endif -%}
{%- if settings.enable_swatches -%}
{%- assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase -%}
{%- for option in product.options_with_values -%}
{%- liquid
assign option_name = option.name | downcase
assign is_color = false
if option_name contains swatch_trigger
assign is_color = true
elsif swatch_trigger == 'color' and option_name contains 'colour'
assign is_color = true
endif
-%}
{%- if is_color -%}
{%- assign option_index = forloop.index0 -%}
{%- assign values = '' -%}
{%- for variant in product.variants -%}
{%- assign value = variant.options[option_index] %}
{%- unless values contains value -%}
{%- liquid
assign values = values | join: ',' | append: ',' | append: value | split: ','
-%}
{%- if variant.image -%}
<div
class="grid-product__color-image grid-product__color-image--{{ variant.id }} small--hide">
</div>
{%- endif -%}
{%- endunless -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
</div>
<div class="grid-product__meta">
<div class="grid-product__title grid-product__title--{{ settings.type_product_style }}">{{ product.title }}</div>
{% render 'judgeme_widgets', widget_type: 'judgeme_preview_badge', jm_style: '', concierge_install: true, product: product %}
{%- if settings.vendor_enable -%}
<div class="grid-product__vendor">{{ product.vendor }}</div>
{%- endif -%}
<div class="grid-product__price">
{%- if on_sale -%}
<span class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
<span class="grid-product__price--original">{{ product.compare_at_price | money }}</span>
<span class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{%- endif -%}
{%- if product.price_varies -%}
{%- assign price = product.price_min | money -%}
{{ 'products.general.from_text_html' | t: price: price }}
{%- else -%}
{{ product.price | money }}
{%- endif -%}
{%- if on_sale -%}
{%- if settings.product_save_amount -%}
{%- if settings.product_save_type == 'dollar' -%}
{%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | money }}{%- endcapture -%}
{%- else -%}
{%- capture saved_amount -%}{{ product.compare_at_price | minus: product.price | times: 100.0 | divided_by: product.compare_at_price | round }}%{%- endcapture -%}
{%- endif -%}
<span class="grid-product__price--savings">
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
</span>
{%- endif -%}
{%- endif -%}
{%- assign product_variant = product.selected_or_first_available_variant -%}
{%- if product_variant.unit_price_measurement -%}
<div class="product__unit-price">
{%- capture unit_price_base_unit -%}
{%- if product_variant.unit_price_measurement -%}
{%- if product_variant.unit_price_measurement.reference_value != 1 -%}
{{ product_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ product_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- endcapture -%}
{{ product_variant.unit_price | money }}/{{ unit_price_base_unit }}
</div>
{%- endif -%}
</div>
{%comment%} {%- for variant in product.variants -%}
{%- capture contentForQuerystring -%}{{ content_for_header }}{%- endcapture -%}
{%- assign pageUrl = contentForQuerystring | split:'"pageurl":"' | last | split:'"' | first | split:'.myshopify.com' | last |
replace:'\/','/' |
replace:'%20',' ' |
replace:'\u0026','&'
-%}
{%- assign itemShow = '' -%}
<!-- {{pageUrl | split:'?' | last}} -->
<!-- {{canonical_url}} -->
{{variant.inventory_quantity}}
{%endfor%} {%endcomment%}
</div>
</a>
</div>
{%- if settings.enable_swatches -%}
{%- liquid
assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase
assign swatch_file_extension = 'png'
assign color_count = 0
-%}
{%- for option in product.options_with_values -%}
{%- liquid
assign option_name = option.name | downcase
assign is_color = false
if option_name contains swatch_trigger
assign is_color = true
elsif swatch_trigger == 'color' and option_name contains 'colour'
assign is_color = true
endif
-%}
{%- if is_color -%}
{%- assign option_index = forloop.index0 -%}
{%- assign values = '' -%}
<div class="grid-product__colors grid-product__colors--{{ product.id }}">
{%- for variant in product.variants -%}
{%- assign value = variant.options[option_index] %}
{%- unless values contains value -%}
{%- liquid
assign values = values | join: ',' | append: ',' | append: value | split: ','
assign color_file_name = value | handle | append: '.' | append: swatch_file_extension
assign color_image = color_file_name | file_img_url: '50x50' | prepend: 'https:' | split: '?' | first
assign color_swatch_fallback = value | split: ' ' | last | handle
assign color_count = color_count | plus: 1
-%}
<a
href="{{ variant.url | within: collection }}"
class="color-swatch color-swatch--small color-swatch--{{ value | handle }}{% if variant.image %} color-swatch--with-image{% endif %}"
{% if variant.image %}
data-variant-id="{{ variant.id }}"
data-variant-image="{{ variant.image | img_url: '400x' }}"
{% endif %}
aria-label="{{ product.title }} - {{ value }}"
style="background-color: {{ color_swatch_fallback }};{% if images[color_file_name] != blank %} background-image: url({{ color_image }});{% endif %}">
<span class="visually-hidden">{{ value }}</span>
</a>
{%- endunless -%}
{%- endfor -%}
</div>
{%- if color_count < 2 -%}
{%- style -%}
.grid-product__colors--{{ product.id }} {
display: none;
}
{%- endstyle -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- if settings.enable_product_reviews -%}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{%- endif -%}
</div>
This is an accepted solution.
Hi @ErnestoP,
Please find 'grid-product__tag grid-product__tag--custom' and remove code here:
Ok. Nice. You are awesome and super helpful, I ask you the last favor, how can I add a text Spring-Summer 2022 below the article
Hi @ErnestoP,
Does it display differently between products?
What is it, vendor, type or collection. Or do you want it to display with the tag.
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
No, under the product should be displayed Spring Summer 2022
Hi @ErnestoP,
Please find 'grid-product__title' and add code here:
Code:
<p>Spring Summer 2022</p>
Can you please tell me which theme you are using, that way we can see if the tag was a default feature (which can be changed from dashboard) or a hard coded thing?
Copy of Impulse-5.0 | VOLPEA | 9/28/2021 | OPT
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