Hi, I need help reducing the size of my images. When I upload my image - it gets stretched into a bigger size and becomes pixelated. How do I resolve this?
url: https://pure-date.myshopify.com/
pw: triwhi
Page > Shop > Organic Dates [For all pages]
Hi @Riz_bangee
You can try one of the following solutions:
Solution #1
- In your Shopify Admin go to Online store > Themes > Actions > Edit code
- In your theme.liquid file, find the (press CTRL + F or command + F on Mac)
- paste this code right above the tag:
You can change the width, 300px, to any width you wish. The height will be calculated automatically.
4. Save
Solution #2
- In your Shopify Admin go to Online store > Themes > Actions > Edit code
- Go to Assets > Open section-main-product.css > Find “@media screen” section or search for product__media-wrapper (press CTRL + F or command + F on Mac)
- Reduce max-width percentage to reduce your image size.
You can edit it to 50% to split the image and content evenly.
- Save
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any questions!
Hello There,
- In your Shopify Admin go to online store > themes > actions > edit code
- Find Asset >theme.css and paste this at the bottom of the file:
body.gradient .image-with-text .image-with-text__media {
padding-bottom: 100% !important;
}
@ZestardTech I tried this - it just crops the bottom of the image instead of reducing the size to original image size
@AvadaCommerce Solution 2 did not work
Solution 1: is this correct? if so - nothing changed
{%- for block in section.blocks -%}
{% case block.type %}
{%- when 'heading' -%}
##
{{ block.settings.heading | escape }}
{%- when 'caption' -%}
{{ block.settings.caption | escape }}
{%- when 'text' -%}
{{ block.settings.text }}
{%- when 'button' -%}
{%- if block.settings.button_label != blank -%}
@AvadaCommerce Solution #2 resolved this image size issue on Shop - Product Page
