In case you want to show the collection description at the bottom of the page. You should perform the following steps.
Note: You should be able to edit the theme source code at Theme actions -> Edit code. Or hire a Shopify Expert to complete this task for you.
1) Create a backup copy of your theme at Theme actions -> Duplicate. You may quickly restore the working theme in case something goes wrong.
2) Go to Theme actions -> Edit code.
3) Open the snippets/collection-head.liquid file
4) Find the following code
<div class="rte fs{{ description_class }}"> {{ collection.description }} </div>
5) Cut it from the snippets/collection-head.liquid file & paste at the snippets/collection-page.liquid file. After the collection-body section
You should get
a) Updated snippets/collection-head.liquid file
b) Updated snippets/collection-page.liquid file
c) Collection description after the product list.
d) You may add additional margin with mt-100 class.
mt - short for margin top
100 - distance in pixels, you may use other number with set of 10 pixels.
It looks better now.
Done.
Thank you for using the Shella theme.
Shopify software doesn't recommend to modify the theme source files by the app.
Now the app should be installed via app blocks. Before you edit the theme source files, please contact the app's support first.
If the app blocks doesn't work in your case and you need to modify the product page source code. You may proceed with this article.
Product page files:
a) sections/main-product.liquid - start file. It prepares the variables, and includes, main product snippet depends on the product page layout selected at your theme settings.
b) snippets/product-page-get-main.liquid - includes gallery, info, and tabs snippets.
c) snippets/product-page-get-info.liquid - generates the product info
d) snippets/product-page-get-tabs.liquid - tabs
Tabs titles
Same for tabs content
I hope it will help you to understand the Shella product page file structure.
In next article I will guide you, how to insert app's code snippets based on Yotpo Star Review app.
Thank you for using the Shella Shopify theme.
Start your ticket with the title "Feature Request: ...."
Make ticket public.
The feature request should include the following information.
Describe how the feature should work at the storefront.
Describe how to configure the feature at the backend.
Add the URL of the example store. Add steps on how to see the feature in actions.
Add the Shopify theme name with this feature (optional).
If you found the existing feature request useful for your store, add a "+1" comment.
Response time may take up to 2 business days.
Installation and customization services are not included in the theme support service.
Please read more details here - https://themeforest.net/item/shella-ultimate-fashion-responsive-shopify-theme/22804833/support
1) Create a collection with a description
2) Open sections/collection-body.liquid file at Theme actions -> Edit code.
3) Search for pagination_html at line ~570
4) Add the following code snippet before closing and opening div tags
<div class="rte"> {{ collection.description }} </div>
You should get this result
5) Disable the collection description at the top. Go to Collection page -> Heading section -> Set Only title
6) Scroll to the bottom to check the result
You may want to see the previous article for more details about product page files.
This article is for the Yotpo review app, but it may be useful if you want to install other Shopify apps. You may show this article to the app developer to help locate the needed theme file.
Let's install and configure the Yotpo app.
1) Install app & select Manual Installation. I hope in future the app author will add auto install option for the Shella theme.
2) Add Yotpo's Java-Script
Nothing special here. Open theme.liquid file and paste the app's code. (Online store -> Theme actions -> Edit code)
3) Install Reviews Widget
Open snippets/product-page-get-info.liquid file and paste the app's code in place you want to show the reviews widget.
4) Install Conversion Tracking
Follow the app instruction to add tracking code to the Checkout page. This is not a theme related part, cause the Shopify software doesn't allow to modify the Checkout page.
5) Review the result
1) Open snippets/product-page-get-tabs.liquid file
2) Find the tab_reviews_html
3) Remove the code for the Shopify reviews app
<div id="shopify-product-reviews" data-id="{{ product.id }}">{{ metafields.spr.reviews }}</div>
4) Paste Yotpo code instead.
5) Check the result
For product page layout #2
For product page layout #1
1) Open Yotpo app -> On-site Widgets -> Star Ratings
2) Press on Generate Code button
3) Press on Copy Code button
4) Open snippets/product-get-review.liquid file
5) Remove all content
6) Paste Yotpo code
7) Check the result
Thank you for using the Shella Shopify theme
This article was created thanked Eduardo support request. I believe it may be helpful for other customers as well.
The theme has hundreds of options, you may check it in the user manual and video tutorials. Unfortunately, there is no theme option to add tabs in any place. Fortunately, you may add the following HTML code snippet to solve this task. Yep, you should deal with code, and it requires some basic HTML knowledge and Shopify online theme editor.
Here is an example of three tabs
<tabs-element class="tabs d-block" data-type="horizontal"> <div class="tabs__head" data-js-tabs-head=""> <div class="tabs__slider" data-js-tabs-slider=""> <div class="tabs__btn active" data-active="true" data-js-tabs-btn="">Tab #1</div> <div class="tabs__btn" data-js-tabs-btn="">Tab #2</div> <div class="tabs__btn" data-js-tabs-btn="">Tab #3</div> </div> <div class="tabs__nav tabs__nav--prev" data-js-tabs-nav-prev=""><i></i></div> <div class="tabs__nav tabs__nav--next" data-js-tabs-nav-next=""><i></i></div> </div> <div class="tabs__body"> <div class="active" data-js-tabs-tab=""> <span data-js-tabs-btn-mobile="">TAB #1 <i>+</i></span> <div class="tabs__content rte overflow-hidden" data-js-tabs-content="" style="display: block;">Content for tab #1</div> </div> <div data-js-tabs-tab=""> <span data-js-tabs-btn-mobile="">TAB #2 <i style="font-style: normal;text-transform: lowercase;">+</i></span> <div class="tabs__content rte overflow-hidden" data-js-tabs-content="">Content for tab #2</div> </div> <div data-js-tabs-tab=""> <span data-js-tabs-btn-mobile="">TAB #3 <i> <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-188" viewbox="0 0 24 24"><g><path d="M7.158,12.206c-0.124-0.123-0.186-0.27-0.186-0.439c0-0.169,0.062-0.315,0.186-0.439c0.123-0.123,0.27-0.186,0.439-0.186h3.75v-3.75c0-0.169,0.062-0.315,0.186-0.439c0.123-0.123,0.27-0.186,0.439-0.186c0.169,0,0.315,0.063,0.439,0.186c0.123,0.124,0.186,0.271,0.186,0.439v3.75h3.75c0.169,0,0.315,0.063,0.439,0.186c0.123,0.124,0.186,0.271,0.186,0.439c0,0.17-0.063,0.316-0.186,0.439c-0.124,0.124-0.271,0.186-0.439,0.186h-3.75v3.75c0,0.17-0.063,0.316-0.186,0.439c-0.124,0.124-0.271,0.186-0.439,0.186c-0.17,0-0.316-0.062-0.439-0.186c-0.124-0.123-0.186-0.27-0.186-0.439v-3.75h-3.75C7.428,12.392,7.281,12.33,7.158,12.206z"></path></g></svg> </i></span> <div class="tabs__content rte overflow-hidden" data-js-tabs-content="">Content for tab #3</div> </div> <script>// <![CDATA[ theme.AssetsLoader.require('scripts', 'tabs'); // ]]></script> </div> </tabs-element>
You may paste it to the content field via admin panel or paste directly to *.liquid file via online code editor. I will stick with first option. Create a new page, switch to code edit mode, paste the above code snippet you should see the following. tabs
Replace texts "Tab #1", "Tab #2", "Tab #3" for captions
Replace texts "Content for tab #1", "Content for tab #2", "Content for tab #3" for tab content. The tab content may include the HTML code.
In my example I edited two tabs and put HTML code for table.
In case you want to remove tab, you should delete tow DIV tag with class tabs__btn at .tabs__head > .tabs__slider and data-js-tabs-tab attribute at .tabs__body elements.
I my example I will remove third tab and third DIV tags.
To add tab you should add tow DIV tag with class tabs__btn at .tabs__head > .tabs__slider and data-js-tabs-tab attribute at .tabs__body elements.
You should keep the sequence of added tags. Second tabs__btn element will be linked to the second data-js-tabs-tab element.
Tabs at mobile transform to the accordion.
You should add mobile captions inside content element data-js-tabs-tab at span tag with data-js-tabs-btn-mobile attribute.
Inside the I tag you may set the open icon.
Option #1 - Plus sign, with italic font style
<i>+</i>
Option #2 - Plus sign
<i style="font-style: normal;">+</i>
Option #3 - Plus SVG icon
<i> <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-188" viewbox="0 0 24 24"><g><path d="M7.158,12.206c-0.124-0.123-0.186-0.27-0.186-0.439c0-0.169,0.062-0.315,0.186-0.439c0.123-0.123,0.27-0.186,0.439-0.186h3.75v-3.75c0-0.169,0.062-0.315,0.186-0.439c0.123-0.123,0.27-0.186,0.439-0.186c0.169,0,0.315,0.063,0.439,0.186c0.123,0.124,0.186,0.271,0.186,0.439v3.75h3.75c0.169,0,0.315,0.063,0.439,0.186c0.123,0.124,0.186,0.271,0.186,0.439c0,0.17-0.063,0.316-0.186,0.439c-0.124,0.124-0.271,0.186-0.439,0.186h-3.75v3.75c0,0.17-0.063,0.316-0.186,0.439c-0.124,0.124-0.271,0.186-0.439,0.186c-0.17,0-0.316-0.062-0.439-0.186c-0.124-0.123-0.186-0.27-0.186-0.439v-3.75h-3.75C7.428,12.392,7.281,12.33,7.158,12.206z"></path></g></svg> </i>
Here is how it looks
In the example snippet the first tab is active by default. You may configure another tab to set active.
You should apply four changes
#1 - Add active class to the tab caption and remove it from first tab
#2 - Add data-active="true" attribute to the tab caption and remove it from first tab
#3 - Add class="active" attribute to the tab content element and remove it from first tab
#4 - Add style="display: block;" attribute the tab content and remove it from first tab
You should get the following code
Set the data-type="mobile" attribute for the top tabs-element tag.
That's it.
Thank you for reading.
Enjoy the Shella Shopify theme.
1. Footer or Header (elements) disappeared after update
This issue occurs if you've selected the color for an element and then removed the color. As the result, the transparent color is preserved in the settings.
The workaround is to remove all the lines with the color "rgba(0,0,0,0)" in the file config/settings_data.json
It can be easily done by searching (CTRL+F) in the file -
2. Can't change color of the Input background
You may need to add 3 lines of code to the file snippets/css-variables.liquid
After the lines:
--theme12: {{ settings.color_theme12 }};
{%- endif -%}
Code:
{%- if settings.color_theme13 and settings.color_theme13 != '' -%}
--theme13: {{ settings.color_theme13 }};
{%- endif -%}
1. HOW TO INSTALL THE THEME
Firstly, you can see full installation process in such video - https://www.youtube.com/watch?v=Rt1Frbom8bw&list=PLj-506KaR_vfRdRRBX0k8jYIt_VcxN-34&index=2.
Check if you do the same action- unpack the package downloaded from Themeforest (it has also user-manual folder with documentation)
- in your site admin in Themes upload the package - upload_me_Shella_theme_....zip
Finally, if you have problems with package uploading create staff account for me ([email protected]) I will upload the theme to your store.
2. HOW TO UPDATE THE THEME
Such video can helps you - https://www.youtube.com/watch?v=TmV6V5LrpXs&list=PLj-506KaR_vfRdRRBX0k8jYIt_VcxN-34&index=16
Also, please, read the chapter from our documentation - https://mpthemes.net/shella-shopify-theme/documentation/#toc5
3. I HAVE PROBLEMS WITH ACTIVATION
From v.2.x you have to activate the theme. Firstly, please, keep in mind that the one copy of our theme must be used only on one domain. If you’ve entered the code on one domain but want to remove it to other domain you have to write us to reset the old domain.
If you use a clean new site and have problems, please, follow instructions from - https://mpthemes.net/shella-shopify-theme/documentation/#toc4
4. HOW I CAN OPTIMISE MY SITE
- each new app adds JS and CSS. Loaded from new server. DNS lookup, connect to new server all these slowdowns page load. Choose only needed apps. It's up to you what is more important for your store, additional features or some more points for page speed. (I believe features is more important)
- each new element on the page slow down page speed. For example we disable product options on home page to get higher speed points.
For example, all three stores on our demo (some optimised the best, some not) has same theme code. The difference is in: a) apps, b) content, c) configuration.
5. WILL MY EXTENSION WORK WITH YOUR THEME?
please, keep in mind that our theme (and any other custom theme) isn't compatible with all third-party plugins or themes by default. You often (not always) need to customize the plugin or other theme to make it work properly with your theme. It's impossible for theme’s author to make the theme compatible with all existing plugins. Only default theme is compatible with all third-party plugins, because all plugins are designed to work with default theme. Most common case is a conflict if the plugins and the theme override the same default template file. In such cases you need to customize conflict template and merge plugin into theme template
6. HOW TO CONFIGURE LOGO IN THE HEADER
All options available for logo can be found in Sections -> Header. There are all possible options for logos - for different screens and their sizes - http://prntscr.com/nj61ml
7. HOW TO ARRANGE MEGAMENU
All menus you have to create manually. Unfortunately, it is not imported after theme’s sample data installation.
Full information you can find in the documentation - https://mpthemes.net/shella-shopify-theme/documentation/#toc14,
https://mpthemes.net/shella-shopify-theme/documentation/#header_megamenu
Also such short video can helps - https://www.youtube.com/watch?v=PebHRvCsAaY&list=PLj-506KaR_vfRdRRBX0k8jYIt_VcxN-34&index=4
8. HOW TO CHANGE FONT
Any changes with fonts in admin can be done as described here - https://mpthemes.net/shella-shopify-theme/documentation/#toc56.
Any other specific changes have to be done in css only. Unfortunately, such additional work is beyond of scope of our general support.
9. HOW TO FIND CSS QUICKLY
To find quickly what style you need to change you can use add-on firebug for Firefox or web developer tool for Chrome or Opera (it’s included in browser. You need only right click on some element and choose “Inspect element”). In it you can choose any element and see what styles are connected with it and in what file.
10. HOW TO ADD LANGUAGES
By default in shopify the only one language is used on store front. To use more than one you have to use some application. Our theme is compatible with :Weglot , Longify
Our theme is compatible with proposed applications because code of them is added in the theme. So, you can choose any of them. After installing , please, read any instructions in the application user manual
11. HOW TO DISABLE PRESENTATION (FIXED RIGHT GEAR BUTTON)
You can disable this block in Theme settings -> Layout -> Enable presentation
12. HOW TO CHANGE NEWSLETTER POPUP TEXTS
The texts in the Newsletter popup are simple language texts. Open Edit languages section - http://prntscr.com/n0bm80
13. HOW TO ARRANGE NEWSLETTER SUBSCRIPTION
Our theme provides 2 types of Newsletter subscriptions: default Shopify subscription and Mailchimp integration. You can switch between them in Theme settings -> News subscription.
please, keep in mind that our theme uses Mailchimp embedded forms. They should work on any site independently from Shopify. Integration of any other 3rd party service is beyond of scope of our support.
14. REVOLUTION SLIDER ARRANGEMENT, SIZES
About all settings of revolution slider you can read here - https://mpthemes.net/shella-shopify-theme/documentation/#builder_revslider, https://mpthemes.net/shella-shopify-theme/documentation/#builder_slide
And find them in corresponding Builder in Sections on home page. Also such customisation video can helps - https://www.youtube.com/watch?v=cFbZ4IPcaUI&list=PLj-506KaR_vfRdRRBX0k8jYIt_VcxN-34&index=11
You can set any sizes of slides in the Revolution. Also you can download images from our demo. Also when you upload own images you should check them on different screen resolutions.
15. HOW TO ARRANGE INSTAGRAM BLOCK
If you add separate Instagram blocks you should upload the images manually. You can remove these Instagram blocks, so, images will be uploaded from your account. Images from an account are added according to their popularity. Also Instagram account should be open to being seen in widget.
Please, find full information in our documentation - https://mpthemes.net/shella-shopify-theme/documentation/#builder_instagramm, https://mpthemes.net/shella-shopify-theme/documentation/#builder_instagramm_block.
Also such video will helps to have your Instagram parameters - https://www.youtube.com/watch?v=I8_vZuMf1KI&list=PLj-506KaR_vfRdRRBX0k8jYIt_VcxN-34&index=14
16. HOW TO ADD PERSONAL TABS FOR EACH PRODUCT
Firstly, you have to install the addons according to such infromation - https://mpthemes.net/shella-shopify-theme/documentation/#toc6
Than go to each product and open metafields editor - http://prntscr.com/n3ldu5,
Create metafields strictly following our documentation - https://mpthemes.net/shella-shopify-theme/documentation/#toc37, item 47 - Custom tab per product
17.PRICE SEPARATOR FROM
To change text for this price sale separator go in Edit languages -> Product tab - http://prntscr.com/n6uoln
Also you can disable/enable it in product page Section -> Product page -> INFORAMATION -> Show sale price separator
Finally, check also this option in Theme settings -> Currency - https://prnt.sc/mxebjw
18. HOW TO CHANGE SORTING OF PRODUCTS IN LISTINGS
Go in admin Products -> Collection. Open each collection , for example, http://prntscr.com/nqso4d. Press save button and you will see on Store front - http://prntscr.com/nqsokf
19. HOW TO ARRANGE PRODUCT FIXED SIDEBAR IN THE RIGHT
Please, read here - https://mpthemes.net/shella-shopify-theme/documentation/#toc42
20. HOW TO ARRANGE TIMER ON PRODUCT PAGE TEXT COUNTDOWN
1) this timer can be disabled in Sections -> Product -> Show text countdown. It works with such options - http://prntscr.com/n33nlv
2) data format can't be changed in admin, only manually in some files.
Texts in this block have to be changed in Edit languages -> Products tab -> Product section http://prntscr.com/n33pfe
and Products tab -> Product text countdown section http://prntscr.com/n33p4f
21. HOW TO ARRANGE RELATED PRODUCTS BLOCK
Related products block created based on this code example from Shopify - https://help.shopify.com/en/themes/customization/products/features/recommend-related-products. Unfortunately theme doesn't have feature needed for your store.
22. HOW TO ARRANGE FAQ PAGE
the page FAQ has sections which are added in Theme customise panel, faq page - Sections
23. HOW TO ENABLE/EDIT PASSWORD PAGE
You should enable password in admin.
So, you will see the password page in dropdown list with pages - http://prntscr.com/nqg8w3
24. HOW TO ARRANGE TRUST BADGES ON PRODUCT PAGE AND IN THE FOOTER
- on Product page go in the Editor: Theme settings -> Product -> PAYMENTS. Here enable/disable, add links
- in the Footer go in the Editor: Sections -> Footer -> CONTENT -> Payments. You can read about in the documentation - https://mpthemes.net/shella-shopify-theme/documentation/#footer_payments. Also, please, refer in it that not all types of the Footer have the block Payments
25. How to install AliReviews app at Shella Shopify theme?
Check this blog post for detailed instructions.
26. HOW TO ARRANGE BLOCK ON PRODUCT PAGE "Hurry up...."
Text for this block is located in Edit languages, tab Products -> Stock countdown html.
Base number to which the product quantity is compared is set in Editor Theme settings -> Product -> Stock countdown min value.
In your product you have to set quantity that will be less than this option “Stock countdown min value” - http://prntscr.com/ofngpg.
In such case this product quantity will be displayed - http://prntscr.com/ofnh5u.
27.HOT TO EDIT CONTENT IN PROMO BOXES: BUTTONS, POSITIONING ETC.
In new version of our theme Revolution slides, promo boxes have expanded functionality. For them Content Builder functionality is used.
To see texts you should enter html content in the field - Custom HTML or Template - https://prnt.sc/qpe0iz
Also check what type is set - https://prnt.sc/qpe0b2 (it has to be with text)
For example,
-to have simple box with centered information go in page - https://shella-content-builder.myshopify.com/ and copy content of first block - Type #1, Example #1 (Default)
- to have this block with 2 buttons you should go to demo page - https://shella-content-builder.myshopify.com/, copy the code of Type #1, Example #2
from here and insert it in Promo box field - Custom HTML or Template.
But this is not all. Full information about using content builders read here - https://mpthemes.net/shella-shopify-theme/documentation/#toc32
28. PROBLEM WHILE COPYING SETTING DATA FROM OLD VERSIONS TO 3.0
You may be faced with such error.
To correct this make search with the word “text-undertline”.
Make the option title empty.
The theme front-end doesn't change.
We worked on the version 4 update for the six months.
Most improvements are related to the theme code. If review the code, it is about 30-40% of the new code.
You may notice the changes in the theme settings. We removed the hard to understand features. And try to make it easier.
You may stay with version 3, if you have an issue with the theme, our developer will fix it.
The theme version number 4 has significant changes and improvements. Unfortunately, the theme settings from version 3 are not compatible with version 4. If you want to use version 4, you should configure it 4 from scratch.
The update is not mandatory. You may stay with the previous theme version.
It depends on your store configuration. I believe it should be much faster and easier than in previous versions.
Unfortunately, some software updates don't provide such an option. For example, Shopify announced the new features: Sections on every page, Master pages, etc. What does it mean for the theme developer? The theme developer should significantly rewrite the theme code. The theme developer should create a new theme from scratch to include new features in the theme editor. This is true for any software product, not only for the Shella Shopify theme.
Thank you for your understanding.
Sections -> Global settings used to configure the custom product swatches at previous version (theme version 3x).
Now it was renamed to Product variants.
a) You should enable it in Theme settings -> Product -> Variants.
b) You may configure in Sections -> Product variants.
Please check the user manual for more details.
Unzip the downloaded file firstly, then you can upload "upload_me_Shella_theme..." to Shopify theme uploader.
Here is our user manual -
https://mpithemes.gitbook.io/shella-shopify-theme/get-started#install-theme
Please, also watch this video tutorial -
Unfortunately, Shopify doesn't allow export/import features for some elements, like Collections, Navigation menus, Images etc.
You should upload your images, products, configure collections and navigation menus by yourself.
- You can read the step by step instruction in our user manual –
https://mpithemes.gitbook.io/shella-shopify-theme/get-started#update-theme
Or watch our video tutorial –
- If you edit the theme source code, you should merge your code changes manually.
We recommend to use the Git software to track your code changes.
Unfortunately, there is no way to update the theme version 3x to the newest version 4x without losing your theme settings.
If review the code, it is about 30-40% of the new code in version 4x. So, you may need to start building your theme from scratch.
Please check this page for more details about theme version 4x -
https://mpithemes.ticksy.com/article/16036/
Please, follow the link to check the full list of changes, scroll down to "Change log" block -
https://themeforest.net/item/shella-ultimate-fashion-responsive-shopify-theme/22804833
Navigate to Shopify admin -> Online store -> Actions-> press “Download theme file” –
The theme files will be sent to your mail.
Please note, the Shopify software doesn't allow to duplicate the store.
You may export/import products, export/import the theme, you may use 3rd party apps to export/import other store data.
For example, you may use the ExIm app to export/import Pages and Blog posts.
But you should configure other content and store settings manually. Configure collections, navigation, etc.
Theme settings include links to the store resources, you may need to update them too.
You can create staff account at Shopify admin -> Settings -> Users and Permissions.
Please, check Shopify user manual for more details -
https://help.shopify.com/en/manual/your-account/staff-accounts/create-staff-accounts
You can disable an option “Enable a gear wheel popup (Presentation mode)” in Theme settings -> License -
- You can only use the "Instagram block" to configure this feature.
Please, read more details in our user manual -
https://mpithemes.gitbook.io/shella-shopify-theme/home-page-sections/builder/instagram
- If you want some images from your Instagram account to be automatically displayed on the home page, we recommend you to install the IG app.
IG disabled public access to account's images.
The theme works as described here –
https://stackoverflow.com/questions/49677816/is-there-any-way-to-get-images-from-an-instagram-account-since-the-new-changes-o
Unfortunately, this method doesn't work anymore.
You can apply changes at Theme settings -> Payments.
Please, read our user manual for more details -
https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/payments
The RTL feature works based on the "dir" attribute of the "html" tag -
The language app should update this attribute.
Please, contact the app developer for help with app installation and configuration.
- Tabs that you can configure in Shella Editor work for all Product pages.
Go to Products -> Product page section to configure tabs -
You can read details in our user manual –
https://mpithemes.gitbook.io/shella-shopify-theme/products/product-page
- If you want to add a unique Tab for each product, you can achieve it via Metafields.
Please, read more details in our user manual -
https://mpithemes.gitbook.io/shella-shopify-theme/product-metafields#shopify-admin
Or watch the video tutorial -
You can add or edit pages at Shopify admin -> Pages, using any features of Shopify rich text editor -
Please, also read Shopify user manual for more details -
https://help.shopify.com/en/manual/online-store/os/pages
Unfortunately, we don’t support IE in our theme. We’ve analyzed browsers using statistics and detected that this browser is used by too small percent of users.
So, we’ve decided not to use it. Also, IE doesn’t support many modern features. Theme has poor functionality if it is developed for this browser.
The sorting order is generated by default Shopify logic.
The theme doesn't change this. It can't be regulated in theme's files.
You may edit the text in Shopify admin -> Online store -> Actions -> Edit languages, press tab “Collections” and scroll down to “Control sort by” block –
"Collections" Sidebar filter works as a switcher between the collections.
So, it navigates you to the collection that you selected in the Sidebar menu.
You may check how the filter works on our demo -
https://shella-demo9.myshopify.com/collections/womens
You should install the app for the correct work of Wishlist /Compare functionality.
We use CustomerMeta app on our demo.
Please, check our user manual, item 5 -
https://mpithemes.gitbook.io/shella-shopify-theme/get-started#install-apps
You can also find more information here -
https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/wishlist-and-compare
You can configure the Purchase notification at Theme settings -> Notifications.
Please, read details in our user manual -
https://mpithemes.gitbook.io/shella-shopify-theme/theme-settings/notifications
You can select any collection for this popup.
You may edit the text in Shopify admin -> Online store -> Actions -> Edit languages, filter by "notification" keyword -
You may need to create a Builder section with two Promo boxes -
For the first Promo box, you should select the Layout type - Clean image without text -
And for the second one, any Type of text without an image -
Please, check our video tutorial for more details -
Please check the Shopify manuals, like this blog post -
https://www.shopify.com/partners/blog/related-products
The related products are pulled via JS - https://take.ms/GU5ZB
The Shella theme doesn't include the example code snippets, but uses the same idea.
You can update JS code at the assets/section.carousel-products.js file - https://take.ms/7N3kz
Please note, the Shopify software selects related products according to an internal algorithm.
And may decide that your product has only three related products.
The Local pickup was added to the latest theme update 4.10.0.
You may need to enable an option in Theme settings -> Product page & Quick view -
And apply settings in Shopify admin. How to configure the pickup availability on your store, you can read here -
https://help.shopify.com/en/manual/shipping/setting-up-and-managing-your-shipping/local-methods
The Purchase code is assigned only to one account. So, you may need a License for every, if you want to use it on two different accounts.
If you need to move your license from one domain to another, you should remove it from the old domain, and write to us. We'll reset it.
This article is create based on Shella version 4.
It is still actual for version 5.
For version 6, please check the update version here - https://mpithemes.ticksy.com/article/19553
I had a ticket form, sschumm
Me and the Yotpo team are having difficulties in installing the Star reviews on the Shella theme. This because you use a different naming for templates and all.
Can you please guide us on how to install the Yotpo Star Review under or above the product title on both the product pages and the Collection pages.
Product page files:
a) sections/product.liquid - start file. It prepares the variables, and includes, main product snippet depends on the product page layout selected at your theme settings.
b) snippets/product-page-get-main.liquid - includes gallery, info, and tabs snippets.
c) snippets/product-page-get-info.liquid - generates the product info
d) snippets/product-page-get-tabs.liquid - tabs
Tabs titles
Same for tabs content
I hope it will help you to understand the Shella product page file structure.
In next article I will guide you, how to insert app's code snippets based on Yotpo Star Review app.
Thank you for using the Shella Shopify theme.
You should apply settings in the Klarna app. Activate the messages and select what message should be displayed
The place to display the message can be set by the class.
You can use the class .klarna-message-home on Static pages and Home page.
This code should be placed where you need to display the Klarna message -
< div class="klarna-message-home"> (use "< div" without a space)
Use any other class instead of .klarna-message-home for several Static pages, for example:
.klarna-message-home
.klarna-message-static
.klarna-message-home2
Use the Anchor CSS Selector to add messages from Klarna.
Classes for posting messages from Klarna on the product page: ".klarna-message-info", ".klarna-message-info2"
Class for posting messages from Klarna in an information tab on the product page: ".klarna-message-tab"
Class for posting messages from Klarna on the cart page: ".klarna-message-cart".
Please note, you should also apply changes to the corresponding class in HTML
You may also need to wait from 1 to 2 minutes before saving changes in the app, because app needs time to update changes and transfer data to the Shopify.
Then you can press button “Save”. And check changes in the Preview mode.
The simple answer is - Copy *.json configuration files. From old theme files to new theme files.
You may do it in various ways:
It is the easiest way. You just need time and patience.
You should deal with code. You should be very careful, cause one missing quote or comma may break the file. You may filter all *.json files with theme settings and copy their content to the same files at a new theme.
Please note, the settings_schema.json file doesn't include theme settings. You shouldn't merge it.
Install the Exim app. Export all theme settings files from the old theme version and import them to the new theme version. In this video tutorial, you may get the main idea of how to use the app.
In case you applied the custom source code changes - you should merge it manually
In case the app modifies theme source files (that app shouldn't do now) - you should contact the app's support and ask to apply app changes to a new theme version.
The most robust is Option #1. It will work for any update.
Other variants are optional and may not work as expected.
I recommend starting with Option #3.
If it doesn't work for you and you can copy the content of *.json files - try Option #2.
If still doesn't work for you - go with Option #1.
Due to Shopify software major changes. The theme file structure changed. The settings are stored in other files.
The Option #1 works.
The bad news that Option #2 and Option #3 doesn't work for major changes.
The good news that you can combine Option #3 and Option #2 to move your theme configuration to a new version.
Here are the step by step instruction on how to do it. In my example I move theme settings from theme version 5 to version 6.
Step 1.
Perform the Option #3. Install Exim app, export settings from old theme, import settings to new theme.
Step 2. Home page content.
- open online code editor at "..." -> Edit code
- open config/settings_data.json file
- scroll down to "sections", use the arrow to collapse entire node, select and copy "sections" and "content_for_index" nodes.
- open templates/index.json file
- select and delete "sections" and "order" nodes
- paste "sections" and "content_for_index" nodes. Use arrow to collapse sections in the following way
- remove comma after the "content_for_index" node
- rename "content_for_index" node to "order"
- remove sections with readable identification. The "sections" node should have the same list as "order" node. You should get the following look
- save the file and check home page content at the theme editor.
Step 3. Header.
- open config/settings_data.json file
- scroll down to "sections", use the arrow to collapse sections inside, select and copy "header" section node.
- open sections/header-group.json file
- delete current "header" node
- paste the "header" node from settings_data.json file
- remove comma, you should get the following
- save the file and check header at the theme editor.
Step 4. Footer.
Perfume the same steps for sections/footer-group.json file as for header.
- open config/settings_data.json file
- scroll down to "sections", use the arrow to collapse sections inside, select and copy "footer" section node.
- open sections/footer-group.json file
- delete current "footer" node
- paste the "footer" node from settings_data.json file
- remove comma, you should get the following
- save the file and check footer at the theme editor.
Describe the behavior you are expecting.
Describe the current behavior.
Provide information about the failure.
Provide detailed steps for reproducing the issue.
Provide any relevant information about your setup. This is important in case the issue is not reproducible except for under certain conditions.