Related Product overlaps and Featured Collection

[BryanYF]

Hi All,

I am having some issues with Dawn Theme in particular the Featured Collections and Related Products section on my store.

1. Featured Collections - I couldn't customise the products shown on the Featured Collections section even after I've set a specific Collection to it. It will show 4-5 products from my list of ALL products (alphabetically)

2. Related Products - I've added a section of Related Products onto my product page to show the other related products from the same collection. However, I've notice the format do not align as the Title of the Product overlap with the Product Pricing (refer to screenshot)

Hoping that someone can help me with this issues. Unsure if there's a way to customise this or it's related to coding.

Thank you for your help

[topnewyork]

@BryanYF 

Hi , kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

[BryanYF]

Hi @topnewyork, here's the URL link to my store in shopify (https://ascqtu-gg.myshopify.com/).

I am in the mist of setting it up hence no domain to it yet, and I do not believe i set any password to it.

[rajweb]

Hey @BryanYF ,

Thank you for reaching out regarding the issues in your Dawn theme! I understand how crucial it is to have a visually appealing and functional store. Let me address your concerns and provide a CSS-based solution.

1.  Featured Collections Issue:

While this issue is more related to Shopify’s collection settings than CSS, I recommend double-checking the collection assignment:

- Online Store > Themes > Customize

- Select the Featured Collections section and ensure you’ve assigned the correct collection.

- To display products in a specific order, go to Products > Collections, open the collection, and set the sorting to Manual.

If further customization is needed, feel free to let me know!

2. Related Products Overlap Issue:

This issue can be resolved with the following CSS tweaks. Add this to your theme's CSS file:

/* Ensure proper spacing and alignment in the Related Products section */
.card__information {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%; /* Align title and pricing within the card */
}

.card__heading {
    margin-bottom: 0.5rem; /* Add space below the title */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; /* Prevent long titles from wrapping */
}

.price {
    margin-top: 0.5rem; /* Add space above the price */
    font-size: 14px; /* Adjust font size for better visibility */
}

/* Mobile adjustments for smaller screens */
@media screen and (max-width: 768px) {
    .card__information {
        height: auto; /* Ensure flexibility for mobile */
    }

    .card__heading {
        font-size: 14px; /* Slightly smaller font for mobile */
    }

    .price {
        font-size: 12px; /* Reduce price font size for smaller screens */
    }
}

Implementation Steps:

- Go to Online Store > Themes > Edit Code.

- Open assets/theme.css or assets/base.css (whichever your theme uses).

- Scroll to the bottom of the file and paste the above CSS code.

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat

[BryanYF]

Thank you so much for the prompt response. However, the product title is not visible after I inserted the codes. Is there a way to make the product titles visible? Also, i realised all product titles are missing in the collection page

Product Title missing in Related Product section

Product Title missing in Collection Page

[rajweb]

Thank you for pointing that out! It seems the product title might have been unintentionally hidden due to a conflict in the CSS. Let’s fix that so the titles are properly visible on both the Related Products section and the Collection page.

Here's the updated solution:

/* Ensure product titles are visible */
.card__heading {
    font-size: 16px; /* Adjust to your desired size */
    font-weight: 600; /* Make the title bold for better visibility */
    color: #000; /* Set title color to black or your preferred color */
    overflow: hidden; /* Prevent text overflow issues */
    white-space: nowrap; /* Ensure single-line titles */
    text-overflow: ellipsis; /* Add ellipsis for long titles */
    display: block; /* Ensure the title displays properly */
}

/* Ensure product titles appear on collection pages */
.collection .card__heading {
    display: block; /* Force titles to display on collection pages */
    color: #000; /* Set a visible color for the text */
}

/* Add spacing between title and price */
.card__information {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card__heading {
    margin-bottom: 0.5rem; /* Space below the title */
}

/* Adjust for mobile view */
@media screen and (max-width: 768px) {
    .card__heading {
        font-size: 14px; /* Smaller size for mobile screens */
    }
}

Thank you for your patience. Please let me know if the updated CSS resolves the issue with the product titles. If anything still seems off or if you need further adjustments, feel free to reach out, and I'd be happy to take a closer look and refine the solution further for you. 😊

Additionally, please don't hesitate to contact me via email so I can assist you more effectively and ensure everything is working perfectly!

Looking forward to hearing from you!

[BryanYF · Accepted solution]

I really appreciate your help to provide solutions to the issue. However, i believe its back to square one where related product section - price & title overlaps with the latest codes. But good news is that it fix the product title on the collection page.