Hey Richard ,
Could you please help me as well? Same issue the "details" section of the product page is right aligned and I would like it to span the full width of the product page.
Here is the code in my product-template.liquid
Thanks a lot for your help
<!-- /snippets/product-template.liquid -->
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
{% if template.name == "index" %}
<meta itemprop="sku" content="{{ product.variants.first.sku }}">
<meta itemprop="gtin12" content="{{ product.variants.first.barcode }}">
<div itemprop="review" {% comment remove microdata structured data %}itemscope{% endcomment %} itemtype="http://schema.org/Review">
<div itemprop="reviewRating" {% comment remove microdata structured data %}itemscope{% endcomment %} itemtype="http://schema.org/Rating">
<meta itemprop="ratingValue" content="4.9">
<meta itemprop="bestRating" content="5">
</div>
<div itemprop="author" {% comment remove microdata structured data %}itemscope{% endcomment %} itemtype="http://schema.org/Person">
<meta itemprop="name" content="The Peoples Mask">
</div>
</div>
<div itemprop="aggregateRating" {% comment remove microdata structured data %}itemscope{% endcomment %} itemtype="http://schema.org/AggregateRating">
<meta itemprop="ratingValue" content="4.9">
<meta itemprop="reviewCount" content="89">
</div>
{% endif %}
{% assign current_variant = product.selected_or_first_available_variant %}
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
{% assign on_sale = false %}
{% if current_variant.compare_at_price > current_variant.price %}
{% assign on_sale = true %}
{% endif %}
{% assign sold_out = true %}
{% if current_variant.available %}
{% assign sold_out = false %}
{% endif %}
{% capture variantStatus %}
{% if sold_out == true %}
variant-soldout
{% else %}
variant-available
{% endif %}
{% endcapture %}
{%- assign enable_zoom = section.settings.enable_zoom -%}
{%- assign product_image_zoom_size = '1024x1024' -%}
{%- assign product_image_scale = '2' -%}
{% capture product_header_layout %}
{% if section.settings.product_vendor %}
<p class="product-single__vendor vendor" itemprop="brand">{{ product.vendor }}</p>
{% endif %}
{% if settings.review_badge == 'review_badge_above' %}
{% include 'review-badge', badge_template: 'product' %}
{% endif %}
<h1 class="product-single__title {% if section.settings.product_title_size %}product-title-big {% endif %}" itemprop="name">
{% if template != "product" %}
<a {% unless section_onboarding %} href="{{ product.url }}?variant={{ current_variant.id }}"{% endunless %}>
{% endif %}
{% unless section_onboarding %}
{{ product.title }}
{% else %}
{{ title }}
{% endunless %}
{% if template != "product" %}
</a>
{% endif %}
</h1>
{% if settings.review_badge == 'review_badge_under' %}
{% include 'review-badge', badge_template: 'product' %}
{% endif %}
{% endcapture %}
<div class="product-single{% if section.settings.product_photo_alignement == 'right' %} product-photos-right{% endif %}">
<div class="box">
<div class="wrapper">
<div class="grid product-wrapper">
<!-- images -->
<div class="product-photos grid__item medium--six-twelfths large--seven-twelfths
{% if section.settings.image_layout == "stacked" %}layout-stacked
{% elsif section.settings.image_layout == "thumbnail" %}layout-thumbnail {% endif %}
mobile-image-{{ section.settings.mobile_image }}">
<div class="medium--hide large--hide text-center">
{{ product_header_layout }}
</div>
<div class="product-single__photos slick-format slick-format-sm
{% if section.settings.image_layout == "stacked" %}product-stacked__photos
{% elsif section.settings.image_layout == "thumbnail" %}product-thumbnail__photos{% endif %}">
{% if section_onboarding %}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{% else %}
{% capture img_id_class %}product-single__photo-{{ featured_image.id }}{% endcapture %}
{% capture zoom_img_id %}FeaturedImageZoom-{{ featured_image.id }}-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ featured_image.id }}{% endcapture %}
{% comment %}
Display current variant image
{% endcomment %}
<div class="product-single__photo--flex-wrapper">
<div class="product-single__photo--flex">
<div id="{{ wrapper_id }}" class="product-single__photo--container {% if section.settings.image_layout == "thumbnail" %}product-single__photo--container-thumb{% endif %}">
<div id="{{ zoom_img_id }}"
class="product-single__photo-wrapper image-wrapper {% if enable_zoom %} js-zoom-enabled{% endif %}"
{% if enable_zoom %} data-zoom="{{ featured_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}
style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100}}%;"
data-image-id="{{ featured_image.id }}">
{% assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="product-single__photo image lazyload {{ img_id_class }}"
src="{{ featured_image | img_url: '300x300' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 590, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured_image.aspect_ratio }}"
data-sizes="auto"
data-image-id="{{ featured_image.id }}"
alt="{{ featured_image.alt | escape }}">
<noscript>
<img class="product-single__photo"
src="{{ featured_image | img_url: 'master' }}"
alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
</noscript>
</div>
</div>
</div>
</div>
{% endif %}
{% comment %}
Display variant image
{% endcomment %}
{% for image in product.images %}
{% unless image contains featured_image %}
{% capture img_id_class %}product-single__photo-{{ image.id }}{% endcapture %}
{% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
<div class="product-single__photo--flex-wrapper not-featured-image">
<div class="product-single__photo--flex">
<div id="{{ wrapper_id }}" class="product-single__photo--container{% if section.settings.image_layout == "thumbnail" %} product-single__photo--container-thumb{% endif %}">
<div id="{{ zoom_img_id }}"
class="product-single__photo-wrapper image-wrapper {% if enable_zoom %} js-zoom-enabled{% endif %}"
{% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}
style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"
data-image-id="{{ image.id }}">
{% assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' %}
<img class="product-single__photo image lazyload {{ img_id_class }}"
src="{{ image | img_url: '300x' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
data-image-id="{{ image.id }}"
alt="{{ image.alt | escape }}">
<noscript>
<img class="product-single__photo" src="{{ image.src | img_url: 'master' }}"
alt="{{ image.alt | escape }}"
data-image-id="{{ image.id }}">
</noscript>
</div>
</div>
</div>
</div>
{% endunless %}
{% endfor %}
</div>
{% if product.images.size > 1 %}
<div class="product-single__thumbnails slick-format slick-format-sm grid grid--small {% if product.images.size < 6 %}slick-disabled{% endif %}" id="ProductThumbs">
<div class="grid__item one-fifth">
<a class="product-single__thumbnail">
<img class="product-single__thumb" src="{{ featured_image.src | img_url: '150x150', crop: 'center' }}" alt="{{ featured_image.alt | escape }}">
</a>
</div>
{% for image in product.images %}
{% unless image contains featured_image %}
<div class="grid__item one-fifth">
<a class="product-single__thumbnail">
<img class="product-single__thumb" src="{{ image.src | img_url: '150x150', crop: 'center' }}" alt="{{ image.alt | escape }}">
</a>
</div>
{% endunless %}
{% endfor %}
</div>
{% endif %}
{% include "dbtfy-product-video" %}</div>
<!-- product details -->
<div data-upsell-target-id="{{ product.id }}" class="product-details grid__item medium--six-twelfths large--five-twelfths {{variantStatus}}">
<div class="product-single__meta">
<div class="small--hide {{ section.settings.product_header_alignement }}">
{{ product_header_layout }}
</div>
<div itemprop="offers" {% comment remove microdata structured data %}itemscope{% endcomment %} itemtype="http://schema.org/Offer">
<div class="price-wrapper {{ section.settings.product_header_alignement }}" data-price-container>
{% if section_onboarding %}
<span id="ProductPrice"
class="product-single__price"
itemprop="price"
content="{{ price | divided_by: 100.00 }}">
{{ price | money }}
</span>
{% else %}
{% if on_sale %}
<span id="PriceA11y" class="visually-hidden" {% if sold_out %}aria-hidden="true"{% endif %}>{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper" aria-hidden="false">
<span id="ComparePrice" class="price-compare product-single__price--compare-at">
{{ current_variant.compare_at_price | money }}
</span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.general.sale_price' | t }}</span>
{% else %}
<span id="PriceA11y" class="visually-hidden" {% if sold_out %}aria-hidden="true"{% endif %}>{{ 'products.general.regular_price' | t }}</span>
<span class="product-single__price--wrapper hide" aria-hidden="true">
<span id="ComparePrice" class="price-compare product-single__price--compare-at"></span>
</span>
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.general.sale_price' | t }}</span>
{% endif %}
<span id="ProductPrice"
class="product-single__price{% if on_sale %} on-sale{% endif %}"
itemprop="price"
content="{{ current_variant.price | divided_by: 100.00 }}"
{% unless current_variant.available %}aria-hidden="true"{% endunless %}>
{{ current_variant.price | money }}
</span>{% include "dbtfy-discount-saved" %}
{% endif %}
{% if settings.position_currency_converter == "product" %}{% include "currency-selector" %}{% endif %}
</div>
{% include "dbtfy-inventory-quantity" %}{% include "dbtfy-live-view" %}{% include "dbtfy-delivery-time" %}<meta itemprop="priceCurrency" content="{{ shop.currency }}">
<link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
{% if section_onboarding %}
<div class="product-single__add-to-cart default-product product-single__add-to-cart--full-width">
<button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--buy btn--add-to-cart" disabled="disabled">
<span class="btn__text">
<span class="fas fa-clock"></span>
{{ 'products.product.sold_out' | t }}
</span>
</button>
</div>
{% else %}
{% capture "form_classes" %}
product-single__form{% if product.has_only_default_variant %} product-single__form--no-variants{% endif %}
{%- endcapture %}
{% capture "form_id" %}AddToCartForm--{{ section.id }}{%- endcapture %}
{% include "dbtfy-color-swatches" %}{% form 'product', product, class:form_classes, id:form_id %}
{% unless product.has_only_default_variant %}
<div class="grid grid-uniform grid--small variant-wrapper">
{% for option in product.options_with_values %}
<div class="grid__item radio-wrapper js product-form__item {% if section.settings.product_selector == 'radio' %}product-form__item-radio {% endif %}">
<label class="single-option-radio__label{% if option.name == 'Default' or option.name == 'Title' %} hidden-label{% endif %}"
for="ProductSelect--{{ section.id }}-option-{{ forloop.index0 }}">
{{ option.name | escape }}
</label>
{% if section.settings.product_selector == 'radio' %}
<fieldset class="single-option-radio"
name="{{ option.name | handleize }}"
id="ProductSelect--{{ section.id }}-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"
{% if option.selected_value == value %} checked="checked"{% endif %}
{% unless variant_label_state %} disabled="disabled"{% endunless %}
value="{{ value | escape }}"
data-index="option{{ option_index }}"
name="{{ option.name | handleize }}"
class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"
id="ProductSelect--{{ section.id }}-option-{{ option.name | handleize }}-{{ value | escape }}">
<label for="ProductSelect--{{ section.id }}-option-{{ option.name | handleize }}-{{ value | escape }}"class="btn btn--small {% unless variant_label_state %} disabled{% endunless %}">{{ 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 }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value | escape }}</option>
{% endfor %}
</select>
{% endif %}
</div>
{% endfor %}
</div>
{% endunless %}
<select name="id" id="ProductSelect" class="product-single__variants no-js product-form__item">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %}
selected="selected" {% endif %}
data-sku="{{ variant.sku }}"
value="{{ variant.id }}">
{{ 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 %}
<div class="product-single__quantity product-form__item">
<label for="Quantity" class="product-single__quantity-label">{{ 'products.product.quantity' | t }}</label>
{% include 'quantity-selector', type:'product' %}
</div>
{% endif %}
<div class="product-single__add-to-cart product-single__add-to-cart--full-width">
<button type="submit" name="add" id="AddToCart--{{ section.id }}"
class="btn btn--buy btn--add-to-cart"
{% unless current_variant.available %} disabled="disabled"{% endunless %}>
<span class="btn__text">
{% if section.settings.button_cart_icon %}
<span class="fas fa-shopping-{{ settings.cart_icon }} button-cart-icon"></span>
<span class="fas fa-clock button-soldout-icon"></span>
{% endif %}
<span class="btn__add-to-cart-text">
{% if current_variant.available %}
{{ 'products.product.add_to_cart' | t }}
{% else %}
{{ 'products.product.sold_out' | t }}
{% endif %}
</span>
</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}
{% endif %}
</div>
{% include "dbtfy-sales-countdown" %}{% include "dbtfy-trust-badge", position: "product" %}{% unless product.description == blank or section.settings.show_description == false %}
<div class="product-single__description rte" itemprop="description">
{{ product.description }}
</div>
{% endunless %}
{% include "dbtfy-product-tabs" %} {% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
{% if section.settings.show_product_tags %}
{% for tag in product.tags %}
{% if forloop.first %}
<div class="product-tags">
<span>{{ 'blogs.article.tags' | t }}: </span>
{% endif %}
<a class="text-link" href="/collections/all/{{ tag | handleize }}">{{ tag }}</a>
{% if forloop.last %}
</div>
{% endif %}
{% endfor %}
{% endif %}
{% if template != "product" %}
<hr>
<a {% unless section_onboarding %} href="{{ product.url }}?variant={{ current_variant.id }}"{% endunless %} class="text-link continue-link">
{{ 'products.product.full_details' | t }} <span class="fas fa-arrow-right" aria-hidden="true"></span>
</a>
{% endif %}
</div>
{% include "dbtfy-sticky-addtocart" %} </div>
</div><!-- /.grid -->
</div><!-- /.wrapper -->
</div><!-- /.box -->
</div><!-- /.product-single -->{% include "dbtfy-linked-options" %}
<script>
$(document).ready(function(){
});
</script>
