Table of Contents
Project Overview
Token Studio Inc. is a designer toys retailer selling a varierty of collectable figurines, blind boxes and toys.
I teamed up with a graphic designer to completely redesign and revitalize their existing website that used Shopify's "Expanse" theme. The goal was to rebrand their store, and it was my job to display it beyond the average capabilities of their theme.
Tools Used:
Research
The first thing we did was look at our competitors, and made a list of what they do better. We set our sights on matching the general aesthetics and design of our competitors.. The examples we used were from Popmart and Finding Unicorn.
We also recognized that Token Studio needed better branding, and in order to do that we needed to tackle the layout of the website to make it much more appealing.
Wireframe
Development
While my tasks often overlapped with the graphic designer, I knew there were sections that only the developer could handle.
My main tasks for the project were:
- Adding custom content.
- Editing the design of Expanse's layouts.
- Implementing custom functions.
Custom Code
Most of it involved editing or adding things that weren't built into the default of the Shopify theme.
Like adding Wechat to their footer, and linking it directly to their account.
{%- if settings.social_wechat_link != blank -%}
<li>
<a target="_blank" rel="noopener" href="{{ settings.social_wechat_link }}"
title="{{ 'layout.footer.social_platform' | t: name: shop.name, platform: 'WeChat' }}">
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-wechat"
viewBox="0 0 1024 1024"><path d="" fill="white"/></svg>
<span class="icon__fallback-text">WeChat</span>
</a>
</li>
{%- endif -%}
Or a function that shows how many are left in stock.
{%- when 'inventory_status' -%}
{%- render 'product-inventory', product:
product, current_variant: current_variant, block: block -%}
which leads to the "product-inventory.liquid" page that uses the code:
<span class="icon-and-text{% if inventory_visible == true %} inventory--low{% endif %}
{% unless current_variant.available %} hide{% endunless %}">
<span data-product-inventory data-threshold="{{ block.settings.inventory_threshold }}">
{%- if inventory_visible -%}
{{ 'products.product.stock_label' | t: count: current_variant.inventory_quantity }}
</span>
</span>
The majority of code editing required was for basic functions here and there, and the other bulk of the work was CSS. Like customizing the blog section to make it fit our design.
.custom-blog-posts {
overflow: hidden;
margin-top: 2rem;
margin-bottom: 4rem;
}
.custom-blog-posts .h3 {
font-size: 1rem;
font-weight: 600;
color: #757FD8;
}
.custom-blog-posts .btn--secondary {
border: none;
padding: 0;
text-align: left;
font-weight: 600;
text-decoration: underline;
transition: color 0.3s ease-in-out;
}
.custom-blog-posts .btn--secondary:hover {
color: grey;
}
.custom-blog-posts .rte-setting>p:last-child {
max-width: 400px;
margin: 0 auto;
}
Resources
Coming Soon...
Optimization
Coming Soon...
SEO
Coming Soon...
