Shopify themes, liquid, logos, and UX
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:
You can follow the following steps:
1. Please remove the width from the html.
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>
If this solution is worked, then please Like this and Mark this as accepted solution!
Laddi
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
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 %}
@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%">
now it's too small in mobile version
use this css
@media only screen and (max-width: 600px) {
#ProductInfo-template--19978242720082__main img {
width: 100% !important;
}
}
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 %}
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024