Docs

[pangeaseed]

Hi!

I embedded a Shopify collection into our page which looks great when looked at on a non-mobile device.
However, as I make the window smaller and the page responds, the Shopify embed become left aligned.

How can I make it remain centered?

Here’s the link: https://www.pangeaseed.foundation/store

Thank you in advance!

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> Global CSS :

@media (max-width:684px){
.has-image.shopify-buy__layout-vertical.shopify-buy__product {
    margin: 0 auto !important;
    display: block;
}
}

Hope that helps.

[pangeaseed]

I inserted the code snippet as you advised.
Looks like it didn’t work. I also emptied page caches to make sure.

Let me know what else I could do.

Thanks!

[Rue Nel]

Hello There,

I have investigated the issue and it turns out that you have inserted an iframe code for shopify. In cases like this, please take note that you can not control the contents of the iframe from the page itself. You really have to center those elements in the actual html page so that when you use the shopify contents inside the iframe it is already centered.

This issue is with the third party script from Shopify. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[Lely]

Hello There,

I did check again and notice the shopify is loaded via Iframe. This will not work and that custom CSS should be added instead on your shopify.

Hope this helps.

[Author]

Posts