<!-- /templates/product.liquid -->
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
{% assign current_variant = product.selected_or_first_available_variant %}
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
{% if collection %}
<hr class="hr--clear">
{% endif %}
{% unless product.empty == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}
{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "checkbox",
"id": "zoom_enable",
"label": "Enable image zoom"
},
{
"type": "checkbox",
"id": "social_sharing_products",
"label": "Enable product sharing",
"default": true
},
{
"type": "checkbox",
"id": "product_vendor_enable",
"label": "Show product vendor"
},
{
"type": "select",
"id": "image_layout",
"label": "Image display",
"default": "stacked",
"options": [
{
"value": "stacked",
"label": "Stacked"
},
{
"value": "thumbnails",
"label": "Thumbnails"
}
]
},
{
"type": "header",
"content": "Product options form"
},
{
"type": "checkbox",
"id": "quantity_enabled",
"label": "Show quantity picker"
},
{
"type": "select",
"id": "product_selector",
"label": "Picker type",
"options": [
{
"value": "radio",
"label": "Button"
},
{
"value": "select",
"label": "Dropdown"
}
]
},
{
"type": "header",
"content": "Add to cart button"
},
{
"type": "select",
"id": "add_to_cart_button_size",
"label": "Button size",
"default": "small",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "large",
"label": "Large"
}
]
}
]
}
{% endschema %}
{% if section.settings.image_layout == "stacked" %}
{% comment %}
Default or stacked layout
{% endcomment %}
{% comment %}
We need to figure out the max width we want the image to be on the page
based on the aspect ratio of the image and based on the size of the
image.
{% endcomment %}
{% capture img_id_class %}product-single__photo-{{ featured_image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ featured_image.id }}{% endcapture %}
{% comment %}
Display current variant image
{% endcomment %}
{% comment %}
Display rest of product images, not repeating the featured one
{% endcomment %}
{% for image in product.images %}
{% unless image contains featured_image %}
{% comment %}
We need to figure out the max width we want the image to be on the page
based on the aspect ratio of the image and based on the size of the
image.
{% endcomment %}
{% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{% endunless %}
{% endfor %}
{% else %}
{% comment %}
Thumbnails layout
{% endcomment %}
{% include 'image-style' with image: featured_image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
{% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
![]()
<noscript>
![]()
</noscript>
{% include 'image-style' with image: image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
![]()
<noscript>
![]()
</noscript>
{% comment %}
We need to figure out the max width we want the image to be on the page
based on the aspect ratio of the image and based on the size of the
image.
{% endcomment %}
{% capture img_id_class %}product-single__photo-{{ featured_image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ featured_image.id }}{% endcapture %}
{% comment %}
Display current variant image
{% endcomment %}
{% comment %}
Populate rest of product images with display = none, not repeating the featured one
{% endcomment %}
{% for image in product.images %}
{% unless image contains featured_image %}
{% comment %}
We need to figure out the max width we want the image to be on the page
based on the aspect ratio of the image and based on the size of the
image.
{% endcomment %}
{% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{% endunless %}
{% endfor %}
{% comment %}
Display thumbnails
{% endcomment %}
{% endif %}
{% include 'image-style' with image: featured_image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
{% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
![]()
<noscript>
![]()
</noscript>
{% include 'image-style' with image: image, width: 575, height: 850, small_style: true, wrapper_id: wrapper_id, img_id_class: img_id_class %}
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
![]()
<noscript>
![]()
</noscript>
-
{% for image in product.images %}
{% if product.images.size > 1 %}
-
{{ product.description }}
{% if section.settings.product_vendor_enable %}
{{ product.vendor }}
{% endif %}{{ product.title }}
{% comment %}
Optionally show the 'compare at' or original price of the product.
{% endcomment %}
{% if product.compare_at_price_max > product.price %}
{{ 'products.general.regular_price' | t }}
{% if current_variant.compare_at_price > current_variant.price %}
{{ current_variant.compare_at_price | money }}
{% endif %}
{{ 'products.general.sale_price' | t }}
{% else %}
{{ 'products.general.regular_price' | t }}
{% endif %}
{{ current_variant.price | money }}
<hr class="hr--small">
<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm--{{ section.id }}" class="product-single__form">
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
<label class="single-option-radio__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}" for="ProductSelect-option-{{ forloop.index0 }}">
{{ option.name | escape }}
</label>
{% if section.settings.product_selector == 'radio' %}
<fieldset class="single-option-radio" name="{{ option.name | handleize }}" id="ProductSelect-option-{{ forloop.index0 }}">
{% assign option_index = forloop.index %}
{% for value in option.values %}
{% assign variant_label_state = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_label_state = false %}
{% endunless %}
{% endif %}
<input type="radio">
<label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">{{ value | escape }}</label>
{% endfor %}
</fieldset>
{% else %}
<select class="single-option-selector__radio single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}">{{ value | escape }}</option>
{% endfor %}
</select>
{% endif %}
{% endfor %}
{% endunless %}
<select name="id" id="ProductSelect" class="product-single__variants no-js">
{% for variant in product.variants %}
{% if variant.available %}
<option>
{{ variant.title }} - {{ variant.price | money_with_currency }}
</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
{% if section.settings.quantity_enabled %}
<label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>
<input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">
{% endif %}
<button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} add-to-cart--full-width{% endif %}">
{% if current_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
</button>
</form>
Thank you Tim, this is exactly what I was looking for. However, I am having an issue as now when I scroll down, the product select and add to cart are overlapping the description. Also the text still begins to the right of the photos, I would like the description to start below. Are there any easy fixes for this? I am a newbie with coding, thanks!
-
Shopify Community
Shopify Discussion
- Shopify Discussions
- Store Feedback
- Shopify Design
- Community AMAs (Ask Me Anything)
- Announcements
- Shopify Apps
- Shopify Education & Certifications
- Shopify Translate & Adapt
- Ecommerce Marketing
- Technical Q&A
- Site Speed
- Retail and Point of Sale
- International Commerce
- Payments, Shipping, and Fulfillment
- Accounting and Taxes
- Wholesale and Dropshipping
- Shopify Flow App
- Shopify Scripts
- Jobs and Careers
Partners and Developers
-
Groups
- English video guides and tutorials
- Blog
Community Blog Articles
Shopify Community AMA: Winter Editions ‘23 Recap
Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023
Introducing Shopify Certifications
Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023
Adding and Creating Store Policies
One of the key components to running a successful online business is having clear and co...
By Ollie Mar 6, 2023