Zulily OffSite Payment Icon

[norigbo-zu]

Why are you adding this icons?

I'm adding/updating this icon because Zulily is adding a new offsite payment method.

Help us identify yourself

• I'm working/collaborating with the brand directly and they have provided the icons.
• [ x] I'm associated with the brand and I've read all the brand icon’s guidelines.
• I'm an individual and I've read all the brand icon’s guidelines.

Link to the brand guidelines:

Checklist to add new icons

• [ x] All icons have a corresponding entry in db/payment_icons.yml
• [ x] I have followed the icon guidelines detailed in the CONTRIBUTING.md file
• [ x] I have optimized the icon with SVGO
• [x ] I am confident that all icons are clear and easy to read/understand
• [ x] I have provided a link to the brand icon’s brand guidelines whenever possible.
• [x ] I have attached a screenshot comparison with the example icon provided in guidelines
• [ x] I recognize that if my icon is not approved by the Shopify Partners team it may not receive review nor merger.

Attach a screenshot of the icon along side the example Visa icon

<!-- Change background color if needed to showcase your icon better -->
<style> body { background: black; } </style>

<!-- DO NOT DELETE EXAMPLE -->
<svg viewBox="0 0 38 24" xmlns="http://www.w3.org/2000/svg" role="img" width="38" height="24" aria-labelledby="pi-visa"><title id="pi-visa">Visa</title><path opacity=".07" d="M35 0H3C1.3 0 0 1.3 0 3v18c0 1.7 1.4 3 3 3h32c1.7 0 3-1.3 3-3V3c0-1.7-1.4-3-3-3z"/><path fill="#fff" d="M35 1c1.1 0 2 .9 2 2v18c0 1.1-.9 2-2 2H3c-1.1 0-2-.9-2-2V3c0-1.1.9-2 2-2h32"/><path d="M28.3 10.1H28c-.4 1-.7 1.5-1 3h1.9c-.3-1.5-.3-2.2-.6-3zm2.9 5.9h-1.7c-.1 0-.1 0-.2-.1l-.2-.9-.1-.2h-2.4c-.1 0-.2 0-.2.2l-.3.9c0 .1-.1.1-.1.1h-2.1l.2-.5L27 8.7c0-.5.3-.7.8-.7h1.5c.1 0 .2 0 .2.2l1.4 6.5c.1.4.2.7.2 1.1.1.1.1.1.1.2zm-13.4-.3l.4-1.8c.1 0 .2.1.2.1.7.3 1.4.5 2.1.4.2 0 .5-.1.7-.2.5-.2.5-.7.1-1.1-.2-.2-.5-.3-.8-.5-.4-.2-.8-.4-1.1-.7-1.2-1-.8-2.4-.1-3.1.6-.4.9-.8 1.7-.8 1.2 0 2.5 0 3.1.2h.1c-.1.6-.2 1.1-.4 1.7-.5-.2-1-.4-1.5-.4-.3 0-.6 0-.9.1-.2 0-.3.1-.4.2-.2.2-.2.5 0 .7l.5.4c.4.2.8.4 1.1.6.5.3 1 .8 1.1 1.4.2.9-.1 1.7-.9 2.3-.5.4-.7.6-1.4.6-1.4 0-2.5.1-3.4-.2-.1.2-.1.2-.2.1zm-3.5.3c.1-.7.1-.7.2-1 .5-2.2 1-4.5 1.4-6.7.1-.2.1-.3.3-.3H18c-.2 1.2-.4 2.1-.7 3.2-.3 1.5-.6 3-1 4.5 0 .2-.1.2-.3.2M5 8.2c0-.1.2-.2.3-.2h3.4c.5 0 .9.3 1 .8l.9 4.4c0 .1 0 .1.1.2 0-.1.1-.1.1-.1l2.1-5.1c-.1-.1 0-.2.1-.2h2.1c0 .1 0 .1-.1.2l-3.1 7.3c-.1.2-.1.3-.2.4-.1.1-.3 0-.5 0H9.7c-.1 0-.2 0-.2-.2L7.9 9.5c-.2-.2-.5-.5-.9-.6-.6-.3-1.7-.5-1.9-.5L5 8.2z" fill="#142688"/></svg>

<!-- TODO: insert your icon here -->
<!-- When I add svg code for my icon here, it exceeds Github's maximum number of characters for a Github PR, hence PR creation fails. Please see svg code in added file.

If the icons are intended for use by Shopify, please provide the following info:

Who are you working with at Shopify? Shopify Professional Services

What's the expected date of this change to deploy on Shopify? We hope that it can be deployed as soon as possible.

[Jacquesattaque]

A couple things need to change here. The name field cannot have special characters, so please remove the underscores. In the icon itself, it requires a 1px pixel border, #000 at 7% opacity. You'll want to check the core icon too, it's very slightly too large in the frame. Please run the icon through SVGO; it's far too large now.

[norigbo-zu]

@Jacquesattaque I have removed the underscores from the icon name. Can you show me where in the svg code I need to specify the 1px pixel border, #000 at 7% opacity? I don't see any mention of a border in your guidelines.

As for the image size, I have already optimized with SVGO, it cannot get any smaller. Thanks.

[Jacquesattaque]

@norigbo-zu If you use the template at the bottom of our guidelines, you'll get the 1px border. If you're not able to get a reduction in size via SVGO, you'll have to simplify the complex paths in the background. 148kb is far too large for a payment icon. Most are around 1-4kb.

[norigbo-zu]

@norigbo-zu If you use the template at the bottom of our guidelines, you'll get the 1px border. If you're not able to get a reduction in size via SVGO, you'll have to simplify the complex paths in the background. 148kb is far too large for a payment icon. Most are around 1-4kb.

@Jacquesattaque updated. Thanks!

[Jacquesattaque]

@norigbo-zu So the YML change looks good but appears the SVG has gone missing from the PR. Can you upload and I'll review right away!

[norigbo-zu]

@norigbo-zu So the YML change looks good but appears the SVG has gone missing from the PR. Can you upload and I'll review right away!

Done. Thanks!

[adeniyiao]

Hi @norigbo-zu , please see the test failures related to title and viewbox to be corrected

Thanks

[norigbo-zu]

Hi @norigbo-zu , please see the test failures related to title and viewbox to be corrected

Thanks

Updated, thanks!