Product Page Custom Liquid Help for Dawn 2.0

Store Design
1

Hi there! I’m using the Dawn 2.O theme and I’m trying to add trust badges below the ATC button using the custom liquid block on the product page.

This is the code I used:

Trust Badge

I originally had the image set to 450 pixels wide and that seems to work great on desktop, but when I switch to the mobile view the image is too large. So I made the image 225 pixels wide and now it’s too small on desktop. What do I need to change to make it stay about the same size as the ATC button on both mobile and desktop? I would like it to be centered under the ATC button on desktop and mobile, too.

I know nothing of how to use .liquid, so I’m assuming it’s an easy fix. Thanks! :wink:

2

Hi,

You may wrap around the image tag with a div and make it responsive. However, I believe adding a class to the image tag is the easiest way to change the image responsiveness for you. Please follow the steps below.

  1. Add a class in the image tag as below. (class=“My_Trust_Badge”)

![Trust Badge|1000x329](upload://jwtJywikHgu7BZHsMNuTb0ENohc.png)
  1. Add the code below to assets/base.css file.
.My_Trust_Badge {
  max-width: 450px;
}
@media only screen and (min-width: 768px) {
  .My_Trust_Badge {
    width: 450px;
  }
}
@media only screen and (max-width: 767px) {
  .My_Trust_Badge {
    width: 225px;
  }
}

The above code will make the Trust Badge image 450px on PC and 225px on Mobile.

You may change the size 450px & 225px to fit your needs.

Hope it helps.

Thanks.

1 Like
3

This worked perfectly, thank you so much! :slightly_smiling_face: