The Featured Product section in Shopify is a great way to highlight a specific item on your homepage. However, some themes don’t display the product description by default, leaving only the title, price, and image. If you want to add the product description, you’ll need to make a small customization in the theme’s Liquid code.
1. Add A Custom Liquid Block To The Featured Product Section
In Shopify’s Theme Editor, locate the Featured Product Section and add a Custom Liquid Block where you want to shop the product description. A common placement would be just below the buy buttons.
Paste this code inside the Custom Liquid block you just created:
<style>
.product__description {
/* add styling here */
}
</style>
<div class="product__description rte quick-add-hidden" {{ block.shopify_attributes }}>
{{ section.settings.product.description }}
</div>2. Add Stylization To The Description
You can add style changes to the previous code so that the description will look exactly the way you want it. Some examples would be:
font-size: 0.9em;
color: #666;
margin-top: 3em !important;
line-height: 1.5;3. Adjust The Description Width In The Desktop View
By default, the images of the Featured Product section occupy the most part of the screen in the desktop view. To change the space distribution between images and text, add the following code to the Featured Product section’s Custom CSS option.
@media only screen and (min-width: 750px) {
.featured-product .grid__item.product__media-wrapper { /* images width */
max-width: 40%;
}
.featured-product .grid__item.product__info-wrapper { /* description width */
max-width: 60%;
}
.product__info-container {
max-width: 100%;
}
}Feel free to adjust the percentages until you are satisfied with the results.
Now, your Featured Product section will display the product description, making it more informative for visitors. With just a few lines of Liquid and CSS, you’ve improved your Shopify store’s user experience.
Need more help? Feel free to reach out!