Getting Started

Thank You for purchasing The Goodwin theme. If You have any questions that are beyond the scope of this documentation, please feel free to submit ticket to http://help.big-skins.com/ Thanks so much!

Best Regards from Bigsteps team!

Why Shopify?

Shopify provides You with a variety of tools to help You set up and run Your business. Depending on the plan that You choose, You can find everything You need to showcase Your products online, to process payments, and to make Your store work for You. Shopify offers:

  • Free and paid themes from the Shopify Theme Store to make Your store stand out and look great
  • Free and paid apps from the Shopify App Store to expand on the existing functionality of Your store
  • Shopify's own payment gateway to accept credit card payments
  • Growth opportunities with Shopify's various sales channels as well an enterprise plan for merchants who are selling in high volume and might be feeling the effects of accumulating transaction fees
  • A Shopify blog that has guides and articles about running Your store and connecting with Your customers
  • Experts all around the world that can help You set up, design, and market Your store

Useful manuals

How to install Shopify?

Shopify is web based ecommerce software. This means there’s no installation required and it works with all operating systems (including Windows and MacOS)! Shopify hosts the site itself so You don’t have to worry about installing, upgrading or maintaining any software or web servers. Go here to install shopify

Goodwin Installation & Update

1st - Make sure that You've installed shopify
2nd - You need to have the latest Goodwin package from themeforest

Theme Install

1. Login to Your shopify store. Go to Online Stores -> Themes.



2. Click Upload Theme



3. Browse local Goodwin theme zip package and upload it



4. Click Publish


5. Congratulations! You have installed theme successfully! You can check it on the frontend of Your site.

In case if you see such message:

it means that you are trying to upload full package from themeforest.net (TF). Unzip package from TF and you will find goodwin-shopify-theme-v-X-X.zip for uploading on Shopify

Product reviews app

Shopify has no product stars and reviews tab by default:


That is why You have to install special FREE reviews app Product Reviews

Currency Setup

In this section of Your Shopify admin, You can choose which currency Your store uses (for example: USD, EUR, CAD, AUD, JPY):

1. From Your Shopify admin, click Settings:


2. In the Standards and formats section, use the drop-down menu under Currency to select a new monetary unit:


3. Click Change formatting and You will see next

4. Change first to inputs to:

1
2
3
//copy lines from here
<span class="money">${{amount}} USD</span>
<span class="money">${{amount}}</span>

Set Your customer account preferences

You can make customer accounts required or optional, or disable them altogether. Keep in mind that requiring customers to create accounts might decrease sales conversions.

To edit Your customer account settings:

  1. From Your Shopify admin, click Settings, then click Checkout.
  2. In the Customer accounts section, choose a customer account option:
    • Accounts are disabled.
      Customers won't see the option to create an account or to login. They'll have to manually enter their details at checkout, because fields won't be pre-filled.
    • Accounts are optional - Choose this.
      Customers can choose to create an account but it's not mandatory for checkout. If customers do have an account and they're logged in, their address fields are pre-filled when they place an order.
    • Accounts are required.
      Customers must have an account and be logged in to place an order. This setting is useful if You're running a wholesale or members-only store, for example. Address fields are pre-filled when the customer places an order.
  3. Click Save changes to confirm Your change to customer account settings.

Theme Update

Variant 1 - reupload theme. This method doesn't save Your own files custom changes:
1. Upload the latest theme package as described in Theme Install
Variant 2 - with DIFF FILE. For advanced users, which want save their custom changes.
Our theme package has svn versions - diff files. You can find them in package/versions_diff_files

In these files You will see smth like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
Index: layout/theme.liquid
===================================================================
--- layout/theme.liquid (revision 109)
+++ layout/theme.liquid (revision 110)
@@ -17,12 +17,12 @@
     <div class="page-wrapper">
         {% include header %}
         <main class="page-main">
-                    {% unless template == 'cart' and  cart.item_count == 0 %}{% include 'breadcrumb' %}{% endunless %}
+                    {% unless template == 'cart' and  cart.item_count == 0 %}{% unless template == '404' %}{% include 'breadcrumb' %}{% endunless %}{% endunless %}
             {{content_for_layout}}
         </main>
-                {% unless template == 'cart' and  cart.item_count == 0 %}
+                {% unless template == 'cart' and  cart.item_count == 0 %}{% unless template == '404' %}
                 {% include footer %}
-                {% endunless %}
+                {% endunless %}{% endunless %}
     </div>

That means that file layout/theme.liquid has been changed.

You need go to Shopify admin -> Online Stores -> Themes and click Edit Code

Click on file layout/theme.liquid in left sidebar

Go to diff file again:

