If you’ve worked with Shopify themes like the popular Sense theme, you may have noticed that bullet points in the Product Description page (PDP) don’t always look great out of the box. The text isn’t indented properly, which can affect readability and user experience.
🔧 Solution: I fixed this issue with a tweak to the base.css file. Code is shared below. Simply go to Online Store > Theme > Edit Code and add this snippet. I’ve tested it with the Sense theme, but it’s likely to work across all free themes produced by Shopify./* Custom - Fix the bullet list issue for the Description field and collapsible rows on the Shopify PDP page */
/* Chrome */
.product__description ul li,
.accordion__content ul li {
text-indent: -1.33em; /* Adjust as needed */
margin-left: 1.33em;
}
/* Safari */
_::-webkit-full-page-media,
_:future,
:root .product__description ul li,
:root .accordion__content ul li {
text-indent: -1em; /* Adjust as needed */
margin-left: 1em;
}
/* Firefox */
@-moz-document url-prefix() {
.product__description ul li,
.accordion__content ul li {
text-indent: -1em; /* Adjust as needed */
margin-left: 1em;
}
}
🌐 See it Live: You can view the fix in action on the live site here: https://stemroll.com/products/molecule-maestro
This website, STEMRoll.com, built on the Sense theme, has over 35 code modifications! If you’re curious to see all the customizations I’ve made, feel free to reach out—I’d be happy to share screenshots of them all. 😊
Agile project management, e-commerce, web/app development, artificial intelligence, and random other topics