How can I fix the placement of my Zip Pay widget on my product page?

Hi !

Would anybody be able to help me fix my zip pay widget placement on my product page? It is currently set up on my website like this for example:

https://the-guitar-centre.myshopify.com/products/fender-player-stratocaster-hss?_pos=22&_sid=1607429e1&_ss=r

As you can see it is sitting slightly too far to the left and cutting off the right-side of my quantity box. I tried following the zip pay website instructions for their widget but I am stuck with it looking like this at the moment. Any help would be much appreciated !

Hi @RaymondRow

Welcome to Shopify Community.

Aibek is here from Speedimize.io

In order for the widget to display normally, you will need to slightly edit the CSS.

Before this script is connected, the style is registered http://joxi.ru/1A5y3jqIDlqVDA

#zip-prod-widget > iframe {
    position: relative !important;
    right: 20px !important;
  }

By default, in product-template.liquid.
You will need to delete right: 20px !important; as a result, it should turn out as below:

#zip-prod-widget > iframe {
    position: relative !important;
  }

After that, the widget will be located normally, as in the screenshot http://joxi.ru/ZrJNa36IwdVXyr

Hope that helps you.

2 Likes

Hi Aibek ,

This worked perfectly, glad it was such a straightforward change.

Thanks for you help !

You’re always welcome!

If you need any help, our agency will be glad to give our advices.

2 Likes