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

ed_bb · ‎03-31-2024

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 :

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

Store is : baileybespoke.co.uk

Thanks.

ThePrimeWeb · ‎04-01-2024

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
Check out our interview with Shopify!

View solution in original post

ThePrimeWeb · ‎03-31-2024

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.

Was I helpful?

☕Buy me a coffee☕

❤ 🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

ed_bb · ‎04-01-2024

@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 · ‎04-01-2024

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
Check out our interview with Shopify!

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