Shopify Store Design Q&A - Feedback To Your Store by Shopify Experts

Highlighted

Hi everyone,

 

We are Victor and @RichardNguyen , UX Designer and Developer from PageFly. 

 

If you are having difficulty building and optimizing your pages, please ask here. Richard and I will give our best answers based on our 10+ years of solving e-Commerce problems and 3 years of providing solutions for over 30.000 active Shopify merchants.

All the answers are free. We use your questions as insights to develop and optimize our PageFly app.

Topics:

Ask us any questions in the following topics:

  • Store Design (UX)
  • Store Design (Technical)
  • PageSpeed Optimization

About PageFly:

    • Top 1 Store Design Page Builder Category on Shopify App Store
    • Avg rating 4.9 with 2010 5-STAR reviews 

About me and Richard:

  • We’ve been actively reviewing stores for people on Shopify Community. You can find me in the  “Most Liked Author” list for the last month, with 67 likes and 18 solutions within 3 months.
  • Richard is the technical leader of the PageFly product team and is also an active member in the Technical Q&A topics.
  • Each week, our team handle more than 900 questions regarding store design problems, giving us more experience than ever about the problem Shopify merchants are facing. Many typical cases were selected to be reviewed within our Store Review series.

Just leave your questions and your store URL here, we will do our best to give you answers and comments here.

The first 30 questions will be guaranteed to be answered. We will try helping you with the next ones based on our availability.

So, feel free to get this free support even if you are yet to try PageFly yet.

Cheers,

Victor and Richard

- Tips to optimize website load speed: http://academy.pagefly.io/load-speed-optimization
- Are you building Shopify stores? Check out PageFly - An Advanced Page Builder trusted by non-techies and pro web designers.
1 Like
Highlighted
Excursionist
19 2 3

I’m new to Shopify. Can you give some feedback on my store about what to be improved? https://hanoi-bookworm-2.myshopify.com/ 

0 Likes
Highlighted
Shopify Partner
1498 93 331

Hey Hanoi-Bookworm-2,

"There is always a hope for improvement, no matter, how perfect we maybe"! The "store niche" is quite interesting to deal with. At the same time, some below mentioned modifications can make it look more close to perfect.

  1. The search landing page is disabled as it does not redirect to "/search" when the enter key is pressed while keeping the cursor on the search bar.
  2. "Product photography is like an ambassador sharing the promise of your products online".Hence, must be taken from diffrent angles to promote better product understanding.
  3. Adding a suitable "Favicon" will help strengthen your brand.
  4. Modify your "logo" with a change in font style and some graphics as well to be more professional.
  5. Desire your information to be more secure! "Login" account is an efficient solution and it helps in keeping a track of your order details as well.
  6. Want better customer engagement and a lot of sales as well! highlighting "free shipping and discount coupon offers" using a bold unique header template is the first thing to do.
  7. You should add terms and conditions and FAQ’s if any, again these also help in building search engine content.
  8. Effective"Branding" can be carried out once you start adding social links to the site footer like Facebook and Instagram, Twitter, Linked In and many more.
  9. Site legitimacy can be increased by adding "Trust Badges" near the site footer.
  10. You can also install one of the most popular app Growwave which is all in one marketing platform that helps store owners increase conversions with ease.
  11. Filters are very important for customers in order to identify the correct product from the huge catalog. So, you should look for advanced filter options for your store.
  12. Finally, I would also recommend replacing the default search with an advanced search like Sparq which allows synonyms, advanced custom tag filters, spelling correction, and other such features. Visitors with search are high intent users and their conversion rate is higher than normal users.
    Check out the features live here
    You can use Sparq free trial for as many products in your store. After the trial period, you can enjoy with Sparq’s Free Starter Plan for upto 1000* products.

I wish the fortune favors you in the times ahead.
Neha :)

 

Sparq is a fast and beautiful search solution for Shopify store owners. It allows store owners to upgrade their default search to an extremely fast, more user friendly and feature rich search
1 Like
Highlighted

Hi @KelvinTran_209 

I was impressed by your store, love the images, it makes me feel so calm and peaceful :) Great work!

Few things you can do make the design more consistent:

HOME PAGE:

- Featured images should have same size to create a tidy look

Hanoi Bookworm 2 2020-03-25 15-06-16.png

- I'd recommend you style your buttons with a bit more of color to make it prominent and appealing. The color can be the same with the text "New Arrivals"

- On Home page, Hanoi Bookworm and Our Event are headings, they should have the same style (text color, size and font). Same with the paragraphs under headings.Hanoi Bookworm 2 2020-03-25 15-10-50.png

