How to have one description at the top and a different one at the bottom?

Store Design
, , ,
1

1- How to have one description at the top and a different one at the bottom? (illustrated by the RED circles)

2- How to remove the product title that is in duplicate (illustrated by the ORANGE circle)

Page: CARTE-CADEAU COZYMOOD – Cozy Mood

cartefix
cartefix1622×943 147 KB

Thanks!

2

Hey @Patval

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
.title-breadcrumbs-container {
    opacity: 0 !important;
    padding: 0 !important;
}
</style>

RESULT:

image
image1902×918 109 KB

If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

@Patval

  1. As for the description, are you using 2 different descriptions for product? Because to achieve different descriptions top and bottom either will have to create new product template or customize exisiting one. Which theme you are using?
  2. As for the remove title. You can add the following code at the bottom of your css file.
.breadcrumb_title {
    display: none;
}

Hope this helps.

4

Hello @Patval

By default, Shopify only has one product description, so if you see it in two places, the theme is just outputting the same content twice.

To have two different texts, the cleanest solution is to use metafields:

  • Keep the main product description for the bottom section

  • Create a custom metafield

  1. Go to Settings → Custom data → Products

  2. Add a new metafield (type: multi-line text)

  3. Enter different content for each product

  4. In your product template, output that metafield at the top

{% if product.metafields.custom.top_description %}
  <div class="product-top-description">
    {{ product.metafields.custom.top_description }}
  </div>
{% endif %}

This way, the top text and bottom description are completely independent.

And to removing duplicate product title please use this code

.breadcrumb_title {
  display: none;
}

Regards

Titu

5

Hi @Patval ,
Different description at the top & bottom

  1. Shopify has only one product description field by default, so to show content:

Using Product metafields:

  • Create two product metafields, for example:
    • Top Description
    • Bottom Description
  • Then place:
    • Top description near the product title / price
    • Bottom description below the product details or reviews

This gives you full control and is the cleanest solution.

2. Remove duplicate product title

The product title is showing twice because:

  • Once from the Product template
  • Once inside the description or a section block

Fix:

  • Go to Online Store → Themes → Customize
  • Open the Product page
  • Either:
    • Remove/disable the extra Title block, OR
    • Remove the title markup from the product description / custom block
6

You can add a product description to any place on your product page by using this code.

{{ product.description }}

And please add this code to Custom CSS in theme settings to hide duplicate product title.

.template-product .breadcrumb_title { display: none !important; }

Custom CSS in Theme setings
Custom CSS in Theme setings1920×1738 260 KB

7

Hi,

Hope this will help

Showing one description at the top and a different one at the bottom

Here’s the approach that tends to work best:

Option 1 - Add a custom “Additional Info” section
Option 2 - Split the description using HTML (works if your theme supports it)

<p>This is the top description…</p>

<div id="extra-info" style="margin-top:40px;">
   <h3>More details</h3>
   <p>This will show lower on the page if you add a custom section that pulls it in.</p>
</div>

Then you place a Custom Liquid block at the bottom of your template

{{ product.description | split: '<div id="extra-info"' | last }}

Duplicate title issue:
In the product template, remove the extra Product Title block (or delete the second {{ product.title }} line in the theme code if it’s hardcoded).

8

Some of you have suggested removing the breadcrumb title but the problem is I need the breadcrumb title for all the other pages.. How to remove the breadcrumb title for this product page only? Thanks!

9

You are editing a product page template. It only removes it from the product pages that are assigned to the template. It doesn’t affect /pages or /blogs. Understand when you are editing something, it applies to the pages that are assigned to that template, and only those pages. So, If you wnnt something to apply only to a specific product, the answer should be simple enough: Create a template, assign the product to that template, and edit til the cows come home.

The real issue is that your theme seems to use it as a page title instead of an actual “breadcrumb”. You may want to go back and double check your theme settings. It may already have an eye button that hides or unhides the section. Easy.

10

@Patval

You can try the following code to hide the breadcrumb for product page only.

body.template-product .breadcrumb_title {
    display: none;
}

Hope this helps.