Center image horizontally

Deutsch Diskussion Technische Fragen & Antworten
1

Hi there,

I have difficulties centering an image horizontally. I already tried searching for some source codes, but couldn’t make it work so far. Can someone help us out here? This is the current source code of ht relevant section

Any help is highly appreciated! :slightly_smiling_face:

{
“sections”: {
“c791b191-d2ac-47fb-8b50-d4914bcbc54f”: {
“type”: “advanced-content”,
“blocks”: {
“template–15956580532406__c791b191-d2ac-47fb-8b50-d4914bcbc54f-1676451335d9b7fb6d-0”: {
“type”: “image”,
“settings”: {
“image”: “shopify://shop_images/LAEPOCA_journey_Illustration.png”,
“link”: “”,
“width”: “50%”,
“alignment”: “center”
}
}
},
“block_order”: [
“template–15956580532406__c791b191-d2ac-47fb-8b50-d4914bcbc54f-1676451335d9b7fb6d-0”
],
“settings”: {
“full_width”: true,
“space_around”: false
}
},

2

Hey @Laepoca

Thanks for the code and you have reached the German community here but we can chat in English too, that’s no problemo! :wink:

To center an image horizontally in your Shopify theme, you can modify the “alignment” property in the source code you provided. Currently, it is set to “center,” which should center the image horizontally, but it seems like it’s not working for you.

One possible solution is to use CSS to center the image. Here’s an updated version of your code with the necessary CSS added:

{
 "sections": {
   "c791b191-d2ac-47fb-8b50-d4914bcbc54f": {
     "type": "advanced-content",
     "blocks": {
       "template--15956580532406__c791b191-d2ac-47fb-8b50-d4914bcbc54f-1676451335d9b7fb6d-0": {
         "type": "image",
         "settings": {
           "image": "shopify:\/\/shop_images\/LAEPOCA_journey_Illustration.png",
           "link": "",
           "width": "50%",
           "alignment": "none",
           "custom_css": "margin-left: auto; margin-right: auto;"
         }
       }
     },
     "block_order": [
       "template--15956580532406__c791b191-d2ac-47fb-8b50-d4914bcbc54f-1676451335d9b7fb6d-0"
     ],
     "settings": {
       "full_width": true,
       "space_around": false
     }
   }
 }
}

In the updated code, I’ve changed the “alignment” property to “none” and added a “custom_css” property. The “custom_css” property contains CSS styles to center the image horizontally by setting the left and right margins to “auto.” This approach should override any default alignment settings and center the image.

This code suggestion is without guarantee though as it is theme-dependent and if you have any further issues with it, please post your questions in our Design Forum where there are a few of our experts from India that can help out! :wink:

3

Thanks for the quick reply, Gabe! I wrote in English as I was hoping to reach more people :grinning_face_with_smiling_eyes:

I tried your suggestion. Unfortunately I still don’t see any improvements :disappointed_face: Do you have another idea what to change? The Theme we are using is called Motion-Version 10.0.0. Thanks a lot!

Cheers,

Jens

4

Hey Jens! The Motion Theme is great good choice!

I could give you loads of more code suggestions that you can test in the new CSS Editor in your Motion Theme (great sandbox for safely testing out CSS code) or you could ask in our design forum (see some similar questions asked here).

Ultimately though, you will need a Liquid expert to take a deep dive into your code to achieve exactly that what you want. Have you tried asking the Motion Theme dev? They are often quite accommodating.

And have you updated your Motion theme to v. 10.3.2? I’m seeing some amazing enhancements to Images in the newer versions:

image.png
image.png1554×970 116 KB

Instead of making your Motion Theme “non-updatable” by manipulating the liquid, there might be other ways of doing it.

There’s also an app that our users recommend - the Pixc App, which is recommended in this thread from yesterday by @AnnaBe .

Best,