- What do you offer if people subscribe to your newsletter?Hanoi Bookworm 2 2020-03-25 15-13-59.png

- As @neha-sparq has mentioned, you can add favicon to make a polished look to your store. The guide by Shopify is here

PRODUCT PAGE:

- Use bullet points or short paragraphs to enhance readibility:

The Unwanteds – Hanoi Bookworm 2 2020-03-25 15-15-40.png

COLLECTION PAGE

- The text is too small and there a lot of white spaces. I'd suggest grid layout.

Products – Hanoi Bookworm 2 2020-03-25 15-19-18.png

BLOGS: 

- Maybe it's just me but the font is really small https://hanoi-bookworm-2.myshopify.com/blogs/events/story-telling-for-toddlers

CONTACT US:

- The page is blank. I guess you are working on it :)

I hope those ideas can be useful. Let me know if you still have questions. Have a great day!

- Tips to optimize website load speed: http://academy.pagefly.io/load-speed-optimization
- Are you building Shopify stores? Check out PageFly - An Advanced Page Builder trusted by non-techies and pro web designers.
1 Like
Highlighted
New Member
1 0 0

Your expert opinion on my site, https://lcdtcorp.com/ will he highly appreciated.

I must say, I am not a coder, just a regular person working on my webpage, no coding experience at all.

I am currently using the free theme Supply.  I would like to improve the search results without the need for an external app.  I don´t know if this is actual possible, since I haven´t found a solution yet in the forum.

 

0 Likes
Highlighted
Excursionist
19 2 3

Thank you guys so much. Very appreciate on your comments. I'll optimize my page more with these suggestions 

0 Likes
Highlighted
Shopify Partner
1498 93 331

The Pleasure is mine! Happy to help you.

Sparq is a fast and beautiful search solution for Shopify store owners. It allows store owners to upgrade their default search to an extremely fast, more user friendly and feature rich search
0 Likes
Highlighted
Shopify Partner
1022 50 154

Hey @KelvinTran_209, Congratulations on coming up with a new Shopify store. Here is the feedback from my side:-

1. Add slider images in the first fold of the homepage with a call to action button on it. It can be 'shop now', 'click here'.

2. Add testimonials on the homepage. 

3. Make your store more interactive to grab visitors' attention and enhance their browsing experience. For that, you can add a customized newsletter sign up pop-up relevant to your product. You can give loyalty points to your customers on signing up for the newsletter. Also, you can give loyalty points to your customers on leaving a review, allowing for push notification, visiting a store. This helps in enticing customers and increase repeat purchases. You can add a loyalty reward program for this. It's very useful to increase conversions.

4. Add web push notification to retarget your visitors even when they are not on your store without getting their email addresses. This helps in increasing conversions you can send updates to your customers anytime and win back the losing customers. 

5. Add reviews, it helps in building trust with other visitors.

 

If you would like to implement this in your Shopify store you can install AiTrillion.com. It is 'All in One' Shopify app. I am sure you will find it useful.

Sachin D | Shopify Growth Expert @ AiTrillion

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- 10+ Years of eCommerce experience.
- 1400+ Stores Designed on Shopify.
- 13+ Shopify Apps launched on app store.
- All in One Marketing App on Shopify AiTrillion Marketing Automation
0 Likes
Highlighted
New Member
5 0 0

Dear Victor, I got your answer on my previous post here -> https://community.shopify.com/c/Shopify-Design/Contact-form-into-Accordion-on-Product-page/m-p/68427...

 

Thanks a lot for your answer!

Might you help me out with this?

I am trying to put a contact form into an accordion line on my product pages.

I am using the code below, but the problem is the contact form doesn't show up properly.

When i put same contact form code into the accordion, it hides some borders, doesn't show privacy policy check and send message button is not visible.. 

attached the two images about the working/non-working contact form

 

Thanks a lot guys - Ciao from Italy..

Schermata 2020-03-19 alle 18.06.10.pngSchermata 2020-03-19 alle 18.04.28.png

 

