How can I adjust the size of my slideshow picture?

[YounesTimitar]

 Hey,

As you can see my Slideshow picture is way to big.

I want it like this but I cant find any setting on how to edit the width and length of the picture

[Uhrick · Accepted solution]

hey, Younes. 

can you, first, check if the section or the block has something like 'enable/disable parallax' and see if disabling it will fix your issue?

If not, try replacing what I sent you with this code:

@media (max-width: 768px) {
.parallax-image {
    position: static;
    height: 100% !important;
    transform: none !important;
}

.parallax-container {
    position: static;
}
}

the image will still be a bit cropped, but less than before

[Uhrick · Accepted solution]

try replacing

{{ current_variant.weight_in_unit }}{{ current_variant.weight_unit }}

with 

{{ current_variant.weight_in_unit | weight_with_unit: current_variant.weight_unit }}

although I really don't know the reason for this not to work

[Uhrick · Accepted solution]

insert the following code at the end of theme.css 

.product__unit-price--spacing[data-unit-price-wrapper] {
    margin-top: 0;
}

[Uhrick · Accepted solution]

hey, Younes.

Try adding this, also at the end of the theme.css:

.product-block.product-block--sales-point, .sales-point {
margin-bottom: 0;
}

.product-block.product-block--sales-point + .product-block:not(.product-block--sales-point) {
margin-top: 25px;
}

.sales-points {
margin: 0;
}

[Uhrick]

hello, younestimitar

please provide link to your website

[YounesTimitar]

https://timitar-gewurze.myshopify.com/

[Uhrick]

you also need to provide the password to the website

[YounesTimitar]

hey sure, 

timitarspices

[Uhrick]

hey, in here it's already like that

[YounesTimitar]

Hey, sorry that was the old website, I was building a new one and now the picture is not like this. If you take a look now you will see it. 

Thanks alot!

[Uhrick]

hey, Younes

Try going to online store > themes > actions > edit code, go to the end of the theme.css file, and add this: 

@media (max-width: 768px) {
.slideshow__slide .hero__image-wrapper .parallax-image img {
   object-fit: contain;
   object-position: unset;
}
}

[YounesTimitar]

Hey Uhrick,

Now the picture is to small and you can see the black outline

[Uhrick · Accepted solution]

hey, Younes. 

can you, first, check if the section or the block has something like 'enable/disable parallax' and see if disabling it will fix your issue?

If not, try replacing what I sent you with this code:

@media (max-width: 768px) {
.parallax-image {
    position: static;
    height: 100% !important;
    transform: none !important;
}

.parallax-container {
    position: static;
}
}

the image will still be a bit cropped, but less than before

[YounesTimitar]

Hey uhrick,

Wow thanks it worked!

I have another Issue where you can maybe help me.

I need to add the product weight to the product page in the same spot where its at the first picture. 

Thanks for your help!

[Uhrick]

hey, Younes.

Can you show me the code to the file 'product-template.liquid' or 'main-product.liquid'? It's a file with product on the name, and it should be on sections or snippet

[YounesTimitar]

{%- liquid
assign current_variant = product.selected_or_first_available_variant

unless thumbnail_position
assign thumbnail_position = 'beside'
endunless

assign product_zoom_size = '1800x1800'
assign product_image_size = '620x'

case image_container_width
when 'small'
assign product_image_width = 'medium-up--two-fifths'
assign product_description_width = 'medium-up--three-fifths'
assign product_image_size = '480x'
when 'medium'
assign product_image_width = 'medium-up--one-half'
assign product_description_width = 'medium-up--one-half'
assign product_image_size = '620x'
when 'large'
assign product_image_width = 'medium-up--three-fifths'
assign product_description_width = 'medium-up--two-fifths'
assign product_image_size = '740x'
endcase

assign product_img_structure = product.featured_media | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
-%}

{%- liquid
assign connect_to_sizechart = false

for block in section.blocks
if block.type == 'size_chart'
assign sizechart_index = forloop.index0
assign next_block_index = sizechart_index | plus: 1
assign variant_block = section.blocks[next_block_index]

if variant_block.type == 'variant_picker' and variant_block.settings.picker_type == 'button' and product.has_only_default_variant == false
for option in product.options_with_values
assign size_trigger = 'products.general.size_trigger' | t | downcase
assign downcased_option = option.name | downcase

if downcased_option contains size_trigger
assign connect_to_sizechart = true
endif
endfor
endif

endif
endfor
-%}

