How can I place an add to cart icon below a product?

Store Design
, ,
1

Heyy there!! Hope you are doing well. This is the screenshot of my impulse theme store and i want to put this add to cart icon below the product can anyone please help me out . Thank you in advance

2

Sorry not icon actually i was trying to say button. Please checkout the file attached with it.

3

give me your shop url

4

Hello @Diwanshu433
Please share your website url.

5

It’s under desgining right now www.clothestic.com and password protected

6

www.clothestic.com

7

@Diwanshu433
www.clothestic.com - this link is not working

8

Try again I’ve made a change

9

@Diwanshu433
Not working

10

Please try again I forgot to save the domain now it’s done please check

11

What did you delete the CSS? I feel you of the name of the class without the CSS

12

I don’t understand what you are saying can you play explain in brief :grinning_face:

13

I look at the code, the feeling you delete some things wrong. If you need my help, you can invite my mailbox, then I can help you to solve

14

@Diwanshu433

Please share your theme product-grid.liquid code.

15

What did you move the code, so it will have no some style

16

@Simonsron

div tag are not properly closed in the code.

17

He is not grid style binding, also have the possibility. Because of his product, and add to cart button is not in a div

18

{% comment %}
Arguments

  • product: product object
  • [per_row]: number of items per row
  • [collection]: collection object
    {% endcomment %}

{%- liquid
unless per_row
assign per_row = 4
endunless

case per_row
when 1
assign grid_item_width = ‘’
when 2
assign grid_item_width = ‘medium-up–one-half’
when 3
assign grid_item_width = ‘small–one-half medium-up–one-third’
when 4
assign grid_item_width = ‘small–one-half medium-up–one-quarter’
when 5
assign grid_item_width = ‘small–one-half medium-up–one-fifth’
when 6
assign grid_item_width = ‘small–one-half medium-up–one-sixth’
endcase

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.metafields.theme.label and product.metafields.theme.label != blank
assign has_custom_label = true
assign custom_label = product.metafields.theme.label.value
elsif 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
-%}

{%- if has_custom_label -%}
{{ custom_label }}
{%- else -%} {%- unless product.available -%}
{{ 'products.product.sold_out' | t }}
{%- endunless -%} {%- if on_sale and product.available -%}
{{ 'products.general.sale' | t }}
{%- 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.’
-%}

{%- if quick_shop_enable -%}
{{ settings.quick_shop_text }}
{%- endif -%} {%- if fixed_aspect_ratio -%}
{{ preview_image.alt | escape }}
{%- else -%}
{{ preview_image.alt | escape }} {{ preview_image.alt | escape }}
{%- 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 -%}

{%- assign img_url = second_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {{ second_image.alt }}
{%- 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 -%}

{%- endif -%} {%- endunless -%} {%- endfor -%} {%- endif -%} {%- endfor -%} {%- endif -%}
{{ product.title }}
{%- if settings.vendor_enable -%}
{{ product.vendor }}
{%- endif -%}
{%- if on_sale -%} {{ 'products.general.regular_price' | t }} {{ product.compare_at_price | money }} {{ 'products.general.sale_price' | t }} {%- 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 -%} {{ 'products.general.save_html' | t: saved_amount: saved_amount }} {%- endif -%} {%- endif -%}

{%- assign product_variant = product.selected_or_first_available_variant -%}
{%- if product_variant.unit_price_measurement -%}

{%- 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 }}

{%- endif -%}
{%- 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 = ‘’ -%}

{%- 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 %}”>
{{ value }}

{%- endunless -%}
{%- endfor -%}

{%- if color_count < 2 -%} {%- style -%} .grid-product__colors--{{ product.id }} { display: none; } {%- endstyle -%} {%- endif -%} {%- endif -%} {%- endfor -%} {%- endif -%}

{%- if settings.enable_product_reviews -%}

{%- endif -%}

{%- if quick_shop_enable -%}
{%- render ‘quick-shop-modal’, product: product -%}
{%- endif -%}

{% assign current_variant = product.selected_or_first_available_variant %}
{%- render 'product-form', form_id: form_id, product: product, show_dynamic_checkout: coloumn.settings.show_dynamic_checkout, current_variant: current_variant -%}
19

Reference to look at this piece of code.This code is the package

20

@Diwanshu433

Replace this code with below code.

{% comment %}
Arguments
- product: product object
- [per_row]: number of items per row
- [quick_shop_enable]: boolean
- [collection]: collection object
{% endcomment %}

{%- liquid
unless per_row
assign per_row = 4
endunless

case per_row
when 1
assign grid_item_width = ''
when 2
assign grid_item_width = 'medium-up--one-half'
when 3
assign grid_item_width = 'small--one-half medium-up--one-third'
when 4
assign grid_item_width = 'small--one-half medium-up--one-quarter'
when 5
assign grid_item_width = 'small--one-half medium-up--one-fifth'
when 6
assign grid_item_width = 'small--one-half medium-up--one-sixth'
endcase

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.metafields.theme.label and product.metafields.theme.label != blank
assign has_custom_label = true
assign custom_label = product.metafields.theme.label.value
elsif 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 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 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>
{%- 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>
</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 -%}

{%- if quick_shop_enable -%}
{%- render 'quick-shop-modal', product: product -%}
{%- endif -%}
{% assign current_variant = product.selected_or_first_available_variant %}
<div class="product-coloumn" style="margin-top:5px;">
{%- render 'product-form',
form_id: form_id,
product: product,
show_dynamic_checkout: coloumn.settings.show_dynamic_checkout,
current_variant: current_variant
-%}
</div>

</div>