1
2
- {% unless template == 'cart' and  cart.item_count == 0 %}{% include 'breadcrumb' %}{% endunless %}
+ {% unless template == 'cart' and  cart.item_count == 0 %}{% unless template == '404' %}{% include 'breadcrumb' %}{% endunless %}{% endunless %}

.. that means You need to replace the first string with the second one.
- remove the string
+ add the string

Theme Customization

There are 2 ways to customize the theme:

  1. Change theme settings

    Go to Shopify admin -> Online Stores -> Themes -> Customize Theme


    You will see a lot of theme settings You can change.

  2. Change theme files

    You need go to Shopify admin -> Online Stores -> Themes and click Edit Code

How to add custom css?

Complicated customization of the theme requires style changes in css. The theme has main assets/style.css file. You can directly add own changes in that file, but it is a bad way for updates. It will be much easier in the future to simply replace an old style.css with a new updated style.css

That is why we have already created assets/custom.css file (write changes there)

Goodwin Home Pages

Goodwin theme has pre-defined home pages:

Steps to set up any Home page pre-set:

  1. Go to the Theme package that you have downloaded from TF and open folder Home page pre-sets

  2. Open with any text editor, for example, the file electronics-1.json

  3. Copy content of the file electronics-1.json and paste it in the file config/settings_data.json

Setup Navigation

Some of the main features of Goodwin theme are the Header/Mobile Navigations.

You can use our sections constructor for creating an exclusive style with columns or simple dropdowns, previews etc OR simply for assigning navigation that you have created before. We enable you to choose the megamenu constructor or using default shopify navigation (for example if you want to use simple dropdowns and you have already created navigation).




1. Default Shopify navigation usage

It is useful if you want to have a classic style with simple unlimited dropdowns and you don't want to re-write an old navigation just for the theme again. You can find the info on how to build the simple navigation with Shopify tools in the official source at https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links/drop-down-menus

After having created the navigation successfully, you have to assign it in the header section




2. Megamenu usage based on the sections.

1. Select None in the default navigation.

2. You need to click in Header at the bottom 'Add content'


Next dropdown can be added by clicking 1


Next dropdown can be added by clicking 2


Next dropdown can be added by clicking 3



Megamenu allows you to add the left/right/top/bottom html content, banners from our banners generator and assign navigation columns (one classic navigation equals to one column in the dropdown)

Product

You can read how to add/update the product in the official shopify article at https://help.shopify.com/manual/products/add-update-products

Unlike old Shopify, new Shopify product settings are visible when you click on some item in the right window(iframe).





Following the latest trends in the market of online stores, we made three versions of the grocery page:

  1. Default (classic) you can see here
  2. Advanced (pro) you can see here
  3. Trend (modern) you can see here

Any layout can be selected in one click.





Product Countdown

Instead of pasting shortcodes like in many other themes directly in product content, we have decided to use the native Shopify tool - metafields. One of the main reasons was to separate bonus features from the product content area. Users often complain that there are strange shortcodes in the content of their products. Therefore, google rich snippets receive bad product content.

Steps to turn on the countdown of the product:

  1. If you haven't installed an app to work with shopify metafield yet then install Metafields Guru app to work with
  2. Open any product in the admin panel
  3. Open More Actions dropdown and click Edit Metafield

  4. Metafields Guru page for this product will be opened:

  5. Click Create Metafield button
    • Fill c_f in the field 'namespace'
    • Fill countdown in the field 'key'
    • Fill 2019/12/31 in the content (bottom) field

  6. Click Save button to save metafield
  7. Return to the product page
  8. Fill the field 'Compare at price'


    Important! If Compare Price is empty Countdown will not be shown

  9. Apply the tag sale to the product to make the tags collection filter work accurately

New/Sale Labels


How to add a new label:

1. Go to Shopify admin -> Products -> Products

2. Choose any product and Click

3.Set product tag new


4. Click Save


How to add a sale label:

1. Go to Shopify admin -> Products -> Products

2. Choose any product and Click

3. Add Compare Price


4. Click Save


Product Video



Goodwin theme supports mp4 video format, you have to upload the video to the server, copy the link and paste in the product image ALT attribute.



Product Video

Instead of pasting shortcodes like in many other themes directly into product content, we have decided to use the native Shopify tool - metafields. One of the main reasons was to separate bonus features from the product content area. Users often complain that there are strange shortcodes in the content of their products. Therefore, google rich snippets receive bad product content.

