How to tips – Shopify themes and apps

March 2, 2020March 3, 2020

How to add the Instagram widget.

The latest Shella Shopify theme update, version 3.6.0, includes an updated block for the Instagram widget.

Now you do not need to add and configure the app at your Instagram account, generate the token. You can show the latest posts filtered by the account name or the hashtag.

Please note, filtering posts on Instagram by account name limits only for 12 posts.

If you want to filter by hashtags, the Shella theme will show posts from other accounts too. Not limited only to your account.

Add an Instagram widget

Go to Online store -> Themes -> Customize
Add the builder section. Sections -> Add section -> Select builder section.
Add Instagram. Go to the builder section -> Add content -> Instagram.

Configure the Instagram widget

GRID – Size

You may set the width for the Instagram widget. In the example, I set the width to 8/12 (66.6%) for the Instagram feed and added an image banner with the 4/12 width (33.3%). The numbers 8 and 4 are the number of columns. Total builder width has 12 columns, I set 8 columns for the Instagram feed and I set 4 columns for the banner image.

The usual value for this option is 12, which is equal to the full width of the builder section.

SETTINGS – User name

Set your Instagram user name. Please note, the theme will get only 12 images.

SETTINGS – Tag

Set hashtag to select posts for your Instagram widget.

SETTINGS – Show post details

Show the number of likes and comments on mouse hover.

SETTINGS – Disable paddings

Disable paddings between Instagram images.

SETTINGS – Items limit

Set the number of images to show in the widget.

SETTINGS – Size

Set the width for each image within the Instagram widget.

If you have more questions about theme settings, please create a new ticket at our support system.

Instagram legacy API shut down (updated).

As of March 2nd, 2020, the Instagram legacy API will be shut down. If you have an Instagram widget at your store, you should replace it with an alternative.

Please note:

These changes do not apply to the Instagram sales channel. The sales channel will work without changes.

API changes apply only for the Instagram feed added via Theme Editor.

Unfortunately, those changes will affect all Shopify themes with legacy API Instagram widgets, including the Shella Shopify theme.

In this way, we recommend you to update your store configuration.

Remove legacy Instagram widget

a) Go to Online store -> Themes -> Customize

b) Navigate to the Builder section with an Instagram block

c) Remove the Instagram block.

How to add an Instagram feed after March 2nd.

1/ Shopify app.

You may search for an Instagram app at the Shopify app store.

All Shopify apps should work with the Shella Shopify theme. If you have any questions about the app installation process or settings, please contact the app support. If the app support has questions about theme files they may contact us via email mpthemes@gmail.com

2/ Use static images.

You may upload the same images using the Builder section and the “Instagram block”.

Add Instagram block per each static image

3/ Use the latest theme version (added)

Check this blog post for more details about how to configure the new Instagram widget.

Check this video manual on how to update your theme to the latest version. Please note theme update procedure works best for updates within one branch. If you update from 3.1.0 to 3.6.0.

If you need to update from branch 2.x to version 3.x I recommend uploading the latest theme version and configure it from scratch.

If you have more questions about Shella theme settings, please create a new ticket at our support system

December 23, 2019

A nifty feature built into the Shella Shopify theme.

Order within X hours to get it: DATE.

Do you have this feature at your Shopify store? Amazon does.

This great feature. It is not spammy as the count down timer. It includes valuable information when the customer can actually get this product.

When you know the time left to place the order to get the product the next day, this is a powerful motivator. Which increases conversion rate at your store.

I got many customer requests for this feature and implement it to the Shella theme. Now, this feature is included in Shella theme price.

You can easily configure this block at theme settings. Set the hour for the shipping cycle. Set the average delivery time for shipping. Configure the date format, and weekends to exclude them from the average delivery time. You can also edit block text at Theme actions -> Edit language.

Save monthly and increase page load time.

Can you get this feature for another Shopify theme? Yes. You can search the Shopify app store and find a bunch of apps for this feature. For example ShipTimer by Ethercycle.

What solution is better for your store?

	App	Shella theme
Price	19 USD / month only this feature	about 60 USD one-time fee for this feature + theme + bunch of other useful features
Load time	1) DNS lookup for app resources 2) Load app resources, JS and CSS files	No additional actions need for the built-in feature.
Install and configure	1) Install app 2) Resolve conflict with the theme code. The app should work on any theme, but if you have a highly customized theme or custom theme, you probably have to update your theme code to be compatible with the app. 3) Configure settings at app	Configure a few options at Theme settings.
Flexibility	Applies to any theme	Shella theme only

