How to shorten featured product description on homepage and redirect add to cart button?

cruzkatrisse
New Member
3 0 0
  1. How do i shorten the description of the featured product displayed on the homepage? I tried this: https://community.shopify.com/c/Shopify-Design/unable-to-shorten-featured-product-description/td-p/5... - It actually worked. But my problem with this code is that when I click on the product under the catalog page the description is also shortened. I don't want the actual product page description to be affected, I just want the description shortened on the featured product description on the home page.

  2. On the featured product, there is a "Add To Cart" button that leads directly to the Cart then checkout. How can i redirect the "Add to Cart" button to lead to the product with the entire product description with a "Buy Now" button which will then lead to the cart instead?

Would really appreciate the help. I'm using the debut theme. Thank you.

0 Likes
Alan15
Explorer
76 12 16
 One way to display a shorter description is like this:
 In featured-product.liquid file in the sections folder. Search for where the description is displayed (around line 285)
 Change the code to include the extra bit below:
   
        <div class="product-single__description rte">
          {% unless product == empty %}  
                
                   {% if product.description contains "<!--BREAK-->"%}
                  {{ product.description | split: "<!--BREAK-->" | first }}
             {%else%}
                     {{ product.description }}
             {%endif%}    
               
          {% else %}
            {{ 'homepage.onboarding.product_description' | t }}
          {% endunless %}
        </div>
        
Then go to where you set your product description in the dashboard. 
Switch to show the html view (there's a small button with <> on the top right of the description area)
Add <!--BREAK--> ( it needs to match exactly as it's in the code above) where you want the shorter description to end. Save the changes. The code above will search for the <!--BREAK--> comment and split the text there.
Another way would be to add a metafield. Create a "short description" metafield and display that on the featured-product.liquid file.
 
To redirect the button to the Product page, try adding an onClick event to the Add to cart button, again in the featured-product.template file.
 
Something like this (look for the button tag in the code):
 
  <button type="submit" name="add" onclick="window.location.href='/products/{{product.handle}}'"
                    {% unless current_variant.available %} aria-disabled="true"{% endunless %}
                    aria-label="{% unless current_variant.available %}{{ 'products.product.sold_out' | t }}{% else %}{{ 'products.product.add_to_cart' | t }}{% endunless %}"
                    class="btn product-form__cart-submit{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"
                    {% if settings.enable_ajax %}aria-haspopup="dialog"{% endif %}
                    data-add-to-cart>
0 Likes