Hello,
We would like to add a custom line of code to all of our Product pages, right below the "ADD TO CART" button.
A sample product page would be:
https://onetreeplanted.org/collections/africa/products/ghana
(Each of our "products" is a tree planting region.)
Is there any way to do this?
We use "Out of the Sandbox - Turbo" theme.
Thank you in advance,
<a name="pagecontent" id="pagecontent"></a>
<div class="container main content product-name--{{ product.handle }}">
<div class="sixteen columns">
{% if collection.previous_product or collection.next_product or section.settings.product_breadcrumb %}
<div class="clearfix breadcrumb-collection">
{% if collection.previous_product or collection.next_product %}
<div class="nav_arrows breadcrumb_text">
{% if collection.previous_product %}
<a href="{{ collection.previous_product }}" title="{{ 'products.general.previous_product_html' | t }}" class="breadcrumb_link"><span class="icon-left-arrow"> {{ 'products.general.previous_product_html' | t }}</span></a>
{% endif %}
{% if collection.previous_product and collection.next_product %}<span class="breadcrumb-divider"> | </span>{% endif %}
{% if collection.next_product %}
<a href="{{collection.next_product}}" title="{{ 'products.general.next_product_html' | t }}" class="breadcrumb_link">{{ 'products.general.next_product_html' | t }} <span class="icon-right-arrow"></span></a>
{% endif %}
</div>
{% endif %}
{% if section.settings.product_breadcrumb %}
<div class="breadcrumb_text" itemscope itemtype="http://schema.org/BreadcrumbList">
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="item" class="breadcrumb_link">
<span itemprop="name">{{ 'general.breadcrumbs.home' | t }}</span>
</a>
<meta itemprop="position" content="1" />
</span>
<span class="breadcrumb-divider">/</span>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
{% if collection %}
<a href="{{ collection.url }}" title="{{ collection.title | escape }}" itemprop="item" class="breadcrumb_link">
<span itemprop="name">{{ collection.title }}</span>
<meta itemprop="position" content="2" />
</a>
{% else %}
<a href="/collections/all" title="{{ collections.all.title }}" itemprop="item" class="breadcrumb_link">
<span itemprop="name">{{ collections.all.title }}</span>
<meta itemprop="position" content="2" />
</a>
{% endif %}
</span>
<span class="breadcrumb-divider">/</span>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="{{ product.url }}" itemprop="item" class="breadcrumb_link">
<span itemprop="name">{{ product.title }}</span>
<meta itemprop="position" content="3" />
</a>
</span>
</div> {% endif %}
</div>
{% endif %} </div>
{% comment %}Check to see if sidebar should be enabled{% endcomment %}
{% if section.blocks.size > 0 %}
{% assign sidebar = true %}
{% else %}
{% assign sidebar = false %}
{% endif %}
<div class="product clearfix">
{% if sidebar %}
{% include 'sidebar' %}
<div class="twelve columns medium-down--one-whole sidebar--{{ sidebar }}">
{% else %}
<div class="sixteen columns">
{% endif %}
<div class="product-{{ product.id }}"
data-free-text="{{ settings.free_price_text }}"
>
<div class="section product_section clearfix js-product_section {% if section.settings.product_images_position == 'right' %}align_right--images{% endif %}" itemscope itemtype="http://schema.org/Product" data-rv-handle="{{ product.handle }}">
<div class="nine columns medium-down--one-whole {% if section.settings.product_images_position == 'left' %}alpha{% else %}omega{% endif %}">
{% include 'product-images' %}
</div>
<div class="seven columns medium-down--one-whole {% if section.settings.product_images_position == 'left' %}omega{% else %}alpha{% endif %}">
{% assign collection_handles = product.collections | map: 'handle' %}
{% assign variant = product.selected_or_first_available_variant %}
{% if product.available %}
{% if settings.sale_banner_enabled and product.compare_at_price_max > product.price %}
<div class="sale_banner_product">{{ 'collections.general.sale' | t }}</div>
{% endif %}
{% endif %}
{% if collection_handles contains 'new' %}
<div class="new_banner_product">{{ 'collections.general.new' | t }}</div>
{% endif %}
{% if collection_handles contains 'pre-order' %}
<div class="preorder_banner_product">{{ 'collections.general.pre_order' | t }}</div>
{% endif %}
{% if variant.sku != blank and section.settings.display_sku %}
<p class="sku">
<span itemprop="sku">{{ variant.sku }}</span>
</p>
{% endif %}
<h1 class="product_name" itemprop="name">{{ product.title }}</h1>
{% if section.settings.enable_shopify_product_badges and settings.enable_shopify_review_comments %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
<div class="feature_divider"></div>
{% assign product_tags = product.tags | join: ' ' %}
{% if product_tags contains 'meta-size-chart-' %}
{% for tag in product.tags %}
{% if tag contains 'meta-size-chart-' %}
<a href="javascript:;" class="size_chart" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline" data-no-instant>{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
{% include 'popup-size-chart', product_id: product.id %}
{% endif %}
{% endfor %}
{% elsif settings.size_chart != blank %}
<a href="javascript:;" class="size_chart" data-fancybox data-src="#size-chart{{product.id}}" data-type="inline" data-no-instant>{{ 'products.product.size_chart' | t }} <span class="icon-right-arrow"></span></a>
{% endif %}
{% if collection_handles contains 'coming-soon' %}
<p class="modal_price">{{ 'collections.general.coming_soon' | t }}</p>
{% else %}
<p class="modal_price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
<meta itemprop="seller" content="{{ shop.name | escape }}" />
<link itemprop="availability" href="http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}">
<meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition"/>
<span class="sold_out">{% if variant.available == false %}{{ 'products.product.sold_out' | t }}{% endif %}</span>
<span itemprop="price" content="{{ variant.price | money_without_currency | remove: "," }}" class="{% if variant.compare_at_price > variant.price %}sale{% endif %}">
<span class="current_price {% if product.available == false %}hidden{% endif %}">
{% if variant.price > 0 %}
<span class="money">{{ variant.price | money }}</span>
{% else %}
{{ settings.free_price_text }}
{% endif %}
</span>
</span>
<span class="was_price">
{% if variant.price < variant.compare_at_price and variant.available %}
<span class="money">{{ variant.compare_at_price | money }}</span>
{% endif %}
</span>
{% if section.settings.display_savings %}
<span class="sale savings">
{% if variant.price < variant.compare_at_price and variant.available %}
{{ 'products.product.savings' | t }} {{ variant.compare_at_price | minus: variant.price | times: 100 | divided_by: variant.compare_at_price }}% (<span class="money">{{ variant.compare_at_price | minus: variant.price | money }}</span>)
{% endif %}
</span>
{% endif %}
</p>
{% include 'product-notify-me' %}
{% endif %}
{% if section.settings.product_description_position == "top" %}
{% if product.description != blank %}
<div class="description" itemprop="description">
{{ product.description | split: '<!-- split -->' | first }}
</div>
{% endif %}
{% endif %}
{% unless collection_handles contains 'coming-soon' %}
{% include 'product-form' with 'product' %}
{% endunless %}
{% if section.settings.product_description_position == "bottom" %}
{% if product.description != blank %}
<div class="description bottom" itemprop="description">
{{ product.description | split: '<!-- split -->' | first }}
</div>
{% endif %}
{% endif %}
{% if section.settings.review_position == "next_to_gallery" %}
<div class="shopify-reviews reviewsVisibility--{{settings.enable_shopify_review_comments}}">
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
{% endif %}
{% if section.settings.display_collections or section.settings.display_tags or section.settings.display_type %}
<div class="product_links">
{% if section.settings.display_collections %}
<p>
<span class="label">{{ 'products.product.collections' | t }}:</span>
<span>
{% for col in product.collections %}
<a href="{{ col.url }}" title="{{ col.title }}">{{ col.title }}</a>{% unless forloop.last %},{% endunless %}
{% endfor %}
</span>
</p>
{% endif %}
{% if section.settings.display_type %}
<p>
<span class="label">{{ 'products.product.product_types' | t }}:</span>
<span>{{ product.type | link_to_type }}</span>
</p>
{% endif %}
{% if section.settings.display_tags %}
<p>
{% for tag in product.tags %}
{% if forloop.first %}
<span class="label">{{ 'products.product.tags' | t }}:</span>
{% endif %}
{% unless tag contains 'meta-' %}
<span>
<a href="/collections/{% if collection %}{{ collection.handle }}{% else %}all{% endif %}/{{ tag | handle }}" title="{{ 'products.product.products_tagged' | t: tag: tag }}">{{ tag }}</a>{% unless forloop.last %},{% endunless %}
</span>
{% endunless %}
{% endfor %}
</p>
{% endif %}
</div>
{% endif %}
<div class="meta">
{% if section.settings.display_social_buttons %}
{% include "social-buttons" with "product" %}
{% endif %}
</div>
</div>
</div>
{% if product.description contains "<!-- split -->" %}
<br class="clear" />
<div class="section clearfix">
<div class="description">
{{ product.description | split: '<!-- split -->' | last }}
</div>
</div>
{% endif %}
{% if section.settings.review_position == "below_gallery" %}
<div class="shopify-reviews reviewsVisibility--{{settings.enable_shopify_review_comments}}">
<div id="shopify-product-reviews" data-id="{{product.id}}">{{ product.metafields.spr.reviews }}</div>
</div>
{% endif %}
</div>
{% if sidebar %}
{% if section.settings.display_related_products %}
{% include 'include-related-products' %}
{% endif %}
{% if section.settings.display_recently_viewed %}
{% include 'include-recently-viewed' %}
{% endif %}
</div>
</div>
</div>
{% else %}
</div>
</div>
</div>
{% if section.settings.display_related_products %}
{% include 'include-related-products' %}
{% endif %}
{% if section.settings.display_recently_viewed %}
{% include 'include-recently-viewed' %}
{% endif %}
{% endif %}
{% schema %}
{
"name": "Product",
"class": "product-template",
"settings": [
{
"type": "header",
"content": "Product gallery"
},
{
"type": "checkbox",
"id": "gallery_arrows",
"label": "Show arrows on product gallery",
"default": true
},
{
"type": "checkbox",
"id": "activate_zoom",
"label": "Magnify product images on hover"
},
{
"type": "checkbox",
"id": "enable_product_lightbox",
"label": "Enable product gallery popup",
"default": true
},
{
"type": "checkbox",
"id": "activate_autoplay",
"label": "Enable product gallery slideshow"
},
{
"type": "select",
"id": "slideshow_animation",
"label": "Gallery transition",
"options": [
{
"value": "slide",
"label": "Slide"
},
{
"value": "fade",
"label": "Fade"
}
],
"default": "slide"
},
{
"type": "radio",
"id": "product_images_position",
"label": "Gallery position",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "checkbox",
"id": "product_thumbs",
"label": "Show product gallery thumbnails",
"default": true
},
{
"type": "select",
"id": "thumbnail_position",
"label": "Thumbnail position",
"default": "bottom-slider",
"options": [
{
"value": "right-thumbnails",
"label": "Right"
}
]
},
{
"type": "header",
"content": "Product info"
},
{
"type": "checkbox",
"id": "product_breadcrumb",
"label": "Show breadcrumb links"
},
{
"type": "checkbox",
"id": "display_vendor",
"label": "Show vendor"
},
{
"type": "checkbox",
"id": "display_sku",
"label": "Show SKU"
},
{
"type": "checkbox",
"id": "display_savings",
"label": "Show price savings",
"default": true
},
{
"type": "checkbox",
"id": "show_payment_button",
"label": "Show dynamic checkout button",
"default": true,
"info": "Each customer will see their preferred payment method from those available on your store, such as PayPal or Apple Pay. [Learn more](https:\/\/help.shopify.com\/manual\/using-themes\/change-the-layout\/dynamic-checkout)"
},
{
"type": "checkbox",
"id": "display_collections",
"label": "Show collections"
},
{
"type": "checkbox",
"id": "display_type",
"label": "Show type"
},
{
"type": "checkbox",
"id": "display_tags",
"label": "Show tags"
},
{
"type": "checkbox",
"id": "display_social_buttons",
"label": "Show social media share icons",
"default": true
},
{
"type": "radio",
"id": "product_description_position",
"label": "Description position",
"options": [
{
"value": "top",
"label": "Above product form"
},
{
"value": "bottom",
"label": "Below product form"
}
]