Steps to turn on the video of the product:

  1. If you haven't installed an app to work with shopify metafield yet then install Metafields Guru app to work with
  2. Open any product in the admin panel
  3. Open More Actions dropdown and click Edit Metafield

  4. Metafields Guru page for this product will be opened:

  5. Click Create Metafield button
    • Fill c_f in the field 'namespace'
    • Fill video in the field 'key'
    • Fill https://www.youtube.com/watch?v=_9VUPq3SxOc in the content (bottom) field
      copy youtube url directly from browser address bar
    • * View source code button must be checked!

  6. Click Save button to save metafield

Product / Short Description

Instead of pasting shortcodes like in many other themes directly into product content, we have decided to use the native Shopify tool - metafields. One of the main reasons was to separate bonus features from the product content area. Users often complain that there are strange shortcodes in the content of their products. Therefore, google rich snippets receive bad product content.

Steps to turn on the description of the product:

  1. If you haven't installed an app to work with shopify metafield yet then install Metafields Guru app to work with
  2. Open any product in the admin panel
  3. Open More Actions dropdown and click Edit Metafield

  4. Metafields Guru page for this product will be opened:

  5. Click Create Metafield button
    • Fill c_f in the field 'namespace'
    • Fill introtext in the field 'key'
    • Fill Neque porro quisquam labore in the field 'value'
      also you can write any html/css here
  6. Click Save button to save metafield

Product / Custom Html Block



It is a global html block for each product.

Disable / enable / change here:


Product Tabs

Unlike other themes this one have sections based tabs. It means that you can add/sort tabs as you want.



Also, You can make custom tabs for each product individually.

1. Click Add Content/Tab metafield:



2. Choose any metafield from selectbox



3. Fill values for choosed metafield

Steps to full values for custom tab metafields:

  1. If you haven't installed an app to work with shopify metafield yet then install Metafields Guru app to work with
  2. Open any product in the admin panel
  3. Open More Actions dropdown and click Edit Metafield

  4. Metafields Guru page for this product will be opened:

  5. Click Create Metafield button
    • Fill c_f in the field 'namespace'
    • Fill custom_tab_title_1 in the field 'key'
    • Fill Custom Tab Title 1 in the content (bottom) field
      key custom_tab_title_N, where N is integer number from 1 to 10
  6. Click Save button to save metafield
  7. Click Create Metafield button
    • Fill c_f in the field 'namespace'
    • Fill custom_tab_content_1 in the field 'key'
    • Fill Content for Custom Tab 1 in the content (bottom) field
      you can write any html/css here
      key custom_tab_content_N, where N is integer number from 1 to 10
      N for title and content must be the same
  8. Click Save button to save metafield

BONUS: If you want to disable all the tabs for certain product individually then fill in metafield with namespace/key/value c_f/notabs/yes

How to create colorized product

Product can be colorized only if it has a color option.

How to do it :

1. Go to Shopify admin -> Products

2. Choose any product and Click

3. Add product variants


3. Change Size to Color or click Add another option (Color)


4. It is possible to add images for options once the option values have been saved.


5. Final step. Upload color pics.

Important! Save image name only in downcase format 'color-yourcolorname.png' (use symbol "-" in yourcolorname instead of spaces)

For example, You have color name in admin product option 'Dark Black', then upload color-dark-black.png


Important! Prefix color- is required! Use only PNG format.

Collection

Real actions can corroborate our words when speaking about flexible collection

Useful features of the Goodwin's collection page:

  1. Collection is based on the sections




  2. Sidebar filter has UNLIMITED groups of filter tags. Each collection shows own set of filter groups (filter recognizes the tags assignment in the current collection).



    Each filter group has four view styles:color pics, sizes, list, banners pics




Setup sidebar filter

Sidebar filter is based on tags. Tags must be assigned for products according to own criteria.


Product has tags:Sim 1, electronics, Andriod, Acer, Above 200, 4

If you click on some tag on sidebar filter the module starts to search for all products with the chosen tag.

Q:How sidebar filter divides into logic groups?

A:You have to do it yourself:

Go to Shopify admin -> Online Stores -> Themes -> Customize Theme -> Click on any collection link on window on the right


Add filter group


Example shown beneath has been made on demo in filter groups:



Available options for filter group:

  • Enable - type checkbox. Default checked
  • Title - type text. Title of the group

  • Tags - type textarea. Tags, separated by comma

  • Closed by default - type checkbox. Default unchecked. Is applicable only for NOT accordion mode.
  • Style - type selectbox. Available values: List(default) / Sizes / Pics / Tags

    Color Pics

    List

    Sizes

    Banner pics


    if you use Pics style you have to upload pics here Shopify admin -> Settings -> Files -> Upload Files


    Upload special format of file name color-{{tagname}}.png

    For example, You have filled the tags in the group: Black, yellow, Dark-blue. You need to upload files color-black.png, color-dark-blue.png, color-yellow.png with 25x25 px size

Collection Products Grid