<div id="ProductSection-{{ section_id }}-{{ product.id }}"
class="product-section"
data-section-id="{{ section_id }}"
data-product-id="{{ product.id }}"
data-section-type="product"
data-product-handle="{{ product.handle }}"
data-product-title="{{ product.title | escape }}"
data-product-url="{{ product.url | within: collection }}"
data-aspect-ratio="{{ 100 | divided_by: product.featured_media.aspect_ratio }}"
data-img-url="{{ product_img_structure }}"
{% unless isModal %}
data-history="true"
{% endunless %}
data-modal="{{ isModal }}">

{%- render 'product-template-variables', product: product, current_variant: current_variant -%}

<div class="page-content page-content--product">
<div class="page-width">

<div class="grid{% unless image_position == 'left' %} grid--product-images-right{% endunless %}{% if mobile_layout == 'partial' %} grid--product-images--partial{% endif %}">
{%- if image_position == 'left' -%}
<div class="grid__item {{ product_image_width }} product-single__sticky">
{%- render 'product-images',
section_id: section_id,
product: product,
isModal: isModal,
image_position: image_position,
product_zoom_enable: product_zoom_enable,
product_zoom_size: product_zoom_size,
product_image_size: product_image_size,
thumbnail_arrows: thumbnail_arrows,
thumbnail_height: thumbnail_height,
thumbnail_position: thumbnail_position,
video_looping: video_looping,
video_style: video_style
-%}
</div>
{%- endif -%}

<div class="grid__item {{ product_description_width }}">

<div class="product-single__meta">
<div class="product-block product-block--header">
{%- if settings.show_breadcrumbs and isModal != true -%}
{%- render 'breadcrumbs' -%}
{%- endif -%}

{%- if settings.vendor_enable -%}
<div class="product-single__vendor">
{%- assign vendor_handle = product.vendor | handleize -%}
{%- if collections[vendor_handle] != empty -%}
<a href="{{ routes.collections_url }}/{{ collections[vendor_handle].handle }}">
{{ collections[vendor_handle].title }}
</a>
{%- else -%}
{{ product.vendor | link_to_vendor }}
{%- endif -%}
</div>
{%- endif -%}

{%- if isModal -%}
<p class="h2 product-single__title">
{{ product.title }}
</p>
{%- else -%}
<h1 class="h2 product-single__title">
{%- unless product.empty? -%}
{{ product.title }}
{%- else -%}
{{ 'home_page.onboarding.product_title' | t }}
{%- endunless -%}
</h1>
{%- endif -%}

{%- if sku_enable -%}
<p data-sku class="product-single__sku">
{%- if current_variant.sku -%}
{{ current_variant.sku }}
{%- endif -%}
</p>
{%- endif -%}
</div>

<div data-product-blocks>
{%- capture form_id -%}AddToCartForm-{{ section_id }}-{{ product.id }}{%- endcapture -%}
{%- for block in blocks -%}
{%- case block.type -%}
{%- when '@app' -%}
{% render block %}
{%- when 'separator' -%}
<div class="product-block" {{ block.shopify_attributes }}><hr></div>
{%- when 'text' -%}
<div class="product-block" {{ block.shopify_attributes }}>
{{ block.settings.text }}
</div>
{%- when 'tab' -%}
{% assign tab_id = block.id | append: product.id %}
{% capture tab_content %}
{{ block.settings.content }}
{{ block.settings.page.content }}
{% endcapture %}
{% unless tab_content == blank and block.settings.title == blank %}
<div class="product-block product-block--tab" {{ block.shopify_attributes }}>
{%- render 'tab', id: tab_id, title: block.settings.title, content: tab_content -%}
</div>
{% endunless %}
{%- when 'contact' -%}
<div class="product-block product-block--tab" {{ block.shopify_attributes }}>
{% assign tab_id = block.id | append: product.id %}
{%- render 'tab-contact', id: tab_id, block: block -%}
</div>
{%- when 'description' -%}
<div class="product-block{% if block.settings.is_tab %} product-block--tab{% endif %}" {{ block.shopify_attributes }}>
{%- assign id = block.id | append: product.id -%}
{%- render 'product-description', id: id, product: product, is_tab: block.settings.is_tab -%}
</div>
{%- when 'price' -%}
<div class="product-block product-block--price" {{ block.shopify_attributes }}>
{%- assign hide_sale_price = true -%}
{%- if product.compare_at_price_max > product.price -%}
{%- if current_variant.compare_at_price > current_variant.price -%}
{%- assign hide_sale_price = false -%}
{%- endif -%}
<span
data-a11y-price
class="visually-hidden"
aria-hidden="{{ hide_sale_price }}">
{{ 'products.general.regular_price' | t }}
</span>
<span data-product-price-wrap class="{% if hide_sale_price %} hide{% endif %}">
<span data-compare-price class="product__price product__price--compare">
{%- if current_variant.compare_at_price > current_variant.price -%}
{{ current_variant.compare_at_price | money }}
{%- endif -%}
</span>
</span>
<span data-compare-price-a11y class="visually-hidden">{{ 'products.general.sale_price' | t }}</span>
{%- else -%}
<span data-a11y-price class="visually-hidden">{{ 'products.general.regular_price' | t }}</span>
{%- endif -%}