Get the Shipping Timer feature now!

The only requirement to use it in your store is knowing your cut-off shipping time.

Get Shella theme

I hope it will increase sale conversions rate at your store.

Mari

May 21, 2019June 11, 2019

How to install AliReviews app at Shella Shopify theme

Upload Shella Theme

This manual applies for Shella Shopify theme from version 2.0 and higher.

Upload Shella theme to your store. In next step you will install AliReviews app, during installation process AliReviews app edit ‘theme.liquid’ file of all themes at your store.

If you want to use Shella theme at existing store with installed AliReviews app. you have to manually update it with this link:

https://alireviews.fireapps.io/cs/update-themes

Check AliRevews FAQ page or reach app support if this URL doesn’t work for you.

Install AliReviews App

Install AliReview App – https://apps.shopify.com/ali-reviews

Make sure you already have products at your store.

Import reviews.

Check quick guide at app dashboard. In next steps we will use these code snippets with minor modifications.

Set jQuery Theme Option

For better page speed Shella theme loads only required JavaScript modules and in asynchronous mode. This may be not compatible with some apps, like AliReviews app.

AliRevew app require jQuery library to work correctly. We added “Load jQuery first” option for this case.

Enable “Load jQuery first” option at Theme Settings -> Java Script

Add Rating Star at Product and Collection Pages

If you want to show rating star on both product and collection pages use code:

{% if template.name == 'product' %} 
<div product-id="{{ id }}" class="alr-display-review-badge"></div> 
{% else %} 
<div product-id="{{ id }}" class="arv-collection arv-collection--{{ id }}"></div> 
{% endif %}

If you want to show rating star only on product info page use code:

{% if template.name == 'product' %} 
<div product-id="{{ id }}" class="alr-display-review-badge"></div>
{% endif %}

Open online editor at Theme -> Actions -> Edit code.

Find “product-get-review.liquid” file.

Paste selected code snippet.

Add Review Box at Product Page

Open online editor at Theme -> Actions -> Edit code.

Find “templates/product.liquid” file. This file includes code for all available product page layouts. Check your theme settings to find out what product page layout you use at your store.

Theme -> Customize -> Product pages -> Product page section -> Layout

Find code part related to selected layout at “templates/product.liquid” file.

For layout #1 it will be strings from 77 to 96

Paste following code to needed place. In this example I placed it before product tabs.

<div id="shopify-ali-review" product-id="{{ id }}">                      {{ shop.metafields.review_collector.review_code }}                 </div>

You should get

Result

Rating star at Collection page and Home page product blocks

Stars and Review Box at Product info page

Useful links

Create Shopify store in minutes

Purchase Shella Shopify theme

Check if Shella theme fast enough for your store

How to enlarge Shopify trial period

October 9, 2018March 17, 2019

Trial vs Developer Shopify store. Which to choose?

When you what to start and an run online business, Shopify software is a good option. How do you start a Shopify store?

The most popular way – sign up for a trial account. You can find more info about Shopify trial accounts here – Free trial. It’s a great opportunity to test out the Shopify software, become familiar with the admin interface, learn how to add and manage products, create collections, explore the navigation, and sort through different themes and apps. The main disadvantage is that the trial period is limited to 14 days. If this is your first Shopify store you may need more time to learn the Shopify admin, test everything, improve your theme or to find the needed app. Want to extend the Shopify store trial period? The next solution will answer this question.

Another way to start a Shopify store – find a Shopify expert or Shopify partner. Ask them to create a developer store for you. As for MPIthemes, we are a Shopify partner and can create as many developer stores as you need.

What is a Shopify developer store? It’s the same store as the trial account, without the 14 day limitation. You can work on your store for three weeks, a month, or even more with no need to switch to a paid account. Switch your store to a paid Shopify plan whenever you are ready, not just because the trial time period has expired. Read more about developer stores here – Everything You Need to Know About Development Stores

With a Shopify development store, you do have to perform one more additional step, (Find a Shopify partner to start a development store for you), but you get an unlimited trial period for your Shopify store. It’s up to you on what suites you best.

Drop me a message if you need a developer store. I will create it for free and transfer ownership to you when the store is ready to go live. You can also contact me by email at mpthemes@gmail.com

Good luck in your online business 🙂

Category: How to tips