@Daniel_Ward_CC
try this code
also please add any meta code any one product and check
{% comment %}
Renders list of products in grid layout
Accepts:
- product: {Object} product (required)
- grid_strings: {String} contains a string of grid classes
- animation_delay: {Int} animation timing for load
- last_element: {Boolean} True when custom image is taking up the first slot for the collection
and the loop is on the last element for the page.
- index: element index in the loop
Usage:
{% render 'product-grid-item', product: product, grid_strings: grid_strings, index: index %}
{% endcomment %}
{%- assign additional_attributes = additional_attributes | default: '' -%}
{%- assign showReviews = showReviews | default: false -%}
{%- unless grid_strings -%}
{% assign grid_strings = "one-whole" %}
{%- endunless -%}
{%- assign border_class = '' -%}
{%- if settings.product_grid_outline == false -%}
{%- assign border_class = 'product-item--borderless' -%}
{%- endif -%}
{%- assign alignment_class = '' -%}
{%- if settings.product_grid_center == true -%}
{%- assign alignment_class = 'product-item--centered' -%}
{%- endif -%}
{%- if settings.quickview_enable == false and settings.color_swatches -%}
{%- assign has_colors = false -%}
{%- capture swatches -%}
{%- capture swatch_translation -%}{{ 'general.swatches.color' | t }}{%- endcapture -%}
{%- assign swatch_labels = swatch_translation | append: ',' | split: ',' -%}
{%- for label in swatch_labels -%}
{%- assign sanitized_label = label | lstrip | rstrip -%}
{%- if product.options_by_name[sanitized_label].values.size > 0 -%}
{%- assign has_colors = true -%}
<form class="radio__fieldset radio__fieldset--swatches radio__fieldset--small" data-grid-swatch-form>
<div class="selector-wrapper__scrollbar" data-scrollbar data-grid-swatches data-swatch-handle="{{ product.handle }}" data-swatch-label="{{ label }}"></div>
<button type="button" class="radio__fieldset-arrow radio__fieldset-arrow--prev is-hidden is-not-relative" data-scrollbar-arrow-prev>
<span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
</button>
<button type="button" class="radio__fieldset-arrow radio__fieldset-arrow--next is-hidden is-not-relative" data-scrollbar-arrow-next>
<span class="visually-hidden">{{ 'products.general.see_all' | t }}</span>
</button>
</form>
{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endcapture -%}
{%- endif -%}
{%- assign double_img = false -%}
{%- if product.media[1].preview_image and settings.image_hover_enable -%}
{%- assign double_img = true -%}
{%- endif -%}
{%- assign current_variant = product.first_available_variant -%}
{%- assign product_url = product.url | within: collection -%}
{%- capture item_unique -%}product-item--{{ section.id }}-{{ index }}{%- endcapture -%}
{%- assign animation_anchor = item_unique | prepend: '.' -%}
<div class="product-item {{ grid_strings }} {{ border_class }} {{ alignment_class }} {{ item_unique }}" data-product-grid-item {{ additional_attributes }}>
{%- capture over_image_content -%}
{%- assign product_tags = product.tags | join: ',' | append: ',' -%}
{%- assign preorder = false -%}
{%- assign on_sale = false -%}
{%- assign sold_out = false -%}
{%- assign badge = '' -%}
{%- if product_tags contains '_badge_' -%}
{%- assign badge = product_tags | split: '_badge_' -%}
{%- assign badge = badge[1] | split: ',' | first | replace: '_', ' ' -%}
{%- endif -%}
{%- if product_tags contains '_preorder' -%}
{%- assign preorder = true -%}
{%- endif -%}
{%- if product.compare_at_price > product.price and settings.sale_tags_enable -%}
{%- assign on_sale = true -%}
{%- endif -%}
{%- unless product.available -%}
{%- assign sold_out = true -%}
{%- endunless -%}
{%- if badge != '' -%}
<span class="badge-box">{{ badge }}</span>
{%- elsif preorder and sold_out == false -%}
<span class="preorder-box">{{ 'products.product.pre_order' | t }}</span>
{%- elsif on_sale and sold_out == false -%}
<span class="sale-box">{{ 'products.product.on_sale' | t }}</span>
{%- endif -%}
{%- if settings.quickview_enable and current_variant -%}
<button type="button" class="quick-add-button" tabindex="-1" data-button-quick-add-mobile{% if product.has_only_default_variant %} data-quick-add-button{% endif %}>
<span class="visually-hidden">{{ 'products.general.quick_view' | t }}</span>
<svg height="18" width="18" class="svg-loader">
<circle r="7" cx="9" cy="9" />
<circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
</svg>
</button>
<div class="slideup is-not-relative" data-quick-add-holder>
<button type="button" class="caps is-disable" data-focus-element data-quick-add-label="{{ product.handle }}" data-collection-handle="{{ collection.handle | default: 'primary' }}" {% if product.has_only_default_variant %} data-quick-add-button{% endif %} tabindex="0">
<span>{{ 'products.general.quick_view' | t }}</span>
<span>{{ 'products.general.quick_view_added' | t }}</span>
<svg height="18" width="18" class="svg-loader">
<circle r="7" cx="9" cy="9" />
<circle stroke-dasharray="87.96459430051421 87.96459430051421" r="7" cx="9" cy="9" />
</svg>
<span class="caps__error" data-message-error> </span>
</button>
<div data-quick-add-form-holder> </div>
</div>
{%- endif -%}
{%- endcapture -%}
<div class="product-item__image{% if double_img %} double__image{% endif %}" data-product-image>
<a class="product-link is-not-relative" href="{{ product_url }}" aria-label="{{ product.title | strip_html | escape }}" data-grid-link>
{% if product.media.size > 0 %}
<div class="product-item__bg lazyload"
data-grid-slide
data-aos="img-in"
data-aos-delay="{{ animation_delay | times: 150 }}"
data-aos-duration="{{ animation_delay | times: 100 | plus: 800 }}"
data-aos-anchor="{{ animation_anchor }}"
data-aos-easing="ease-out-quart"
data-bgset="{% render 'bgset', image: product.featured_media.preview_image %}"> </div>
{% if double_img %}
<div class="product-item__bg__under lazyload" data-bgset="{% render 'bgset', image: product.media[1].preview_image %}"> </div>
{% endif %}
{% else %}
{%- comment -%} Show "No image" if product has no media {%- endcomment -%}
{%- assign image_url_pattern = product.featured_image | img_url: '540x' | replace: '_540x.', '_{width}x.' -%}
{%- assign image_widths = "[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]" -%}
<div class="product-item__bg product-item__bg--empty"
data-grid-slide
data-aos="img-in"
data-aos-delay="{{ animation_delay | times: 150 }}"
data-aos-duration="{{ animation_delay | times: 100 | plus: 800 }}"
data-aos-anchor="{{ animation_anchor }}"
data-aos-easing="ease-out-quart">
<img
class="lazyload"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="{{ image_url_pattern }}"
data-widths= "{{ image_widths }}"
data-aspectratio="1"
data-sizes="auto"
width="540"
height="540"
alt="{{ product.title | strip_html | escape }}">
</div>
{% endif %}
</a>
{{ over_image_content }}
</div>
<noscript>
<a class="product-link" href="{{ product_url }}" aria-label="{{ product.title | strip_html | escape }}" data-grid-link>
<div class="product-item__image no-js-image" style="background-image:url('{{ product.featured_media.preview_image | img_url: '540x' }}'); background-size: contain; background-position: center center; background-repeat: no-repeat;"></div>
</a>
</noscript>
<div class="product-information"
data-aos="fade"
data-aos-delay="{{ animation_delay | times: 150 }}"
data-aos-duration="{{ animation_delay | times: 50 | plus: 800 }}"
data-aos-anchor="{{ animation_anchor }}"
data-product-information>
<a class="product-link" href="{{ product_url }}" aria-label="{{ product.title | strip_html | escape }}" data-grid-link>
{%- if showReviews and settings.enable_product_reviews -%}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{%- endif -%}
<p class="product__grid__title">
{{ product.title | strip_html | escape }}
</p>
<span class="price{% if product.compare_at_price > product.price %} sale{% endif %}">
{% if product.available %}
<span class="new-price">
{% if product.price_varies %}
<small>{{ 'products.general.from' | t }}</small>
{% endif %}
{{ product.price_min | money }}
</span>
{% if product.compare_at_price > product.price %}
<span class="old-price">{{ product.compare_at_price | money }}</span>
{% endif %}
{% else %}
<span class="sold-out">{{ 'products.product.sold_out' | t }}</span>
{% endif %}
</span>
{% if current_variant.unit_price %}
{% capture unit_price_separator %}
<span aria-hidden="true">/</span>
<span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }} </span>
{% endcapture %}
{% capture unit_price_base_unit %}
{% if current_variant.unit_price_measurement.reference_value != 1 %}
{{ current_variant.unit_price_measurement.reference_value }}
{% endif %}
{{ current_variant.unit_price_measurement.reference_unit }}
{% endcapture %}
<br>
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
<span class="unit small">{{ current_variant.unit_price | money }}{{ unit_price_separator }}{{ unit_price_base_unit }}</span>
{% endif %}
{% if settings.quickview_enable == false and settings.color_swatches %}
{% if has_colors %}
<span class="grid__product-swatches-count" data-swatch-count> </span>
{% endif %}
{{ swatches }}
{% endif %}
</a>
{{ product.metafields.my_fields.product_summary.value }}
</div>
</div>
If helpful then please
Like and
Accept Solution. Partnership of your
☕️ Coffee Tips and my code can bring miracles.
Want to modify or custom changes on store
Hire Me.
- Feel free to contact me on
bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
