App to show which countries we ship to?

Shopify Partner
97 4 32

 

@linda_pierre please see the other comment.

 
Building custom, public-facing Shopify Apps for various niches. Ping me with your app ideas!

My Apps:
* Countries We Ship To Button (Free!) - Show your customers where you ship to with a crisp button + pop-up!


My Tutorials:
* Get Notified When New Comments Are Added To Your Shopify Blog (Free!) - A quick & easy tutorial to set up a free web-service that e-mails you when you get a new comment on your Shopify blog!
0 Likes
Shopify Partner
97 4 32

@linda_pierre  I've actually written a nice, long comment that was marked as spam and then bounced back. Cleared that one, and this one is now the updated one:

 

OK, just to persist my initial thoughts on how this can be accomplished:


Depending on the store's theme, one could create a "static" shipping tile, like this one that I made on my development store (this is the default "debut" theme that came with the store):image.pngMobile view of shipping tileimage.pngWeb view of shipping tile

 

 

Note that these are not the countries you actually listed, just 25 countries I grabbed for testing. There are a few problems with this approach:

1. You'd have to manually download your theme, insert the flag pictures into the assets folder of your theme, and upload it back up.
2. You'd have to acquire flag pictures, per each country, that are in the correct size and format to display correctly (and can be used under their license for a commercial store).
3. You'd have to manually edit the footer app of your code.

That's a lot of work for something that should be rather simple.


If you'd like to go ahead and do it, by all means. Here's the liquid code I used for the footer.liquid file in toyu:

 

{%- if block.settings.text != blank -%}
<div class="site-footer__rte
{% if section.blocks.size == 1 %} site-footer__single-block--centered{% endif %}">
</div>
<div id="flag-row" role="banner">
{{ 'AD@2x.png' | asset_url | img_tag: shop.name }}
{{ 'AG@2x.png' | asset_url | img_tag: shop.name }}
{{ 'AI@2x.png' | asset_url | img_tag: shop.name }}
{{ 'AL@2x.png' | asset_url | img_tag: shop.name }}
{{ 'AM@2x.png' | asset_url | img_tag: shop.name }}
</div>
<div id="flag-row" role="banner">
{{ 'AT@2x.png' | asset_url | img_tag: shop.name }}
{{ 'AW@2x.png' | asset_url | img_tag: shop.name }}
{{ 'AZ@2x.png' | asset_url | img_tag: shop.name }}
{{ 'BA@2x.png' | asset_url | img_tag: shop.name }}
{{ 'BB@2x.png' | asset_url | img_tag: shop.name }}
</div>
<div id="flag-row" role="banner">
{{ 'BE@2x.png' | asset_url | img_tag: shop.name }}
{{ 'BG@2x.png' | asset_url | img_tag: shop.name }}
{{ 'BN@2x.png' | asset_url | img_tag: shop.name }}
{{ 'BQ@2x.png' | asset_url | img_tag: shop.name }}
{{ 'BS@2x.png' | asset_url | img_tag: shop.name }}
</div>
<div id="flag-row" role="banner">
{{ 'BY@2x.png' | asset_url | img_tag: shop.name }}
{{ 'BZ@2x.png' | asset_url | img_tag: shop.name }}
{{ 'CA@2x.png' | asset_url | img_tag: shop.name }}
{{ 'CH@2x.png' | asset_url | img_tag: shop.name }}
{{ 'CR@2x.png' | asset_url | img_tag: shop.name }}
</div>
{%- endif -%}

It's not very complicated, just not really a nice solution. But, since this could actually be quite a cool little project, I can build an app that will create this tile for you dynamically (i.e. will grab whatever countries you are shipping to from your store settings, and then create this liquid code for you so you can insert it wherever you want to on your page.

 

Let me think about how to make this happen and ping back here once I've got something to show.

Building custom, public-facing Shopify Apps for various niches. Ping me with your app ideas!

My Apps:
* Countries We Ship To Button (Free!) - Show your customers where you ship to with a crisp button + pop-up!


My Tutorials:
* Get Notified When New Comments Are Added To Your Shopify Blog (Free!) - A quick & easy tutorial to set up a free web-service that e-mails you when you get a new comment on your Shopify blog!
2 Likes
Tourist
9 0 5

@KidOnPoint very nice of you, this is a solid solution.

Adam Tzagournis
Sound Onyx Inc
https://apps.shopify.com/partners/sound-onyx-inc
1 Like
Shopify Partner
97 4 32

Working on it... :)image.png

 

Building custom, public-facing Shopify Apps for various niches. Ping me with your app ideas!

My Apps:
* Countries We Ship To Button (Free!) - Show your customers where you ship to with a crisp button + pop-up!


My Tutorials:
* Get Notified When New Comments Are Added To Your Shopify Blog (Free!) - A quick & easy tutorial to set up a free web-service that e-mails you when you get a new comment on your Shopify blog!
2 Likes
Highlighted
Excursionist
36 0 1

That is great! There are flags available for download here (https://www.flaticon.com/packs/international-flags-6) maybe these can be used in the app?

 

Would be so good if it were a dropdown so that it is more scaleable (if many flags) and also doesn't take up too much of the "visual space" in the footer. If the app could be "see" from which country you come from and show that flag automatically that would be super.  

1 Like
Tourist
9 0 5

Hm I think for the UI, an input field to search country names that autocompletes and whose result is clickable/gets added as a badge is probably the cleanest.

Adam Tzagournis
Sound Onyx Inc
https://apps.shopify.com/partners/sound-onyx-inc
0 Likes
Shopify Partner
97 4 32

You are both right @linda_pierre and @Adam_Sound_Onyx ! Some UI work is definitely needed there. I'd just like to get a demo up and running to validate the way I think the user flow should work, and I can do polishes later. 

 

@linda_pierre Thanks for the reference! I've got a list I need to choose from, but Flaticon is definitely a solid option.

Building custom, public-facing Shopify Apps for various niches. Ping me with your app ideas!

My Apps:
* Countries We Ship To Button (Free!) - Show your customers where you ship to with a crisp button + pop-up!


My Tutorials:
* Get Notified When New Comments Are Added To Your Shopify Blog (Free!) - A quick & easy tutorial to set up a free web-service that e-mails you when you get a new comment on your Shopify blog!
1 Like
New Member
3 0 0

I have been looking for that too, I was referred to a different one, doesn't necessarily show you which country to ship to but allows you to connect with influencers to increase sales and traffic in those countries, influnet global .found it very useful please keep us on the loop if you find any

0 Likes
Shopify Partner
97 4 32

Don't know what that influent post was all about, but back on topic: I'm trying to figure out a fast way of doing the flag uploading to the theme. I would like as little outside API calls as possible, and take use of Shopify's image CDN (read: faster load times). Once I have a working demo I'll post it here @linda_pierre, and I'd be interested in having you test-run it on your site. Will keep you guys posted!

Building custom, public-facing Shopify Apps for various niches. Ping me with your app ideas!

My Apps:
* Countries We Ship To Button (Free!) - Show your customers where you ship to with a crisp button + pop-up!


My Tutorials:
* Get Notified When New Comments Are Added To Your Shopify Blog (Free!) - A quick & easy tutorial to set up a free web-service that e-mails you when you get a new comment on your Shopify blog!
1 Like
Tourist
9 0 5
Not sure how you have it structured now, could potentially make use of
Shopify's script tags in their API to then serve up the script that then
calls the CDN file.
Adam Tzagournis
Sound Onyx Inc
https://apps.shopify.com/partners/sound-onyx-inc
1 Like