Create shadow on multirow section images

Store Design
,

Topic summary

A user seeks CSS code to add shadows to multi-row section images in Shopify’s Origin theme.

Solutions Provided:

  • Two community members offered CSS snippets targeting .multi-row-section img and .multicolumn-list__item with box-shadow properties
  • One solution successfully added shadows to multi-column images but not multi-row images

Current Status:

  • The original poster confirmed the multi-column code works but still needs a solution specifically for multi-row sections
  • A helper requested the live store URL to inspect the multi-row section structure and provide accurate CSS targeting

Key Technical Detail:
The working code for multi-column uses .multicolumn-list__item selector; the multi-row equivalent requires different CSS class targeting that depends on the theme’s HTML structure.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Is someone able to provide some simple code to add shadow to multirow section images (Origin theme)?

Thank you!

1 Like
2

Hello, my name is Vikky.
To answer your question for some simple code to add shadow to multirow section images for origin theme

/* Add shadow to multi-row section images */
.multi-row-section img {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease;
}

.multi-row-section img:hover {
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

That is the code you need to add beneath the theme.liquid file. Do you know where to add it?

3

@alongsideyou hey, thanks for posting here.
Put this CSS in your theme.css file or add it in the custom CSS box of multi column section.

.multicolumn-list__item {
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

ProtoMan44_0-1746189074006.png
ProtoMan44_0-1746189074006.png782×536 22.2 KB

4

Hi @alongsideyou

Would you mind share your store URL? Thanks!

5

Hey @ProtoMan44 , thank you! This worked perfectly for my multi column images. I need it for my multi row images too. Do you know what code would work for that?

6

Hey @vikkytee , thanks I added this code to my base.css file and theme.liquid file, but neither worked! The below code worked for my multi column images, but I need something for my multi row images! If you have any more ideas I’d really appreciate it!

.multicolumn-list__item { box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); }

7

@alongsideyou can you please share live store link to check MultiRow section COZ for now I’m not using Origin theme .