change size of image on multicolumn

Store Design
, ,
1

I would like to change the size of my pictures on my multicolumn section so that they are smaller

Screenshot 2024-11-05 at 21.53.23.png
Screenshot 2024-11-05 at 21.53.23.png728Ă—546 64.1 KB

1 Like
2

Hi @ads18922

Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.multicolumn-list .multicolumn-card__image-wrapper--third-width {
    width: 20%;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

Hi @ads18922 ,
Thank you for your question.

To adjust the size of images in the multicolumn section on Shopify, you should add some custom CSS to your theme. Here’s the steps that you can try:

  1. Go to your theme editor:

    • In your Shopify admin, go to Online Store > Themes.
    • Next to your current theme, click Actions > Edit Code.

  2. Add Custom CSS:

    • Look for a file named theme.css, styles.css, or similar under Assets.

    • Open that file and add the following CSS at the end of the file to specifically target the multicolumn images:
      .multicolumn .multicolumn-image {
      max-width: 80px; /* Adjust this value as needed /
      max-height: 80px; /       Adjust this value as needed */
      }
      The 80px can be changed to whatever size you’d like. You might experiment with different values to get the perfect size for your design.

  3. Save and Preview:

    • Save the changes and go back to your store to refresh the page. Check if the images in your multicolumn section are now smaller.

  4. Additional Tips:

    • If this CSS doesn’t apply immediately, inspect the element in your browser’s developer tools to check for the specific class name used in your theme. Some themes may have slightly different class names for multicolumn images.
    • If your theme has an option for custom CSS directly in the theme settings (in Customize under Theme settings > Custom CSS), you can also paste this code there without going into the code editor.

I hope my answer is helpful!

Best,
Liz.