How to add borders in between columns for text column with images?

Store Design

Topic summary

A user working with Shopify’s Startup theme wanted to add vertical dividers between columns in a text-with-images section. They provided before/after mockup images showing the desired border placement.

Solution provided:

  • Navigate to Store Online → Theme → Edit Code
  • Open Assets/theme.css
  • Add custom CSS targeting .module-inline-item elements
  • The code applies left and right borders to column items, with exceptions to remove borders from first, last, and specific child elements
  • Border color is customizable (example used red)

Status: Resolved. The original poster confirmed the CSS solution worked perfectly.

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

Hi,

I’m currently piloting the Startup theme, and am trying to figure out if its possible to add custom css to the section to create some dividers between column 1 &2 and column 2& 3.

My first screenshot is the original, and the second is what I was envisioning

Capture-2025-03-02-115219.png
Capture-2025-03-02-115219.png1889×1076 311 KB

Screen Shot 2025-03-02 at 11.53.46 AM.png
Screen Shot 2025-03-02 at 11.53.46 AM.png1088×820 401 KB

.

Thank you!

2

Hi @smithexotic ,

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code

EBOOST_1-1672356985580.png
EBOOST_1-1672356985580.png532×438 15.6 KB

  1. Assets/theme.css
  2. Add code below to end of file → You can replace red color with your color.
.module-inner.module-inline-items .module-inline-item {
	border-left: 2px solid red;
	border-right: 2px solid red;
}
.module-inner.module-inline-items .module-inline-item:last-child,
.module-inner.module-inline-items .section-title + .module-inline-item:nth-child(2),
.module-inner.module-inline-items .module-inline-item:first-child {
	border: none;
}
1 Like
3

thank you so much, this was perfect!