This section explains the way to customize your own application.

1. App Config

Open the config file for the app by update src/Common/constants.js

Shopify: {
    url: 'beostore.myshopify.com',
    storeFrontAPI: '68b5417f1dfc2b5c16bac3841611a83e',
    ssl: true,
  },

You can get the appKey and storeFrontAPI from the dashboard admin site click Mobile App > Go to Private App > Create New Private App

Input all require app name, contact, permission and make sure you have check the Storefront API.

banner

2. Change the HomePage horizontal layout

Open src/common/Layout.js then you can change the horizontal layout with quite flexible data config.

  • name: the label display for horizontal layout.
  • tag: the tag id for the layout
  • category: the collection id for the layout

  • layout: Support varies layout UI:

    • Banner: Constants.Layout.miniBanner
    • Three column view: Constants.Layout.threeColumn
    • Two column view: Constants.Layout.twoColumn
    • Two column with higher UI: Constants.Layout.twoColumnHigh
    • Card view: Constants.Layout.car

Let me explain more about this config

export const HorizonLayout = [
  {category: 439051533, paging: true, layout: Constants.Layout.miniBanner},
  {name: "Feature Products", category: 439242445 , layout: Constants.Layout.threeColumn},
  {name: "Bags", category: 439242381, layout: Constants.Layout.twoColumn},
  {name: "Woman", category: 421858893, layout: Constants.Layout.twoColumnHigh},
  {name: "Man", category: 421858381, layout: Constants.Layout.card},
]
Show the content as banner:
{category: 439051533, paging: true, layout: Constants.Layout.miniBanner},

This config means that it shows all recent product which have collection id:273, show as the per page with sticky support via paging:true, this is show as the miniBanner (use for banner only so we will not display the name here).

Show the content as three columns view:
{name: "Feature Products", category: 21 , image: Images.Banner.Feature, layout: Constants.
  • Show the collection id:21 with label feature products
  • The horizon layout is showed as three column by support Constants.Layout.threeColumn

P/S: Please note that the image of category will be fetch from the Shopify Admin Config, if you would like to change the placeholder for image category it should be replace from the folder - /images/images/category_placehodler.png

Images.js

categoryPlaceholder:require('./../images/category_placehodler.png'),
PlaceHolderURL: 'http://mstore.io/wp-content/uploads/2017/07/placeholder.png',

3. Search product config

As the Shopify Api is not supported search function so you need to add this feature from the admin:

Select Online Store/Theme, from the Action dropdown list, select Edit Code.

Click to Add new template: search.json.liquid

{% layout none %}

{% capture output %}
  {% for result in search.results limit: 10 %}
    {% if result.object_type == 'product' %}
      {% assign resultURL = result.url %}
      {% assign thumbURL = result.images[0] | product_img_url: '1024x1024' %}

      { "value":"{% include 'json_cleanup' with result.title %}",
        "label":"{% include 'json_cleanup' with result.title %}",
        "url":"{% include 'json_cleanup' with resultURL %}",
        "thumb":"{% include 'json_cleanup' with thumbURL %}",
        "id":{{result.id}},
        "price":"{% if result.price_varies %}from{% endif %} {{ result.price_min | money }}"
        {% if result.compare_at_price_min > result.price_min %},"compare_at_price":"{{ result.compare_at_price_min | money }}"{% endif %}
      }{% unless forloop.last %},{% endunless %}
    {% endif %}
  {% endfor %}
{% endcapture %}

{{ output | strip_newlines | prepend: '[' | append: ']' }}

Like this screenshot:

banner

If there is any issue regarding to json_cleanup, go to Snippets/, add a new snippet with name json_cleanup.liquid with the content:

{{ json_cleanup | replace: '\\', '\\\\' | replace: '"', '\\"' | replace:  '/','\\/' }}

Then you can test to search from the browser by paste this URL:

https://YOUR-SHOPIFY-URL/search?view=json&type=product&q=YOUR-KEY-WORD

Example: https://beostore.myshopify.com/search?view=json&type=product&q=man

The output correctly should similar to:

[
{
value: "Sport Jacket in Blue",
label: "Sport Jacket in Blue",
url: "/products/sport-jacket-blue",
thumb: "//cdn.shopify.com/s/files/1/1875/4399/products/2014-08-25_Matt_Look_188_9470c3a5-f2bd-40e2-9530-903ffe3dc4bb_1024x1024.jpg?v=1499074312",
id: 10382915085,
price: " 298₫"
},
{
value: "Sport Jacket in Brown",
label: "Sport Jacket in Brown",
url: "/products/sport-jacket-brown",
thumb: "//cdn.shopify.com/s/files/1/1875/4399/products/2014-08-25_Matt_Look_150_e2fffd1b-52a5-4cf3-9e49-c7c8cebad203_1024x1024.jpg?v=1499074324",
id: 10382916493,
price: " 298₫"
},