<span data-product-price
class="product__price{% if current_variant.compare_at_price > current_variant.price %} on-sale{% endif %}">
{%- unless product.empty? -%}
{{ current_variant.price | money }}
{%- else -%}
{{ 1999 | money }}
{%- endunless -%}
</span>

{%- if settings.product_save_amount -%}
{%- if settings.product_save_type == 'dollar' -%}
{%- capture saved_amount -%}{{ current_variant.compare_at_price | minus: current_variant.price | money }}{%- endcapture -%}
{%- else -%}
{%- capture saved_amount -%}{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | round }}%{%- endcapture -%}
{%- endif -%}
<span data-save-price class="product__price-savings{% if hide_sale_price %} hide{% endif %}">
{%- unless hide_sale_price -%}
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
{%- endunless -%}
</span>
{%- endif -%}

<div
data-unit-price-wrapper
class="product__unit-price product__unit-price--spacing {% unless current_variant.unit_price_measurement %} hide{% endunless %}">
{%- capture unit_price_base_unit -%}
<span data-unit-base>
{%- if current_variant.unit_price_measurement -%}
{%- if current_variant.unit_price_measurement.reference_value != 1 -%}
{{ current_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ current_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
</span>
{%- endcapture -%}

<span data-unit-price>{{ current_variant.unit_price | money }}</span>/{{ unit_price_base_unit }}
</div>

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product__policies rte small--text-center">
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- when 'quantity_selector' -%}
<div class="product-block" {{ block.shopify_attributes }}>
<div class="product__quantity">
{% assign qty_id = section_id | append: product.id %}
<label for="Quantity-{{ qty_id }}">{{ 'products.product.quantity' | t }}</label>
{%- render 'quantity-input', form_id: form_id, id: qty_id, qty: 1, min: 1 -%}
</div>
</div>
{%- when 'size_chart' -%}
{% if connect_to_sizechart == false %}
{%- capture size_chart_title -%}
{{ 'products.general.size_chart' | t }}<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-size-chart" viewBox="0 0 64 64"><defs><style>.a{fill:none;stroke:#000;stroke-width:2px}</style></defs><path class="a" d="M22.39 33.53c-7.46 0-13.5-3.9-13.5-8.72s6-8.72 13.5-8.72 13.5 3.9 13.5 8.72a12 12 0 0 1-.22 1.73"/><ellipse cx="22.39" cy="24.81" rx="3.28" ry="2.12"/><path class="a" d="M8.89 24.81V38.5c0 7.9 6.4 9.41 14.3 9.41h31.92V33.53H22.39M46.78 33.53v7.44M38.65 33.53v7.44M30.52 33.53v7.44M22.39 33.53v7.44"/></svg>
{%- endcapture -%}

<div class="size-chart__standalone" {{ block.shopify_attributes }}>
{%- render
'tool-tip-trigger',
title: size_chart_title,
content: block.settings.size_chart.content,
context: 'size-chart'
-%}
{% style %}
tool-tip-trigger {
text-transform: uppercase;
}
{% endstyle %}
</div>
{% endif %}
{%- when 'variant_picker' -%}
<div class="product-block" {% if block.settings.product_dynamic_variants_enable %}data-dynamic-variants-enabled{% endif %} {{ block.shopify_attributes }}>
{%- unless product.has_only_default_variant -%}
{%- for option in product.options_with_values -%}
{%- liquid
if block.settings.color_swatches
assign is_color = false
assign color_option_index = 0
assign swatch_trigger = 'products.general.color_swatch_trigger' | t | downcase
assign color_option_index = forloop.index0
assign downcased_option = option.name | downcase
if downcased_option contains swatch_trigger
assign is_color = true
elsif swatch_trigger == 'color' and downcased_option contains 'colour'
assign is_color = true
endif
endif
-%}

{%- if block.settings.picker_type == 'button' -%}
{%- render 'variant-button',
block: block,
product: product,
form_id: form_id,
section_id: section_id,
option: option,
forloop: forloop,
variant_labels: block.settings.variant_labels,
is_color: is_color,
color_option_index: color_option_index,
connect_to_sizechart: connect_to_sizechart,
sizechart_index: sizechart_index
-%}
{%- else -%}
{%- render 'variant-dropdown',
product: product,
form_id: form_id,
section_id: section_id,
option: option,
forloop: forloop,
variant_labels: block.settings.variant_labels
-%}
{%- endif -%}
{%- endfor -%}
{%- endunless -%}
</div>
{%- when 'buy_buttons' -%}
<div class="product-block" {{ block.shopify_attributes }}>
{%- unless product.empty? -%}
<div class="product-block">
{%- render 'product-form',
form_id: form_id,
product: product,
show_dynamic_checkout: block.settings.show_dynamic_checkout,
current_variant: current_variant
-%}
</div>
{%- endunless -%}

{%- if block.settings.surface_pickup_enable -%}
<div data-store-availability-holder
data-product-name="{{ product.title | escape }}"
data-base-url="{{ shop.url }}{{ routes.root_url }}"
></div>
{%- endif -%}
</div>
{%- when 'sales_point' -%}
{%- unless block.settings.text == blank -%}
<div class="product-block product-block--sales-point" {{ block.shopify_attributes }}>
<ul class="sales-points">
<li class="sales-point">
<span class="icon-and-text">
{% case block.settings.icon %}
{% when 'checkmark' %} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-circle-checkmark" viewBox="0 0 64 64"><defs><style>.a{fill:none;stroke:#000;stroke-width:2px}</style></defs><path class="a" d="M52.68 24.48A22 22 0 1 1 47 15.93M21 32l8.5 8.5L57 13"/></svg>
{% when 'gift' %} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-gift" viewBox="0 0 64 64"><defs><style>.a{fill:none;stroke:#000;stroke-width:2px}</style></defs><path class="a" d="M9 20.23h46v8.68H9zM13.34 28.91h36.89v24.3H13.34zM27.82 20.66v32.98M35.91 20.88v32.98M20.52 11.43a3.73 3.73 0 0 0-.74 2.87 4.57 4.57 0 0 0 .8 2.27C22 18.09 25.15 20 32 20.23a12 12 0 0 0-2.43-7 7.52 7.52 0 0 0-5.66-3.12 4 4 0 0 0-3.39 1.32z"/><path class="a" d="M43.37 11.43a3.73 3.73 0 0 1 .74 2.87 4.48 4.48 0 0 1-.8 2.27c-1.42 1.52-4.57 3.41-11.42 3.66a12.08 12.08 0 0 1 2.43-7A7.56 7.56 0 0 1 40 10.14a4 4 0 0 1 3.37 1.29z"/></svg>
{% when 'globe' %} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-globe" viewBox="0 0 64 64"><defs><style>.a{fill:none;stroke:#000;stroke-width:2px}</style></defs><circle class="a" cx="32" cy="32" r="22"/><path class="a" d="M13 21h38M10 32h44M13 43h38M32 10c-12 8-12 37 0 44M32 10c12 8 12 37 0 44"/></svg>
{% when 'heart' %} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-heart" viewBox="0 0 64 64"><defs><style>.a{fill:none;stroke:#000;stroke-width:2px}</style></defs><path class="a" d="M51.27 15.05a13 13 0 0 0-18.44 0l-.83.83-.83-.83a13 13 0 0 0-18.44 18.44l.83.83L32 52.77l18.44-18.45.83-.83a13 13 0 0 0 0-18.44z"/></svg>
{% when 'leaf' %} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-leaf" viewBox="0 0 64 64"><defs><style>.a{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:2px}</style></defs><path class="a" d="M52 11L13 50M35 13v15h16"/><path class="a" d="M52 11c6 24-16.72 47.29-33 32C7 22 29 10 52 11z"/></svg>
{% when 'lock' %} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-lock" viewBox="0 0 64 64"><defs><style>.a{fill:none;stroke:#000;stroke-width:2px}</style></defs><path class="a" d="M19.45 23.6v-3.2c0-7 5.89-11.75 12.55-11.75 7.21 0 12.55 5.49 12.55 11.75v3.2M10 23.6h44v31.75H10zM32 37.47v7.47"/><circle class="a" cx="32" cy="35.87" r="1.6"/></svg>
{% when 'package' %} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-package" viewBox="0 0 64 64"><defs><style>.a{fill:none;stroke:#000;stroke-width:2px}</style></defs><path class="a" d="M32 54.52L10 41.95v-19.9L32 9.48l22 12.57v19.9L32 54.52z"/><path class="a" d="M32 54.52v-19.9l22-12.57M32 34.62L10 22.05M41.7 15.02L21 28.33v8.38"/></svg>
{% when 'phone' %} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-phone" viewBox="0 0 64 64"><defs><style>.a{fill:none;stroke:#000;stroke-width:2px}</style></defs><path class="a" d="M18.4 9.65l10.2 10.2-6.32 6.32c2.1 7 6.89 12.46 15.55 15.55l6.32-6.32 10.2 10.2-8.75 8.75C25.71 50.3 13.83 38.21 9.65 18.4z"/></svg>
{% when 'ribbon' %} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-ribbon" viewBox="0 0 64 64"><defs><style>.a{fill:none;stroke:#000;stroke-width:2px}</style></defs><path class="a" d="M28.57 42.31l-8.36 13.07-2.6-7.17-7.61.65 8.35-13.07a17.05 17.05 0 0 0 8.12 5.94 17.3 17.3 0 0 0 1.74.5zM54 48.86l-7.61-.65-2.61 7.17-8.36-13.07.37-.08a16.4 16.4 0 0 0 1.73-.5 17 17 0 0 0 8.12-5.93z"/><path class="a" d="M49 25.64a16.79 16.79 0 0 1-3.14 9.85 3.55 3.55 0 0 1-.23.31 17 17 0 0 1-8.12 5.93 16.4 16.4 0 0 1-1.73.5l-.37.08a16.74 16.74 0 0 1-3.42.35 16.91 16.91 0 0 1-3.43-.35l-.36-.08a17.3 17.3 0 0 1-1.74-.5 17.05 17.05 0 0 1-8.12-5.94c-.07-.09-.15-.19-.22-.3A16.86 16.86 0 0 1 15 25.64a17 17 0 0 1 34 0z"/><path class="a" d="M36.09 27.78l.96 5.63L32 30.75l-5.05 2.66.96-5.63-4.09-3.98 5.65-.82L32 17.86l2.53 5.12 5.64.82-4.08 3.98z"/></svg>
{% when 'shield' %} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-shield" viewBox="0 0 64 64"><defs><style>.a{fill:none;stroke:#000;stroke-width:2px}</style></defs><path class="a" d="M21.18 31.69L28.54 39l15.91-15.88"/><path class="a" d="M53 12.54v15.24a31.41 31.41 0 0 1-3.7 14.95A25.46 25.46 0 0 1 32 56a25.46 25.46 0 0 1-17.3-13.27A31.41 31.41 0 0 1 11 27.78V12.54C24.88 13.67 32 8 32 8s7.12 5.67 21 4.54z"/></svg>
{% when 'tag' %} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-tag" viewBox="0 0 64 64"><defs><style>.a{fill:none;stroke:#000;stroke-width:2px}</style></defs><path class="a" d="M46.69 10.34l-10.55.07-25.8 25.8 17.45 17.45 25.8-25.8.07-10.55-6.97-6.97z"/><circle class="a" cx="43.95" cy="20.05" r="3.53"/><path class="a" d="M14.4 32.15L31.85 49.6"/></svg>
{% when 'truck' %} <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-truck" viewBox="0 0 64 64"><defs><style>.a{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:2px}</style></defs><path class="a" d="M16.5 43.22H6.88V16.5h33.14v26.72H23.94M45.42 43.22h-5.4V30.4h17.1v12.82h-4.23M57.12 30.4l-6.41-8.56H40.02"/><circle class="a" cx="20.24" cy="43.76" r="3.74"/><path class="a" d="M45.42 43.23a3.82 3.82 0 1 1 0 .37v-.37"/></svg>
{% endcase %}
<span>{{ block.settings.text }}</span>
</span>
</li>
</ul>
</div>
{%- endunless -%}
{%- when 'inventory_status' -%}
{%- render 'product-inventory', product: product, current_variant: current_variant, block: block -%}
{%- when 'share' -%}
<div class="product-block" {{ block.shopify_attributes }}>
{%- render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product -%}
</div>
{%- when 'trust_badge' -%}
<div class="product-block" {{ block.shopify_attributes }}>
<div class="aos-animate" style="max-width: {{ block.settings.trust_image.width }}px; margin: 0 auto;">
<div class="image-wrap " style="height: 0; padding-bottom: {{ 100 | divided_by: block.settings.trust_image.aspect_ratio }}%;">
{%- assign img_url = block.settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<img class="lazyload"
data-src="{{ img_url }}"
data-widths="[360, 540, 700, 1024]"
data-aspectratio="{{ block.settings.trust_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ block.settings.trust_image.alt }}">
<noscript>
<img class="lazyloaded" src="{{ block.settings.trust_image | img_url: '540x' }}" alt="{{ block.settings.trust_image.alt }}">
</noscript>
</div>
</div>
</div>
{%- when 'custom' -%}
<div class="product-block" {{ block.shopify_attributes }}>
{{ block.settings.code }}
</div>
{%- endcase -%}
{%- else -%}
<div data-blocks-holder
data-url="{{ product.url | within: collection }}"
data-template="{{ product.template_suffix }}">
<div class="placeholder-content" style="min-height: 86px;"></div>
</div>
{%- endfor -%}
</div>

{%- unless product.empty? -%}
<textarea class="hide" aria-hidden="true" aria-label="Product JSON" data-variant-json>
{{ product.variants | json }}
</textarea>
{%- if product.options.size > 1 -%}
<textarea class="hide" aria-hidden="true" aria-label="Variant JSON" data-current-variant-json>
{{ current_variant | json }}
</textarea>
{%- endif -%}
{%- endunless -%}
</div>
</div>

{%- unless image_position == 'left' -%}
<div class="grid__item {{ product_image_width }} product-single__sticky">
{%- render 'product-images',
section_id: section_id,
product: product,
isModal: isModal,
image_position: image_position,
product_zoom_enable: product_zoom_enable,
product_zoom_size: product_zoom_size,
product_image_size: product_image_size,
thumbnail_arrows: thumbnail_arrows,
thumbnail_position: thumbnail_position,
video_looping: video_looping,
video_style: video_style
-%}
</div>
{%- endunless -%}
</div>
</div>
</div>
</div>

[Uhrick]

Hey, ok, thanks for the file, you will need to add the following code :

{% if current_variant.weight != blank %}
<div class="product__unit-price product__unit-price--spacing">
{{ current_variant.weight }}
</div>
{% endif %}

before this code:

<div
data-unit-price-wrapper
class="product__unit-price product__unit-price--spacing {% unless current_variant.unit_price_measurement %} hide{% endunless %}">

[YounesTimitar]

Hey,

I cant find this code in the product-template.liquid

<div data-unit-price-wrapper class="product__unit-price product__unit-price--spacing {% unless current_variant.unit_price_measurement %} hide{% endunless %}">

[Uhrick]

try to search for it in the file using ctrl + f

[YounesTimitar]

Hey, 

I found it! 

But its only half working.

There is a lot of spacing in between and also there is no weight unit. It should be 60g not 60.

Do you  know how to fix this?

[Uhrick]

Replace what I've sent with 

{% if current_variant.weight != blank %}
<div class="product__unit-price product__unit-price--spacing">
{{ current_variant.weight_in_unit }}{{ current_variant.weight_unit }}
</div>
{% endif %}

and the code below it, that I told you to search, replace it with this:

<div data-unit-price-wrapper class="product__unit-price{% unless current_variant.weight != blank %} product__unit-price--spacing{% endunless %}{% unless current_variant.unit_price_measurement %} hide{% endunless %}">

[YounesTimitar]

Hey Uhrick,

Thanks for your reply. Now the setup is perfect but it doesnt show the actual weight. I put in the weight for every product so thats not the problem. It shows 0.0g for every product.

[Uhrick · Accepted solution]

try replacing

{{ current_variant.weight_in_unit }}{{ current_variant.weight_unit }}

with 

{{ current_variant.weight_in_unit | weight_with_unit: current_variant.weight_unit }}

although I really don't know the reason for this not to work

[YounesTimitar]

Hey Uhrick,

It worked, youre the best thanks!!

I have one more Issue that you can help me with, please 😄

The picture for my Product Slideshow on Computer is way to big. (picture 1)

it should b like picture 2.

Can you please help me and fix this.

1.

it should be like this:

2.

You already fixxed my mobile picture but now I have a new computer picture that has to bee fixxed

[Uhrick]

can you check if the section or block has something like 'enable parallax'? And if it has, can you remove it?

[YounesTimitar]

it helped a little bit, but the picture is still very unsharp. The original is a high-quality picture.

I dont know why but in the screenshots it looks good but when you go on the website they look really unsharp

[Uhrick]

hey Younes, I'm afraid that to fix this I'll have to know in what section this is happening, and to know what is the file for that section. In there, you'd need to find something like {{ section.image | img_url:  'master' }}  and replace it with something like

{{ section.image | image_url: width: 2000 }}

[YounesTimitar]

Hey Uhick,

Is it possible to reduce the distance between the weight and the Price. The 50g should be directly above the 15,80€, 

My Store: www.timitar.de

[Uhrick · Accepted solution]

insert the following code at the end of theme.css 

.product__unit-price--spacing[data-unit-price-wrapper] {
    margin-top: 0;
}

[YounesTimitar]

Thanks Uhrick you're the best!!!

Do you also have any  idea of how to reduce the distance between those two (picture)

[Uhrick · Accepted solution]

hey, Younes.

Try adding this, also at the end of the theme.css:

.product-block.product-block--sales-point, .sales-point {
margin-bottom: 0;
}

.product-block.product-block--sales-point + .product-block:not(.product-block--sales-point) {
margin-top: 25px;
}

.sales-points {
margin: 0;
}

[YounesTimitar]

Thanks a lot  Uhrick, youre really the best!!!! 

I have another issue you can help me with :DD

Is it possible to edit the Newsletter Sign Up form. I want to change the text "Melden Sie sich für unsere" to just "E-Mail" and I also want to change the color of the button and the whole field where you can add your email to white but you cant edit that in the normal editor.

My URL is https://timitar-gewurze.myshopify.com/

Like this:

[Uhrick]

I also want to change the color of the button and the whole field where you can add your email to white but you cant edit that in the normal editor.

I didn't understand, do you want to change that or is it changeable in the editor?

[YounesTimitar]

its not changeable. 

I want it like this: so color of the "E-Mail Field" white and the button also in white

[Uhrick · Accepted solution]

at the end of theme.css:

.newsletter-section input[type="email"], .newsletter-section button {
background: white;
color: black;
}

.newsletter-section input[type="email"]::placeholder {
color: #ccc;
}

[YounesTimitar]

Thanks Uhrick it worked!! 😄

[Uhrick]

as for the part of changing the email text, if it's not on the theme customizer, you'll have to change it in the code or in the translation part

[YounesTimitar]

Hey Uhrick, 

New issue:DD

So I have one product with only 0.5  g (weight) but all the time it shows for 1g. Every other product the weight is over 1g and it shows correct but only for this one its 0.5g  but shows 1 g

[Uhrick]

hey Younes

sorry, I've tried fixing it in here, and the only way I could was actually undoing this: 

but if a lot of fixes keep appearing, feel free to send me a DM so that we can discuss approaching all of them

regards

[YounesTimitar]

Hey Uhrick,

How can I make the backround of the text in a different color like in the picture. Im using the Impulse Theme. 

Do I need to create a "Rich Text" and then from there I can edit the backround? 

Its for the homepage under the slideshow picture, I want to make a little text with different backround color

[YounesTimitar]

Hey Uhrick, I have another question.

Is it possible to split the text columns with icons to 2 per row on mobile. Right now its just 1 per row.#

i want it like this:

[YounesTimitar]

Hey Uhrick

So I have one product with only 0.5  g (weight) but all the time it shows for 1g. Every other product the weight is over 1g and it shows correct but only for this one its 0.5g  but shows 1 g