Shopify themes, liquid, logos, and UX
I am using the dawn theme and adding a section to the feature product page. Using <p> & <li> tags, results in a bullet list with random blank bullet lines. When using <ul> & <li> tags results in a nice list with no blank lines but also no bullets.
Any suggestions?
Solved! Go to the solution
This is an accepted solution.
Hi @Rob4836,
Seems like you are acquainted with HTML. You just have to add a list-style: circle. See the link here.
To do it inline code, see the code below.
<p>
<ul>
<li style="list-style: circle">This is a list</li>
<li style="list-style: circle">This is a list</li>
<li style="list-style: circle">This is a list</li>
</ul>
</p>
This is an accepted solution.
Hi @Rob4836,
Seems like you are acquainted with HTML. You just have to add a list-style: circle. See the link here.
To do it inline code, see the code below.
<p>
<ul>
<li style="list-style: circle">This is a list</li>
<li style="list-style: circle">This is a list</li>
<li style="list-style: circle">This is a list</li>
</ul>
</p>
Thanks. Worked like a charm.
Do you know how to make hover work? I want to hover over a single word link in html for color change.
I've tried both: .here:hover {color:#000000;}
and
a:hover {color:#000000;}
with:
<li> look <a class="here" style="text-decoration:underline" href="#link">here</a> and see <li/>
Thanks
You can try this code below. Since, you are probably changing a code that is already present, try to use !important. If this helps. Please select as a solution
.here > a:hover {
color: #000 !important;
}
That did not work.
Hi @Rob4836,
It might be best to share your website so I can inspect
The site is shotbagballast.com and the password is oikoss.
To find the link, go to SHOP and then select the third product (50LB). You will find it in the text section with two columns. This section is named product-text.liquid. I set up a different section named blank.liquid and placed the receiving tag there. I then inserted this section using the customizer further down the same page as the sending anchor link. This seemed to work fine but now its not. Maybe you can tell me why or another approach to linking within the same page.
Hi @Rob4836,
Sorry for late reply. Here is the code. The color is already black so it will not change in hover.
#shopify-section-template--15983496757474__1652146410b750a009 > div.container > div.flex-item-right > ul > li:hover {
color: blue;
}
Hey Rob,
my app Bloom: Product Feature Bullets gives you full control over such bullet points.
You can get super creative and make use of a lot of functionality.
We have 5-star reviews only and take customer support to heart.
There is a completely free plan available!
Felix ✌️
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025