FIRSTLOOK - Responsive Shopify Theme
Documentation 1.0.1
Thank you for purchasing this theme. If you have any questions or need support, please help me submit a ticket to http://support.roarapi.com
This theme is designed to use with Shopify only.
This documentation is made with Documenter
Activate Responsive Checkout for your Shopify store
This theme is compatible with Responsive Checkout, and the Responsive Checkout is enabled only when the store is updated.
This theme requires the store to be upgraded before installing.
1. To active Responsive Checkout for your Shopify store, please go to Settings > Checkout and click Upgrade:
2. Learn more here:
Theme Installation
Installation Firstlook Theme is easy and quick.
If you already had the Shopify site and want to apply the theme to your site, follow the instruction below:
Download: rt-firstlook.zip
1. In your backoffice go to: YOUR STORE > THEME:
-
Click: Upload a theme
-
Click: Upload
2. In your backoffice go to: YOUR STORE > THEME . At Unpublished themes section:
-
Click: Publish
Error in Installation
If you have error as below:
This happens when you are trying to upload the incorrect .zip to Shopify. 99% of the time this happens when the folder that was downloaded from Themeforest was NOT unzipped beforehand.
Within the folder there are 4 items – Readme.txt, Changelog.txt, Documentation folder and Packages folder. The file you have to upload to Shopify is a .zip file in Packages folder (rt-firstlook.zip).
Customize theme
To customize this theme's appearance and settings
In your back-end go to: YOUR STORE > THEMES:
-
Click: Customize theme
In your Customize theme:
-
Overview:
If you want to change the theme's codes, please choose Edit HTML/CSS:
-
Changing source code:
Page Background
Page Background
Page Selector
Fonts
This theme support Google Web Fonts (500+ free fonts and more). To use this feature, all you have to do is putting the Google Font names exactly
How to get a Google Web Font name?
-
Go to: https://www.google.com/fonts
-
Find your font in search field on the left hand
-
Click Quick-use button
-
Scroll to 4. Integrate the fonts into your CSS section, and only copy the words as below image
-
Go to: Customize theme > General > Fonts > paste into Google Web Fonts field
Logo and Favicon
Site Logo
You can set logo with image or text
Favicon
Navigation
Navigation Settings
Creating Dropdown Menu
-
For every link we wish to connect to a sub-menu, we'll create a link list that will have the same name as said (parent) link. Say what? Let's take an example. A typical Main Menu in Shopify contains the following links:
-
Say we wanted to include a link called Shop:
-
And we wanted that link to become a drop-down sub-menu listing the brands in our shop, with links to vendor collections. Then what we'd do is create a link list called Shop:
-
Again, make sure that the name and handle matches what you have chosen for the parent link:
-
And we'd fill up that link list with links to our vendor collections:
-
To turn any link of our Main Menu into a 'parent' link, create a 'child' menu for it using the name of your parent link.
Now, time to make our theme smart.
Homepage
This theme is using a "cover style" for homepage. If you take a look on homepage, you can see it just like a cover. The panel on the left is the Header of the theme, while the one on the right is the Homepage content.
Product Page
-
Social Sharing
-
Go to: Customize theme > Social Config > Social Sharing
-
Related Products
-
Go to: Customize theme > Product Page > Collection Beneath Product
Product video
-
In Admin, go to product you want > Images and edit ALT value of the Featured image:
What you need to paste here is the embedded code from common video networks such as Vimeo, YouTube...
- See more:
Click here to see how to get embedded code from YouTube
Click here to see how to get embedded code from Vimeo
-
Review in front-end
Product Reviews Integrated
Translations
Here's a quick way to change some of the more commonly text
FAQs Page
-
Create FAQs Page
Go to: Pages > Add page with Handle faqs and press Show HTML
-
Go to: http://demo.roarapi.com/shopify/others/faqs
-
Press: Add FAQ button to add new FAQ
-
Press: General FAQ button to general new html code
-
Copy your new html code and Paste to your FAQs page
-
Review in front-end
How to get Mailchimp Form Action?
Those themes contain a theme setting called MailChimp Form Action or something similar. The MailChimp form action is the only piece of information the theme needs to hook up its signup form to your MailChimp account.
Requirements
To complete this tutorial, you will need:
- A MailChimp account.
- A MailChimp list (to learn all about lists in MailChimp, click Support from the Mailchimp homepage, then scroll down and click Getting Started.)
- A Shopify Theme that integrates with MailChimp (it has a MailChimp Form Action theme setting.)
If you're using a mobile device, the screenshots in these instructions might not be entirely accurate. If you can't see MailChimp menu options at any time, try clicking the More button at the top left of the screen.
To obtain the code for your MailChimp Form Action:
1. Log into your MailChimp account.
2. Click the Lists button in the left navigation bar.
3. Click the drop-down box on the right, and choose Signup forms.
4. Choose Embedded forms.
5. On the Embedded form code page, click on Naked.
6. Scroll down and locate Copy/paste onto your site.
7. Double-click anywhere in the box to select the code.
8. Copy the code to your clipboard (use CMD-C for Mac or CTRL-C for Windows).
10. Paste the code into any text editor so that you can view it.
11. The only line of this code that you need is the action attribute value in the opening form tag. Reading from the top of the code, it's located between the second set of quotation marks. Don’t select the quotation marks themselves, just what's inside
them.
Copy the selected action attribute value to your clipboard.
12. In a new tab, open up your shop admin.
13. From your shop admin, click Themes to go to your Themes page.
14. Click on the Customize theme button.
15. Now you need to locate the MailChimp form action field in the Customize theme. It might be called Mailchimp form action URL, or MailChimp Form Action, or similar. Its location varies from one theme to another, but it's
most likely to be in the header, footer, or home page section.
16. Paste the action attribute value into the MailChimp form action field. In the Your theme, the field looks like this:
17. Save your changes.
18. Test things out by subscribing to your own MailChimp newsletter.
How to get embedded code from YouTube?
How to get embedded code from Vimeo?
How to get embedded code from Soundcloud?
