Need help centering the image in an image section.

Store Design
,

Topic summary

A user needs help centering an image in a simple image section on their Shopify store using the Trademark theme. The image defaults to left-alignment.

Initial Solution Attempt:

  • Another user provides CSS code targeting a specific section ID (#shopify-section-...) to apply flexbox centering properties
  • This code should be added to the bottom of the theme.css file in the Assets folder

Resolution:

  • The first CSS solution doesn’t work because the section ID changed
  • Updated CSS code targets the element differently using #main .shopify-section:nth-child(14) instead of the specific section ID
  • This successfully centers the image

Follow-up:
The original poster asks how to find section IDs/codes to apply similar fixes to other sections. The helper clarifies they used a child selector (14th child of main) rather than a specific section ID, referencing an uploaded image for explanation.

Note: Some text in the conversation appears corrupted or reversed, but the core technical solution and outcome are clear.

Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

I have a simple image section without any text. The image is automatically left-aligned and I would like for it to be centered. Would anyone know how to accomplish this?

store: www.leatherandmoreinhickory.com

Theme: Trademark

Section:

{{ section.settings.image_1 | img_url: ‘2048x’ | img_tag }}
{% schema %}
{
“name”: “Image justified”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image_1”,
“label”: “Image”
}
],
“presets”: [
{
“name”: “Image”,
“category”: “Content”
}
]
}

{% endschema %}

Screenshot 2022-11-18 at 3.10.47 PM.png
Screenshot 2022-11-18 at 3.10.47 PM.png3202×1536 445 KB

1 Like
2

Hi @MatthewChandler ,

Please follow the instructions below to make the image centered

  1. From your Admin Page, click Online Store > Themes >Actions > Edit code
  2. In the Asset folder, open the theme.css
  3. Paste the code below at the very bottom of the file.
div#shopify-section-1aee553b-4b96-4fa7-9817-1a59ac650b05 {
    display: flex;
    justify-content: center;
    align-items: center;
}
1 Like
3

I added the code and it didn’t seem to have any effect on it.

Screenshot 2022-11-18 at 3.56.57 PM.png
Screenshot 2022-11-18 at 3.56.57 PM.png1682×906 112 KB

1 Like
4

The section ID got changed. Try the code below instead, same instruction

#main .shopify-section:nth-child(14) {
    display: flex;
    justify-content: center;
    align-items: center;
}
1 Like
5

Yes, that fixed it! May I ask you how I can find the section codes so I can do this with other sections? That makes so much sense now.

6

I’m sorry, the Section ID is what I meant.

1 Like
7

@MatthewChandler

I change the code so it calls the 14th child of the main, Refer to the image below

made4Uo_0-1668808941902.png
made4Uo_0-1668808941902.png1125×633 81.1 KB

1 Like