Betreff: Liquid Code Image Size

How can I adjust liquid code to equalize image and button size?

CustomerStore
New Member
5 0 0

Good morning,

 

For the liquid code of my store I would like to make sure that the size of the image above the buy now button is always equal to the size of the buy now button in all device like mobile phone and PC. How can I do?

 

This is my link of product page: https://www.siero24k.it/products/siero-oro-24k

 

this is the code: 

{% if product.handle == 'siero-oro-24k' %}
<div style="margin-bottom: -20px;">
<img src="https://cdn.shopify.com/s/files/1/0785/9758/7282/files/10_PEZZI_RIMASTI_1000_x_200_px_2.png?v=169815..." width="320" />
</div>
{% endif %}

 

 

This is the image:

 Screenshot 2023-10-26 alle 12.28.50.png

Replies 7 (7)

laddisahsi
Shopify Partner
385 38 41

Hi @CustomerStore 

You can follow the following steps:

1. Please remove the width from the html.

laddisahsi_0-1698317794588.png

 

 

2. Please go to the Online Store.
3. Then Edit Code.
4. Please find the theme.liquid file.
5. Please add code before closing the tag </head> tag.

 

<style>
#ProductInfo-template--19978242720082__main img {
    width: 73%;
}
</style>

 

laddisahsi_1-1698317824276.png

 

 

If this solution is worked, then please Like this and Mark this as accepted solution!


Laddi

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
CustomerStore
New Member
5 0 0

Hi @laddisahsi 

 

I don't want to edit code in the theme liquid because it creates problems in my theme over time long run.

 

I want to edit only the liquid code and set it the same size as the buy button.

 

Thank you

 

CustomerStore
New Member
5 0 0

something like this? But seems too big 

 

{% if product.handle == 'siero-oro-24k' %} <div style="margin-bottom: -20px; width: 100%;"> <img src="https://cdn.shopify.com/s/files/1/0785/9758/7282/files/10_PEZZI_RIMASTI_1000_x_200_px_2.png?v=169815..." class="shopify-payment-button__button shopify-payment-button__button--unbranded BUz42FHpSPncCPJ4Pr_f jjzYeefyWpPZLH9pIgyw RWJ0IfBjxIhflh4AIrUw" /> </div> {% endif %}

laddisahsi
Shopify Partner
385 38 41

@CustomerStore 

Then  use this HTML

<img src="https://cdn.shopify.com/s/files/1/0785/9758/7282/files/10_PEZZI_RIMASTI_1000_x_200_px_2.png?v=1698154030" width="73%">

 

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
CustomerStore
New Member
5 0 0

now it's too small in mobile versionIMG_3371.PNG

laddisahsi
Shopify Partner
385 38 41

use this css

@media only screen and (max-width: 600px) {
#ProductInfo-template--19978242720082__main img {
    width: 100% !important;
}
}

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
CustomerStore
New Member
5 0 0
I solved it with this code but it seems too big only in the desktop version: 

{% if product.handle == 'serum-oro-24k' %} <div style="margin-bottom: -20px;"> <img src="https://cdn.shopify.com/s/files/1/0785/9758/7282/files/10_PEZZI_RIMASTI_1000_x_200_px.png?v=1698345953" style="width: 100%; height: auto;" > </div> <style> .button:later, .shopify-challenge__button:later, .customer button:later, .shopify-payment-button__button--unbranded:later { height: automatic; /* You can adjust this height according to your needs */ } </style> {% end if %}