Shopify Theme Customizations

Shopify Theme Customizations + internal changes

About

Information portal about books on Shopify.

Goal

A live mobile site is one that will be interesting. So that the customer can add news, book reviews, etc.

The problem

Not catchy logo, broken urls, simple theme, design issues.

Tasks

I'll attach images after this section so you can see before and after.

1. Changed the appearance of the header menu;
2. Wishlist had places where it doesn't displayed very well. In the new theme I created a custom appearance of the wishlist icon;
3. Changed logo;
4. Changed default fonts;
5. Added a contact page;
6. Changed the link on the referral program on the homepage to open it on a new tab instead of an existing one;
7. Added a referral program page;
8. Made a favicon;
9. Fixed product cards. Added a truncate on product title;
10. Changed the default collection sort. Now it's going from newer to older;
11. Translated the whole website in English, Russian, and Ukrainian;
12. Added the possibility to check the shipping price on the cart page;
13. Fixed the mobile menu appearance;
14. Added FAQ;
15. Added one more menu to the footer, which were not in the theme. So I added some liquid code;
16. Changed background color of dropdown menu for nested elements;
17. Uninstalled the useless apps which increased the store speed;



Header Menu

Before

old header menu

After

new header menu

Wishlist

Before

default theme header

After

customized theme header

As you can see I added a wishlist icon before the search button.

Also, I added wishlist on mobile screens and it looks like this:



mobile menu

Logo

Before

old logo

After

new logo

Font

Default fonts was okay. But the shop is kids oriented so I had a research and found pretty nice font, it's called Compotes Apple.

The problem that the font is hard to read, you can see the image below. So we decided to use the font on header elements and graphics elements.



the homepage with Compotes Apple font

Contact Page

The contact page is pretty default. I can't show the old one because the store didn't have it.

contact form

Referral Page

The brand new page.

referral program page

Footer

Added one more menu to the footer.

site's footer

Take a look

website