Hi, how can I move the add to cart button under the price?
URL: https://kratomwarehouse.com/collections/lit-culture
This is my product-grid-item.liquid code:
"
{%- liquid
if empty_state
assign product_link = ‘/admin/products’
assign vendor = ‘home_page.onboarding.product_vendor’ | t
assign title = ‘home_page.onboarding.product_title’ | t
assign compare_at_price = 2999
assign price = 1999
else
assign variant = product.first_available_variant
assign product_link = product.url | within: collection
assign vendor = product.vendor
assign title = product.title
assign compare_at_price = product.compare_at_price
assign price = product.price
endif
assign is_on_sale = false
assign is_sold_out = true
if compare_at_price > price
assign is_on_sale = true
endif
if product.available or empty_state
assign is_sold_out = false
endif
assign has_hover_image = false
assign has_touch_image = false
if settings.dbtfy_show_second_image_on_hover_show_on_hover and product.media.size > 1
assign has_hover_image = true
assign hover_image = product.media[1].preview_image
endif
if settings.dbtfy_show_second_image_on_hover_enable_touch_screen and product.media.size > 1
assign has_touch_image = true
endif
assign variant = product.selected_or_first_available_variant
capture product_collections
for collection in product.collections
echo collection.handle
unless forloop.last
echo ‘,’
endunless
endfor
endcapture
assign has_color_swatches = false
if settings.dbtfy_color_swatches_grid_options != blank
if product.available and product.variants.size > 1
assign has_color_swatches = true
endif
endif
assign hover_animation = settings.dbtfy_show_second_image_on_hover_hover_animation
case hover_animation
when ‘fade’
assign hover_animation_class = ‘animation-fade’
when ‘none’
assign hover_animation_class = ‘animation-none’
when ‘zoom’
assign hover_animation_class = ‘animation-zoom’
endcase
assign enable_hover_carousel = settings.dbtfy_show_second_image_on_hover_enable_carousel
-%}
{% if enable_hover_carousel and has_hover_image %}
@media (min-width: 768px) {
.product-item__image--hover,
.product-item__image--touch {
display: none !important;
}
}
{% endif %}
{%- endfor -%}
{%- endif -%}
{%- endcapture -%}
{%- assign media = product.media.first -%}
{%- if media != blank -%}
{%- capture hover_media_carousel -%}
{%- if product.media.size > 0 -%}
{%- assign first_media = true -%}
{%- for media in product.media -%}
{%- liquid
assign is_featured = false
if media == featured_media
assign is_featured = true
endif
capture thumbnail_alt
if media.media_type == ‘video’ or media.media_type == ‘external_video’
echo ‘products.product.video_thumbnail_alt’ | t: imageAlt: media.alt | escape
elsif media.media_type == ‘model’
echo ‘products.product.model_thumbnail_alt’ | t: imageAlt: media.alt | escape
else
echo ‘products.product.gallery_thumbnail_alt’ | t: imageAlt: media.alt | escape
endif
endcapture
-%}
{%- render 'media',
media: media,
id: id,
loop: enable_video_looping,
is_featured: is_featured,
images_loading_type: images_loading_type,
product: product,
lazy_load: false,
index: forloop.index0,
size: image_size
-%}
{%- liquid
if is_stacked_layout
assign xr_id = false
if first_media and has_first_3d_model
assign xr_id = first_3d_model.id
elsif media.media_type == ‘model’
assign xr_id = media.id
endif
if xr_id
render ‘xr-button’, model_id: xr_id, multi: true
endif
assign first_media = false
endif
-%}
{%- liquid
assign products_per_row_desktop = products_per_row_desktop | times: 1
assign height_ratio_desktop = 100 | divided_by: products_per_row_desktop
assign height_ratio_mobile = 100 | divided_by: products_per_row_mobile
assign width_ratio_desktop = 100.0 | divided_by: height_ratio_desktop
assign maximum_image_width_desktop = settings.page_container_width | divided_by: width_ratio_desktop
-%}
{%- capture sizes -%}(max-width: 768px) {{ height_ratio_mobile }}vw, min({{ maximum_image_width_desktop | ceil }}px, {{ height_ratio_desktop }}vw){% endcapture %}
{{-
media.preview_image
| image_url: width: media.preview_image.width
| image_tag:
loading: images_loading_type,
sizes: sizes,
widths: ‘300,400,500,600,700,800,1000,1200,1400,1600,1800,2000,2200,2400,2600’,
class: ‘media’
-}}
{%- if enable_hover_carousel -%}
{{- hover_media_carousel -}}
{%- endif -%}
{%- if has_hover_image or has_touch_image -%}
{%- liquid
assign products_per_row_desktop = products_per_row_desktop | times: 1
assign height_ratio_desktop = 100 | divided_by: products_per_row_desktop
assign height_ratio_mobile = 100 | divided_by: products_per_row_mobile
assign width_ratio_desktop = 100.0 | divided_by: height_ratio_desktop
assign maximum_image_width_desktop = settings.page_container_width | divided_by: width_ratio_desktop
-%}
{%- endif -%}
{%- else -%}
{{- 'product-' | append: current | placeholder_svg_tag: 'card__image placeholder-svg' -}}
{%- endif -%}
{%- capture sizes -%}(max-width: 768px) {{ height_ratio_mobile }}vw, min({{ maximum_image_width_desktop | ceil }}px, {{ height_ratio_desktop }}vw){% endcapture %}
{{-
hover_image
| image_url: width: hover_image.width
| image_tag:
loading: images_loading_type,
sizes: sizes,
widths: ‘300,400,500,600,700,800,1000,1200,1400,1600,1800,2000,2200,2400,2600’,
class: ‘media’
-}}
{%- unless product_grid_badge_placement == ‘none’ -%}
{%- if is_sold_out and show_sold_out_badge -%}
{%- endunless -%}
watch_later
{{ 'products.product.sold_out_html' | t }}
{%- elsif is_on_sale and show_sales_badge -%}
{%- capture discount_price -%}
{%- if settings.sale_type == 'amount' -%}
{%- assign discount_price = compare_at_price | minus: price -%}
{{ discount_price | money }}
{%- elsif settings.sale_type == 'percentage' -%}
{%- assign discount_price = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price -%}
{{ discount_price }}%
{%- endif -%}
{%- endcapture -%}
local_offer
{{ 'products.general.save_html' | t: saved_amount: discount_price }}
{%- endif -%}
{%- if custom_badge_label != blank -%}
{%- if custom_badge_icon -%}
{{ custom_badge_icon }}
{%- endif -%}
{{- custom_badge_label -}}
{%- endif -%}
{%- unless empty_state -%}
{% if settings.dbtfy_wish_list_icon_position == 'grid-image' %}
{%- render 'dbtfy-wish-list', product: product -%}
{% endif %}
{%- render 'dbtfy-quick-compare', product: product, type: 'grid' -%}
{% if enable_quick_view %}
{%- render 'dbtfy-quick-view', product: product -%}
{% endif %}
{%- endunless -%}
{%- liquid
if settings.dbtfy_wish_list_icon_position == 'grid-body'
render 'dbtfy-wish-list', product: product, class: 'dbtfy-wish-list__grid--body'
assign width = 'col-9'
endif
unless empty_state
if product != blank
render 'dbtfy-collection-addtocart', product: product, sold_out: is_sold_out, is_primary: true, class: width
endif
endunless
-%}
{%- liquid
if has_color_swatches and show_color_swatches
unless empty_state
render ‘dbtfy-color-swatches’, product: product, type: ‘grid’, position: product_text_alignment, product_text_alignment: product_text_alignment
endunless
endif
-%}
{{ title }}
{%- if show_product_rating -%}
{%- unless empty_state -%}
{%- render 'review-badge', product: product, position: 'product_grid' -%}
{%- endunless -%}
{%- endif -%}
{%- if product.price_varies and empty_state == false -%} {{ product.price_min | money }} + {%- else -%} {{ price | money }} {%- endif -%} {%- if is_on_sale -%} {{ compare_at_price | money }} {%- else -%} {%- endif -%}
{%- if variant.available and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
/ {{ ‘general.accessibility.unit_price_separator’ | t }}
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%} {{- variant.unit_price_measurement.reference_value -}}{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endcapture -%}
{%- if show_product_vendor -%}
{{ vendor }}
In your liquid file, you need to change the order of these elements. Just place the selected div under the “a” and “p” tags.
To complete your requests, please follow these steps:
- Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
- Paste the code provided into the Custom CSS section.
.card__body.text-center.justify-content-start > div.row > div:has(.dbtfy-collection-addtocart) {
order: 2;
}
Here is the result: https://prnt.sc/hx_jhBC964ga
I hope this helps
Best,
Daisy