dividing lines thicker

Deutsch Diskussion Shopify Design

Topic summary

Main issue: Increase the thickness of divider lines on a Shopify homepage (Design > CSS).

Proposed approach: Edit the theme’s CSS via Online Store > Themes > Actions > Edit Code. In Assets, open the main CSS file (examples mentioned: theme.scss.liquid or style.css.liquid). Identify the divider’s CSS class (e.g., .divider) using the browser’s Developer Tools, then increase thickness by setting a heavier border (e.g., border-top: 3px solid #000000).

Key terms: CSS (styles that control look/formatting), class (a selector used to target specific elements for styling).

Code example provided: A simple CSS rule setting border-top or border-bottom on .divider to a thicker, solid line with a specified color.

Latest update: The requester could not find the usual CSS files; only an asset named theme-editor is visible and no clear “divider” reference exists. They asked for alternate methods and shared their store URL for context.

Status: Unresolved. Next step needed: guidance on where to edit styles when only a “theme-editor” asset appears, or alternate ways to target the divider via the browser inspector and apply custom CSS.

Summarized with AI on January 24. AI used: gpt-5.
2

Hey @corneliorrr

it is indeed possible to change the thickness of divider lines on your Shopify homepage. However, keep in mind that Shopify’s themes may vary, so the exact class name for the divider line in your theme might differ (you can find it using the Chrome Dev Console with a right-click directly on the divider lines).

Here’s a general way to increase the thickness of a divider line using CSS:

  1. Navigate to “Online Store” > “Themes” → “Actions” > “Edit Code”.
  2. On the Edit HTML/CSS page, under the “Assets” directory, find your theme’s CSS file and click on it to open the file in the online code editor. This file might be named something like theme.scss.liquid or style.css.liquid.
  3. Find the CSS class that applies to your divider. This might take some digging. A common class name for dividers could be .divider or something similar.

Once you’ve found the CSS class, you can adjust the thickness of the divider line by changing the border property. If you don’t find any specific class for the divider, you can add a new one and apply it to your dividers.

Let’s say the divider is a horizontal line and the class name is .divider, you could increase its thickness by setting the border-top or border-bottom property, like so:

.divider {
  border-top: 3px solid #000000; /* replace #000000 with the color of your choice */
}

OR:

.divider {
  border-bottom: 3px solid #000000; /* replace #000000 with the color of your choice */
}

Remember to replace .divider and #000000 with your specific class name and color, respectively. If you’re unsure of the class name, as I mentioned above, you might need to inspect the page’s elements with the Chrome Developer Console.

Let me know if you have any further questions on that!

1 Like