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]

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]

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
-%}

{%- render ‘product-template-variables’, product: product, current_variant: current_variant -%}

{%- if image_position == 'left' -%}

{%- 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 -%}

{%- endif -%}

{%- if settings.show_breadcrumbs and isModal != true -%} {%- render 'breadcrumbs' -%} {%- endif -%}

{%- if settings.vendor_enable -%}

{%- assign vendor_handle = product.vendor | handleize -%} {%- if collections[vendor_handle] != empty -%} {{ collections[vendor_handle].title }} {%- else -%} {{ product.vendor | link_to_vendor }} {%- endif -%}

{%- endif -%}

{%- if isModal -%}

{{ product.title }}

{%- else -%}

{%- unless product.empty? -%} {{ product.title }} {%- else -%} {{ 'home_page.onboarding.product_title' | t }} {%- endunless -%}

{%- endif -%}

{%- if sku_enable -%}

{%- if current_variant.sku -%} {{ current_variant.sku }} {%- endif -%}

{%- endif -%}

{%- capture form_id -%}AddToCartForm-{{ section_id }}-{{ product.id }}{%- endcapture -%} {%- for block in blocks -%} {%- case block.type -%} {%- when '@app' -%} {% render block %} {%- when 'separator' -%}

---

{%- when 'text' -%}

{{ block.settings.text }}

{%- 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 %}

{%- render 'tab', id: tab_id, title: block.settings.title, content: tab_content -%}

{% endunless %} {%- when 'contact' -%}

{% assign tab_id = block.id | append: product.id %} {%- render 'tab-contact', id: tab_id, block: block -%}

{%- when 'description' -%}

{%- assign id = block.id | append: product.id -%} {%- render 'product-description', id: id, product: product, is_tab: block.settings.is_tab -%}

{%- when 'price' -%}

{%- 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 -%} {{ '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 -%}

{%- unless product.empty? -%}
{{ current_variant.price | money }}
{%- else -%}
{{ 1999 | money }}
{%- endunless -%}

{%- 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 -%}

{%- unless hide_sale_price -%}
{{ ‘products.general.save_html’ | t: saved_amount: saved_amount }}
{%- endunless -%}

{%- endif -%}

{%- capture unit_price_base_unit -%} {%- 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 -%} {%- endcapture -%}

{{ current_variant.unit_price | money }}/{{ unit_price_base_unit }}

{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}

{%- 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 -%}

{%- endif -%}

{%- when 'quantity_selector' -%}

{% assign qty_id = section_id | append: product.id %} {{ 'products.product.quantity' | t }} {%- render 'quantity-input', form_id: form_id, id: qty_id, qty: 1, min: 1 -%}

{%- when 'size_chart' -%} {% if connect_to_sizechart == false %} {%- capture size_chart_title -%} {{ 'products.general.size_chart' | t }} {%- endcapture -%}

{%- 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 %}

{% endif %} {%- when 'variant_picker' -%}

{%- 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 -%}

{%- when 'buy_buttons' -%}

{%- unless product.empty? -%}

{%- render 'product-form', form_id: form_id, product: product, show_dynamic_checkout: block.settings.show_dynamic_checkout, current_variant: current_variant -%}

{%- endunless -%}

{%- if block.settings.surface_pickup_enable -%}

{%- endif -%}

{%- when 'sales_point' -%} {%- unless block.settings.text == blank -%}

• {% case block.settings.icon %} {% when 'checkmark' %} {% when 'gift' %} {% when 'globe' %} {% when 'heart' %} {% when 'leaf' %} {% when 'lock' %} {% when 'package' %} {% when 'phone' %} {% when 'ribbon' %} {% when 'shield' %} {% when 'tag' %} {% when 'truck' %} {% endcase %} {{ block.settings.text }}

{%- endunless -%} {%- when 'inventory_status' -%} {%- render 'product-inventory', product: product, current_variant: current_variant, block: block -%} {%- when 'share' -%}

{%- render 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product -%}

{%- when 'trust_badge' -%}

{%- assign img_url = block.settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{%- when 'custom' -%}

{{ block.settings.code }}

{%- endcase -%} {%- else -%}

{%- endfor -%}

{%- unless product.empty? -%}

{{ product.variants | json }}

{%- if product.options.size > 1 -%}

{{ current_variant | json }}

{%- endif -%}
{%- endunless -%}

{%- unless image_position == ‘left’ -%}

{%- 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 -%}

{%- endunless -%}

[Uhrick]

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

{% if current_variant.weight != blank %}

{{ current_variant.weight }}

{% endif %}

before this code:

[YounesTimitar]

Hey,

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

[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 %}

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

{% endif %}

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

[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]

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