<!-- Begin Accordion Snippet -->
<style>
.so-tab {
position: relative;
width: 100%;
overflow: hidden;
margin: 25px 0;
}
.so-tab label {
position: relative;
display: block;
padding: 0 25px 0 0;
margin-bottom: 15px;
line-height: normal;
cursor: pointer;
}
.so-tab input {
position: absolute;
opacity: 0;
z-index: -1;
}
.so-tab-content {
max-height: 0;
overflow: hidden;
transition: max-height .35s;
}
/* :checked */
.so-tab input:checked ~ .so-tab-content {
max-height: none;
}
/* Icon */
.so-tab label::after {
position: absolute;
right: 0;
top: 0;
display: block;
-webkit-transition: all .35s;
-o-transition: all .35s;
transition: all .35s;
}
.so-tab input[type=checkbox] + label::after {
content: "+";
}
.so-tab input[type=radio] + label::after {
content: "\25BC";
}
.so-tab input[type=checkbox]:checked + label::after {
transform: rotate(315deg);
}
.so-tab input[type=radio]:checked + label::after {
transform: rotateX(180deg);
}
</style>


<div class="so-accordion-wrapper">
<div class="so-tab">
<input id="so-tab-1" type="checkbox" name="tabs" />
<label for="so-tab-1">Question Number 1 is here?</label>
<div class="so-tab-content">
{% capture contact_form %}
<div class="contact">
{% form 'contact', class: 'contact__form' %}
{% if form.posted_successfully? %}
<div class="alert alert--success">
<span class="alert__title">{{ 'contact.form.thank_you' | t }}</span>
</div>
{% endif %}

{% if form.errors %}
<div class="alert alert--error">
<span class="alert__title">{{ 'general.forms.errors' | t }}</span>
{% include 'form-errors' %}
</div>
{% endif %}

<div class="form__control">
<label class="form__label" for="contact__name">{{ 'contact.form.name' | t }}</label>
<input type="text" id="contact__name" name="contact[name]">
</div>

<div class="form__control">
<label class="form__label" for="contact__email">{{ 'contact.form.email' | t }}</label>
<input type="email" id="contact__email" name="contact[email]" required="required">
</div>

<div class="form__control">
<label class="form__label" for="contact__body">{{ 'contact.form.message' | t }}</label>
<textarea rows="5" cols="75" id="contact__body" name="contact[body]" required="required">{{ form.body }}</textarea>
</div>

<div class="form__control">
<label class="form__label" for="contact__body"></label>
<input type="checkbox" name="acceptance" required>I accept the <a href="https://uztzuclothing.com/pages/privacy-policy" target="_blank">privacy policy</a><br>
</div>

<input type="submit" class="button button--primary" value="{{ 'contact.form.submit' | t }}">
{% endform %}
</div>
{% endcapture %}

{% if page.content == blank %}
<div class="container container--shrink">
{{ contact_form }}
</div>
{% else %}
<div class="container">
<div class="grid grid--large">
<div class="grid__cell 1/2--handheld-and-up 2/5--lap-and-up contact-inverted contact-inverted--left" >
{{ contact_form }}
</div>
<div class="grid__cell 1/2--handheld-and-up 3/5--lap-and-up contact-inverted contact-inverted--right">
<div class="rte">
{{ page.content }}
</div>
</div>


</div>
</div>
<style>
.contact-inverted {
float:right;
padding-bottom: 50px;
}
</style>
{% endif %}
</section>

</div>
</div>
</div>
<!-- end Accordion Snippet -->

0 Likes
Highlighted

Hi @kandy,

 

Based on my limited experience with SEO, if you want to optimize your website for search engines, you need to include relevant keywords in important positions. So here are the things you can do:

 

1. Research keywords:

 

Find the keywords related to your niche that have much search volume. (They are the keywords your potential customers use to search for the products they need)

I'm using keywordtool.io to research keywords. It's a paid service. If you have a Google Ads Account, you can use Keyword Planner. You can even search  your ideas on Google and use Google's suggestion for more keywords ideas: 03:31-03.png

Normally, I would define 1 main keywords and many other related keywords that support the main keyword.

 

2. Include keywords in important positions.

What are important positions? 

There are some important positions for SEO in your website:

  • Site name
  • Site URL
  • Site Title
  • Site's Description
  • Site's headings
  • Image Alt Text

03:031.png

Make sure you include keywords in these positions, in specific:

  • Include main keyword in the site's name, title and description
  • Include related keywords in the site's description, headings and images' alt texts.

3. Include keywords in your product page content

While preparing a product page, you can optimize it for search engine by including keywords in:

  • Product Images' alt text
  • Product Title
  • Product description

03:31-02.png

 

Hope this helps :)

- Tips to optimize website load speed: http://academy.pagefly.io/load-speed-optimization
- Are you building Shopify stores? Check out PageFly - An Advanced Page Builder trusted by non-techies and pro web designers.
0 Likes