Solved

Custom Bullet Points in Product Listings not showing on iPhone - Dawn 13.0.1 Theme

ed_bb
Excursionist
36 1 2

Hi,

 

I'm using Dawn theme, version 13.0.1. I have customised to have custom bullet points in my product listings. These work fine when testing in Chrome on Windows Laptop however when testing using Apple iPhone and Safari browser they do not.

 

The code snippet is : 

 

<ul style="text-align: justify;" class="custom__bullet">

 

Any ideas why this is or how to fix, please?

 

Store is : baileybespoke.co.uk

 

Thanks.

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
1734 482 355

This is an accepted solution.

Hey @ed_bb,

 

 

Replace the code with this

 

<style>
.product__description ul li:before,
.section-template--14860766052484__main-padding ul li:before,
.custom__bullet ul li:before {
    content: '';
    display: inline-block;
    height: 14px;
    width: 14px;
    background-image: url(https://cdn.shopify.com/s/files/1/0776/0173/4999/files/custom-bullet.png?v=1697984233);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 1rem
}

.product__description ul, .section-template--14860766052484__main-padding ul, .custom__bullet {
    list-style-type: none;
    padding-left: 0 !important;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 3 (3)

ThePrimeWeb
Shopify Partner
1734 482 355

Hey @ed_bb,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
.product__description ul li:before,
.section-template--14860766052484__main-padding ul li:before,
.custom__bullet ul li:before {
    content: '';
    display: inline-block;
    height: 14px;
    width: 14px;
    background-image: url(https://cdn.shopify.com/s/files/1/0776/0173/4999/files/custom-bullet.png?v=1697984233);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 1rem
}

.product__description ul, .section-template--14860766052484__main-padding ul, .custom__bullet {
    list-style-type: none;
    padding-left: 0;
}
</style>

 

Screenshot is for reference only, the correct code to paste is the one shown above.

ThePrimeWeb_0-1711893797949.jpeg

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
ed_bb
Excursionist
36 1 2

@ThePrimeWeb - Thank you very much for your solution offered.

 

I now get the custom bullet points in Safari on iPhone however on mobile it then spaces the bullet point slightly away from the left edge/side of the screen - is there a way to remove this so it lines up with everything else?

 

Thanks.

ThePrimeWeb
Shopify Partner
1734 482 355

This is an accepted solution.

Hey @ed_bb,

 

 

Replace the code with this

 

<style>
.product__description ul li:before,
.section-template--14860766052484__main-padding ul li:before,
.custom__bullet ul li:before {
    content: '';
    display: inline-block;
    height: 14px;
    width: 14px;
    background-image: url(https://cdn.shopify.com/s/files/1/0776/0173/4999/files/custom-bullet.png?v=1697984233);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 1rem
}

.product__description ul, .section-template--14860766052484__main-padding ul, .custom__bullet {
    list-style-type: none;
    padding-left: 0 !important;
}
</style>

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website