i want this star image in center

Store Design
, , , , , , , , , ,

Topic summary

A user seeks to center a star image within a multi-column section on their Shopify store. Multiple developers provided CSS solutions with similar approaches:

Primary Solutions:

  • Add CSS targeting .multi-column__item with display: flex, flex-direction: column, and align-items: center
  • Alternative targeting: .multi-column__item img with margin: 0 auto

Implementation Methods:

  1. Theme-wide: Edit theme.liquid or base.css/theme.css files in the code editor
  2. Section-specific: Use the custom CSS field within the theme customizer for that particular section

Key Steps:

  • Navigate to Online Store → Themes → Edit code (or Customize)
  • Locate appropriate CSS file or custom CSS section
  • Paste provided code at the end of file
  • Save changes

All responders confirmed their solutions should resolve the centering issue. The discussion remains open with no indication the user selected a specific solution.

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

i want this star image in center, its multi coloumn section.

https://huurraa.myshopify.com

pass = Hurra

Screenshot 2024-08-08 161449.png
Screenshot 2024-08-08 161449.png1897×804 132 KB

1 Like
2

Hello @rgeafrauuhf

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.section-stack .multi-column__item{ display: flex !important; justify-content: center !important; align-items: center !important; flex-direction: column; }

niraj_patel_0-1723114446425.png
niraj_patel_0-1723114446425.png1354×224 25.7 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

3

Hello @rgeafrauuhf , Please follow these steps to add this CSS code:

  1. Go to your Online Store
  2. Click on “Themes”
  3. Select “Edit code”
  4. Open your CSS file. If you have a custom CSS file, open that instead.
  5. If you can’t find your custom CSS file, open “base.css”
  6. Add the following code at the end of the file.
.multi-column__item img {
    margin: 0 auto;
}

See the screenshot below.

dws_pvt_ltd_0-1723114712282.png
dws_pvt_ltd_0-1723114712282.png1832×892 186 KB

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

4

Hello @rgeafrauuhf

You just need to follow below steps:

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.css file

  3. Paste the below code at the end of the file.

.section-stack .multi-column__item img {
  margin: 0 auto;
}
  1. Don’t forget to save the file after making changes.

Hope this solution works best for your issue.

5

Hi @rgeafrauuhf ,

You can edit this by adding a simple line of css

Go to your online store > themes > click on customise on current active theme > click on the section which needs to be changed > on rightside scroll down you can see custom css section > paste the below code.

.multi-column__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

by adding like this it only effect on that particular section only if you need to make change in every page where the section comes then

go to online Store > themes> click on three dots of current active theme> edit code > search for theme.css in leftside bar search > open it paste the above code.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

6

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.multi-column__item img {
margin: 0 auto;
}