Hi all,
I would like to add an image under the add to cart button on the product page
Does anyone know how to do this? All help is extremely welcome
I am using the Debutify theme.
thanks and have a nice day
1 Like
- Go to Online Store->Theme->Edit code
- Asset->/theme.css ->paste below code at the bottom of the file.
Hello, which code?
1 Like
can you please share store url
1 Like
yes, please open this file
find this class product-single__add-to-cart
add your image code before this div that’s it
1 Like
Show More
I added this code after “product-single__add-to-cart " but nothing changed. The problem is that I can’t insert the image ''trust.png” in the snippets folder.
How do I do that?
Thank you very much KetanKumar!
1 Like
oh, yes please upload first trust.png and let me know if any issue
I tried but it won’t let me upload it to the Snippets folder. It only gives me the possibility to create new Snippets but not to upload the image. It only lets me upload the file in the Assets folder.
1 Like
i thing you have missing something else code can you please give me full code co i will check also give image cdn file
Sure, this is the code of “product-template.liquid”
Show More
{%- if product.media.size > 0 -%}
{%- liquid assign enable_image_zoom = section.settings.enable_image_zoom assign height = 850 assign width = 575 assign first_3d_model = product.media | where: "media_type", "model" | first comment Display product images endcomment -%} {%- for media in product.media -%} {%- liquid assign featured = false if media == featured_media assign 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 -%}
{%- liquid render 'media' with media, enable_image_zoom: enable_image_zoom, stacked: stacked, featured: featured, width: width, height: height, id: id, video_looping: section.settings.enable_video_looping comment Display a "View in your space" button (multi) for the first visible media and each individual model. Stacked layout only. endcomment if stacked assign xr_id = false if first_media and 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' with model_id: xr_id, multi: true endif assign first_media = false endif -%}
{%- endfor -%}
{%- liquid comment Display a "View in your space" button (single). Stacked/Thumbnails layout (mobile) Thumbnail layout only (desktop) endcomment if first_3d_model render 'xr-button' with model_id: first_3d_model.id, multi: false endif -%} {%- if product.media.size > 1 -%}{% for media in product.media %}
{%- liquid 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 assign media_aspect_ratio = media.aspect_ratio | default: media.preview_image.aspect_ratio -%}{%- if media.media_type == 'video' or media.media_type == 'external_video' or media.media_type == 'model' -%}
{% render 'svg-definitions' with media.media_type %}
{%- endif -%}
{% endfor %}
{%- endif -%}
{%- elsif product.images.size < 1 or emptyState -%} {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }} {%- endif -%}
---
{%- liquid assign showProductProperties = false if section.settings.show_product_vendor and product.vendor != blank assign showProductProperties = true elsif section.settings.show_product_type and product.type != blank assign showProductProperties = true elsif section.settings.show_product_sku and sku != blank assign showProductProperties = true endif -%} {%- if showProductProperties -%}
{%- if section.settings.show_product_vendor and product.vendor != blank -%}- store {{ product.vendor }}
{%- endif -%} {%- if section.settings.show_product_type and product.type != blank -%}- folder {{ product.type }}
{%- endif -%} {%- if section.settings.show_product_sku -%}- settings SKU: {{ sku }} {%- endif -%}
{%- endif -%}
{%- if section.settings.featured_product -%} {% unless emptyState %}{% endunless %} {%- endif -%}# {{ title }}{%- if section.settings.featured_product -%} {% unless emptyState %}{% endunless %} {%- endif -%}
{%- render "dbtfy-wish-list", type: "button", product: product -%}
{%- unless emptyState -%} {%- render "review-badge" with product as product, position: "product_page", class: "spacer-bottom" -%}
{%- endunless -%}{%- liquid assign product_description = product.description | strip_html | replace: "[split_description]", "" | newline_to_br | split: '
' assign filtered_description = '' for line in product_description if line != blank assign filtered_description = filtered_description | append: line endif endfor -%} {%- if current_variant.inventory_quantity > 0 and current_variant.inventory_management == "shopify" -%} {%- endif -%}
{{ price | money }} {{ compare_at_price | money }} {%- render "dbtfy-discount-saved" with product as product -%}
{%- capture unit_price_separator -%} / {{ 'general.accessibility.unit_price_separator' | t }} {%- endcapture -%} {%- capture unit_price_base_unit -%} {%- liquid if current_variant.unit_price_measurement if current_variant.unit_price_measurement.reference_value != 1 echo current_variant.unit_price_measurement.reference_value endif echo current_variant.unit_price_measurement.reference_unit endif -%} {%- endcapture -%} {{ 'products.general.unit_price' | t }} {{ current_variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}
{%- if section.settings.show_product_description -%} {%- if is_to_split_description -%}{%- liquid assign first_part = product.description | split: '
[split_description]
' | first unless first_part contains '[split_description]' echo first_part else echo product.description | split: '[split_description]' | first endunless -%}
{%- endif -%} {%- endif -%} {%- if live_view_under_price or sold_items_under_price -%}{%- liquid if sold_items_under_price render "dbtfy-sold-items" with product as product endif if live_view_under_price render "dbtfy-live-view" endif -%}
{%- endif -%} {%- if emptyState -%}
{%- else -%} {%- liquid assign form_classes = "product-single__form" if product.has_only_default_variant assign form_classes = form_classes | append: " product-single__form--no-variants" endif assign form_id = "AddToCartForm--" | append: section.id render "dbtfy-color-swatches" with product as product, id: id -%}
{%- form 'product', product, class: form_classes, id: form_id, data-product-form: '' -%} {%- unless product.has_only_default_variant -%}{%- for option in product.options_with_values -%} {%- liquid assign is_color_option = false if content_for_header contains 'debutify' and product.available and product.variants.size >= 1 and settings.dbtfy_color_swatches assign swatch_list = settings.dbtfy_color_swatches_color | split: "," for swatch in swatch_list assign swatch_option_name = swatch | handleize assign option_name = option.name | handleize if option_name == swatch_option_name assign is_color_option = true endif endfor endif assign first_option_value = current_variant.options[forloop.index0] | escape -%}
{%- if section.settings.product_selector == 'radio' -%} {%- else -%} {%- endif -%}
{%- endfor -%}
{%- endunless -%} {%- liquid assign hide_quantity_box = true if section.settings.quantity_enabled or settings.dbtfy_quantity_breaks or settings.dbtfy_inventory_quantity assign hide_quantity_box = false endif -%} {%- if section.settings.quantity_enabled or settings.dbtfy_quantity_breaks or settings.dbtfy_inventory_quantity -%}{%- assign quantity_id = 'product-' | append: product.id -%} {%- if section.settings.quantity_enabled or settings.dbtfy_quantity_breaks -%} {%- endif -%} {%- render "dbtfy-inventory-quantity", product: product -%} {%- if section.settings.quantity_enabled -%}
{%- render "quantity-selector", type: "product", id: quantity_id -%}
{%- elsif settings.dbtfy_quantity_breaks -%}
{%- endif -%}
{%- endif -%}{%- if settings.enable_payment_button -%} {{ form | payment_button }} {%- endif -%}
{%- endform -%} {% render "dbtfy-back-in-stock", product: product, current_variant: current_variant %} {%- endif -%}
{%- render "dbtfy-trust-badge", position: "product_page" -%} {%- if live_view_under_button or sold_items_under_button -%}{%- liquid if sold_items_under_button render "dbtfy-sold-items" with product as product endif if live_view_under_button render "dbtfy-live-view" endif -%}
{%- endif -%} {%- liquid if product_tabs_position == "under_addtocart" or product_tabs_position == "above_description" and product_description_position == "under_addtocart" render "dbtfy-product-tabs" with product as product, class: 'spacer-top', is_split_description: is_to_split_description endif -%} {%- if section.settings.show_product_description -%} {%- if product_description_position == "under_addtocart" -%} {%- unless is_to_split_description -%}{{ product.description | replace: '
[split_description]
', '' | replace: '[split_description]', '' }}
{%- endunless -%} {%- endif -%} {%- endif -%} {%- liquid if product_tabs_position == "under_description" and product_description_position == "under_addtocart" unless has_description assign tab_spacing_class = "spacer-top" endunless render "dbtfy-product-tabs" with product as product, class: tab_spacing_class, is_split_description: is_to_split_description endif render "dbtfy-social-discount", type: "button" if section.settings.show_sharing_icons render "social-sharing", share_button: "btn btn-square-xsmall", container_class: "spacer-top" endif -%} {%- if section.settings.show_product_tags and product.tags.size > 0 -%}
- local_offer {{ 'blogs.article.tags' | t }}
{%- for tag in product.tags -%}- {{ tag }}{%- endfor -%}
{%- endif -%} {%- if section.settings.show_product_collections and product.collections.size > 0 -%}
- layers {{ 'collections.general.catalog_title' | t }}
{%- for collection in product.collections -%}- {{ collection.title }}{%- endfor -%}
{%- endif -%} {%- if section.settings.show_full_details -%}{{ 'products.product.full_details' | t }} arrow_forward
{%- endif -%}
{%- render "dbtfy-sticky-addtocart" with product as product, current_variant: current_variant -%} {%- render "product-info-json", product: product -%}
{%- if show_info_section -%}
{%- if product_tabs_position == "separate_section" or product_tabs_position == "above_description" and product_description_position == "separate_section" -%} {%- render "dbtfy-product-tabs" with product as product, is_split_description: is_to_split_description -%} {%- endif -%} {%- if section.settings.show_product_description -%} {%- if product_description_position == "separate_section" or is_to_split_description -%}
{%- liquid if is_to_split_description assign second_part = product.description | split: '
[split_description]
' | last unless second_part contains '[split_description]' echo second_part else echo product.description | split: '[split_description]' | last endunless else echo product.description | replace: '
[split_description]
', '' | replace: '[split_description]', '' endif -%}
{%- endif -%} {%- endif -%} {%- liquid if product_tabs_position == "under_description" and product_description_position == "separate_section" render "dbtfy-product-tabs" with product as product, is_split_description: is_to_split_description endif -%}
{%- endif -%} {%- render "dbtfy-addtocart-animation" -%} {%- unless emptyState -%} {%- endunless -%} ```
Ok I got it but it put the image above the add to cart button. How do I put it below the button?
Ok I got it but it put the image above the add to cart button. How do I put it below the button?
yes, please just add your image code
oh sorry your message is blank
This is the picture:
1 Like
thanks please add your image code line no: 424 add please
This my friend
1 Like