Go to Shopify admin -> Online Stores -> Themes -> Customize Theme -> Click on any collection link in right window



Blog

Full info is available in the official shopify doc at https://help.shopify.com/manual/sell-online/online-store/blogs

Your Shopify store comes with a built-in blogging engine. Blogs are great for the content that you’ll be updating regularly. They’re also the best if you want to encourage the feedback under the blog. Choose to post on your store’s blog if you’re looking to create a discussion and build a community around your products and your brand.

Demo Example of Goodwin Blog List + Sidebar

We have made useful options for the blog page and post page. Independent width for the blog/post. Enable/disable the sidebar for the blog/post, posts count per page.

Slider

Create as many sliders per one page as you want and place them in any place of your home page content area.

Desktop preview


Mobile preview

You can discover an amazingly powerful section slideshow using our theme.

Our slider consists of animations, youtube videos, unlimited slides, height option, width option, a lot of options. Use your imagination and create the dream slider with easy-to-use tools on the admin panel. Or apply pre-defined slides from our demo.

How to set up slider:

Add new section Slideshow

You can see general main settings of the slider such as width(fullwidth, boxed, global site width), auto-rotate, rotation speed, slider height (small, medium, fullheight)

Two demo slides are created automatically. You can remove them or alter.

How to set up slide:

Click Add slide

Upload slide image, each slide must have the same width and height.
For example, we have uploaded slides 1920x820 px in our demo
Top / Middle / Bottom
None / Use slide image with play button / Background video with play button /
Background video without play button
New Page / In current page

If checked then only button will be a link, if unchecked then full slide will be a link
Left / Center / Right
75+ animations
Design and animate 3 captions per slide
Left / Center / Right
Top / Middle / Bottom
75+ animations
Use parent alingment / Left / Center / Right
Thin / Light / Regular / Semibold / Bold / Black
Extra Small / Small / Medium / Large
for advanced users, this css will be assigned to caption 1
the same options are for the caption 2,3

Newsletter

If you use default shopify subscription:When someone signs up for your newsletter, their email address is added to the "accepts marketing" customer list. This can be seen in the Customers section on the left side of your Shopify admin

Create Contact Us page

1. Login to Your shopify store. Go to Online Stores -> Pages.

Next



2. Click Add page



3. Choose template page.contact, write Page Title Contact Us and click save

Click Save

You have created your 'Contact Us' page. You can add the Contact page to any navigation.

Next step edit Contact Page:

1. Go to Online Store



2. Click Customize



3. Find and click Contact us from navigation



4. Edit Contact us section

Create About Us page

1. Login to Your shopify store. Go to Online Stores -> Pages.

Next



2. Click Add page



3. Choose template page.about-us, write Page Title About Us and click save

Click Save

You have created your 'About us' page. You can add the 'About us' page to any navigation.

Next step edit 'About us' page:

1. Go to Online Store



2. Click Customize



3. Find and click About Us from navigation



4. Edit About Us sections

Create Gallery

1. Login to Your shopify store. Go to Online Stores -> Pages.

Next



2. Click Add page



3. Choose template page.gallery, write Page Title Gallery and click save

Click Save

You have created your 'About us' page. You can add the 'Gallery' page to any navigation.

Next step edit 'Gallery' page:

1. Go to Online Store



2. Click Customize



3. Find and click Gallery from navigation



4. Edit Gallery sections

Create Faq page

1. Login to Your shopify store. Go to Online Stores -> Pages.

Next



2. Click Add page



3. Choose template page.faq, write Page Title Faq and click save

Click Save

You have created your 'Faq' page. You can add the 'About us' page to any navigation.

Next step edit 'Faq' page:

1. Go to Online Store



2. Click Customize



3. Find and click Faq from navigation



4. Edit Faq sections

Banners / Grid Editor

You do not need to know html and css to create advanced banners and bootstrap grids in Goodwin theme.

In order to make your life easier we have created online banners editor.

You can use it at http://frontend.big-skins.com/goodwin-html/banners-generator/

Icons Font

Goodwin Theme uses flexible icon library IcoMoon.

IcoMoon is striving to build and provide the best iconography and icon management tool for perfectionists.

If you want to add new icons to library or replace some icons in the theme with other icons see the video tutorial.

Available icons by default you can see here.

FAQ

2. How to insert responsive YouTube video in the product description

if 16:9 proportion
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="YOUTUBE_VIDEO_URL_FROM_BROWSER"></iframe>
</div>

if 4:3 proportion
<div class="embed-responsive embed-responsive-embed-responsive-4by3">
<iframe class="embed-responsive-item" src="YOUTUBE_VIDEO_URL_FROM_BROWSER"></iframe>
</div>