How to show a divider/separator line on product pages?

[micahgerges]

Hello, I’m looking to display a divider line on my product pages as shown in the following image.

I would like to display the line in between the price and the color selector as shown, making sure it is correctly shown on both mobile and deesktop. How do I do this? Dawn does not give an option like this for product pages.

URL: impetusathletics.com

[irene-vintage]

Hello @micahgerges ,

You can try to follow these steps:

• Go to Online Store → Themes → Actions → Edit code
• Go to Sections → product.liquid file or something name similar to this
• Find the section of the code where the price and the product color selection are displayed.
• Add the following HTML code to create the dividing line:

---

• Go back to Assets folder → base.css file → add this following code at the bottom

.product-divider {
  margin: 20px 0;
  border: none;
  border-top: 1px solid #000000; /* Replace with your desired color */
}

• Save and preview

Hope this can help. Let us know if you need any further support.

Ali Reviews team.

[PMike]

To add a divider line between the price and the color selector on your product pages in the Dawn theme, you’ll need to make some modifications to your theme code. Here’s a step-by-step guide on how to achieve this:

1. From your Shopify admin, go to “Online Store” and select “Themes.”
2. Locate your current Dawn theme and click on “Actions” > “Edit code.”
3. In the left-hand sidebar, under “Sections,” open the “product-template.liquid” file.
4. Scroll down to find the section that corresponds to the product options. It is typically labeled as {% section 'product-template-options' %}.
5. Within that section, locate the HTML code responsible for rendering the price and the color selector. It might look similar to the following:

<div class="product-form__item">
<label for="Color">{{ 'products.product.color' | t }}</label>
<select name="Color" id="Color">
<!-- Options for color selector -->
</select>
</div>

6. Add the following code just above the color selector code to create a divider line:

<hr class="product-divider">

7. Save the changes to the file.
8. To style the divider line, go to “Assets” and open the “theme.scss.liquid” file.
9. Add the following CSS code at the bottom of the file:

.product-divider {
margin: 20px 0;
border: none;
border-top: 1px solid #000; /* Adjust the color and styling as desired */
}

10. Save the changes to the file.
11. Preview your store to see the divider line added between the price and color selector on the product pages.
12. If you’re satisfied with the changes, click on “Actions” > “Publish” to make the modifications live on your store.

Please note that modifying your theme code requires basic knowledge of HTML, CSS, and liquid syntax. Make sure to backup your theme before making any changes and test the modifications thoroughly to ensure they work as expected on both mobile and desktop devices.

[Ujjaval]

@micahgerges just add

---

tag into main-product.liquid file underneath code of the price