Build shopify theme app extension
In this post, I will show you how to create a Shopify theme app extension that enables interactive SVG areas on your store’s pages. Each area will respond to a mouse hover, displaying text that can be easily configured through Shopify settings. This is a great way to add dynamic, personalized elements to your store that will enhance the user experience.
Prepare basic functionallity
I create functionallity utilizing basic html, css and apline.js I want to have some elements. When I hover over the element, I want the id of the element to be displayed in other div.
First - define basic layout with svg area on top, and interactive description area on bottom.
<html>
<head>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<style>
#container {
display: grid;
grid-template-rows: 500px 200px;
}
#map{
grid-row: 1;
overflow: hidden;
}
#description{
grid-row: 2;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<div id="map">
</div>
<div id="description" >
<span id="description-text"></span>
</div>
</div>
</body>
</html>
Then, I’ll paste svg map found here - https://upload.wikimedia.org/wikipedia/commons/1/1a/Blank_US_Map_%28states_only%29.svg, (creative commons licence).
I only need to add id for every path, and add:
height: 100% to keep height of parent,
width="auto", to keep proportion
and viewBox="0 0 959 593" , to define coordinate system of our svg.
preserveAspectRatio=“xMidYMid meet” will keeps proportions and center
And I’ll add some styling
<style>
#map path {
fill: #5478ad;
stroke: 1px #fff;
}
#map path:hover {
fill: #b4bedf;
cursor: pointer;
}
</style>
When we have basic layout in place, I want to be able do display id of the element my mouse cursor is hovering
For this to work, I want to add x-data alpine.js directive, to define alpine.js container (b) Then, I have to define function: logId, that will assign id of element, my mouse coursor is hovering to ‘description’ variable (c). Then, I have to call this event, so I’ll add @mouseover event to #map div (d). Then, I want to display value of description variable, so I’ll add x-text directive on #desription-text span element (e)
<div id="container" x-data="{ description: '',
logId(event) {
this.description = event.target.id;
}
}">
<div id="map" @mouseover="logId($event)">
<svg>...</svg>
</div>
<div id="description" >
<span id="description-text" x-text="description"></span>
</div>
</div>
Using nice fade effect
There is one thing I would like to enhance. I would like description to have nice fade-in/fade-out effect. So lets chang our code, and add some effects.
First, I’ll introduce x-ref=“desc” directive (g), to be able to refere to description div. I want old description to fade out, so I’ll add opacity and transition elements to description style (h)
Then, I’ll set opacity of description element to 0 in function add opacity:0 to description element, so transition css effet will run. But the effect run for 250 miliseconds, so I have to set timeout to changing description variable to new value, and setting opacity back to 1. When opacity is back to 1 with new value, transition effect will run one more time, this time fading-in our new description value.
<style>
#description{
opacity: 0;
transition: opacity 0.25s ease-in-out
}
</style>
<div id="container" x-data="{ description: '',
logId(event) {
this.$refs.desc.style.opacity = 0;
setTimeout(() => {
this.description = event.target.id;
this.$refs.desc.style.opacity = 1;
}, 250)
}
}">
<div id="map" @mouseover="logId($event)">
<svg>...</svg>
</div>
<div id="description" x-ref="desc">
<span id="description-text" x-text="description"></span>
</div>
</div>
Display html, instead of text in description
Now, instead of text, I want to be able to display html, and I want this html to be different for every state, so I’ll define javascript map, where id of state will be key, and every element will have its own value:
var mapping = {
"alabama": "Alabama",
"alaska": "Alaska",
"arizona": "Arizona",
"arkansas": "Arkansas",
"california": "California",
"colorado": "Colorado",
"connecticut":"Connecticut",
"delaware":"Delaware",
"florida":"Florida :)",
"georgia":"Georgia",
"hawaii":"Hawaii",
"idaho":"Idaho",
"illinois":"Illinois",
"indiana":"Indiana",
"iowa":"Iowa",
"kansas":"Kansas",
"kentucky":"Kentucky",
"louisiana":"Louisiana",
"maine":"Maine",
"maryland":"Maryland",
"massachusetts":"Massachusetts",
"michigan":"Michigan",
"minnesota":"Minnesota",
"mississippi":"Mississippi",
"missouri":"Missouri",
"montana":"Montana",
"nebraska":"Nebraska",
"nevada":"Nevada",
"new_hampshire":"New Hampshire",
"new_jersey":"New Jersey",
"new_mexico":"New Mexico",
"new_york":"New York",
"north_carolina":"North Carolina",
"north_dakota":"North Dakota",
"ohio":"Ohio",
"oklahoma":"Oklahoma",
"oregon":"Oregon",
"pennsylvania":"Pennsylvania",
"rhode_island":"Rhode Island",
"south_carolina":"South Carolina",
"south_dakota":"South Dakota",
"tennessee":"Tennessee",
"texas":"Texas",
"utah":"Utah",
"vermont":"Vermont",
"virginia":"Virginia",
"washington":"Washington",
"west_virginia":"West Virginia",
"wisconsin":"Wisconsin",
"wyoming":"Wyoming",
"dc":"Dc",
}
And instead of setting id of the element, I’ll use id as key, to get html value from map.:
this.description = mapping[event.target.id];
In case value in the map is undefined, I’ll use empty string
this.description = mapping[event.target.id] || '';
Shopify application - theme app extension
Now lets create shopify app, using shopify CLI. Installation steps are described here: https://shopify.dev/docs/api/shopify-cli
shopify app init
Will initialize project. We have to choose project name, framework and language. Basic file structure will be createn
Then, we have to run
cd technicarium-usmap
shopify app generate extension
This command will create shopify theme app extension. We have to choose organization, choose if we want to create this as new app, or connect to existing map, set application name. and choose type of extension. We need ‘Theme app extension’, and set extension name.
Than we can preview generated code with
shopify app dev
command.
Ok, now we can add our functionality. We need to create new block (or edit existing one), call it ‘usmap.liquid’
In new block, we can create settings section:
{% schema %}
{
"name": "Usmap",
"target": "section",
"settings": [
{ "type": "product", "id": "product", "label": "product", "autofill": true },
]
}
{% endschema %}
and copy our functionality. We will need css, scripts and html parts. Whole svg part, I’ll put inside ‘snippets’ folder as ‘usmapsvg.liquid’, and refer to this shippet through:
{% render 'usmapsvg' %}
Extension customization
Now we can enable our exetension to be customized. We can for example enable color customization. So, we can add settings:
{ "type": "color", "id": "map_color", "label": "Map Colour", "default": "#30888f" },
{ "type": "color", "id": "map_hover_color", "label": "Map Hover Colour", "default": "#b0eff3" },
{ "type": "color", "id": "map_stroke_color", "label": "Map Stroke Colour", "default":"#ffffff" },
and refer to those settings in css, using liquid code:
#map path{
fill: {{ block.settings.map_color }};
stroke: 1px {{ block.settings.map_stroke_color }};
}
#map path:hover{
fill: {{ block.settings.map_hover_color }};
}
Now we should be able to customize colours of our map.
State description customization
I would like to be able to customize description of every state. Unfortunately, I connot do it in settings section, because it allows only to have 25 setting for one block.
So I came up with different solution. I’ve defined metaobject definition - called it ‘state’, with ‘statename’ and ‘statedescription’ fields. Now, I can add entries, where ‘statename’ will correspond to our path id, and ‘statedescription’ will be our displayed html.
Now, I can refer to metaobject entries through:
shop.metaobjects.state.values
So I can create mapping with for loop:
var mapping = {
{% for state in shop.metaobjects.state.values %}
'{{ state.statename }}' : '{{ state.statedescription | metafield_tag }}'
{% unless forloop.last %},{% endunless %}
{% endfor %}
}
I need this ‘metafield_tag’ filter, bacause ‘rich text’ field has form o json object, and ‘metafield_tag’ will transform it to html.