1. Welcome
  2. Activate Responsive Checkout
  3. Theme Installation
  4. Error in Installation
  5. Theme Settings
  6. Page Background
  7. Fonts
  8. Logo and Favicon
  9. Navigation
  10. Homepage
  11. Collection Page
  12. Product Page
  13. Product video
  14. Product Reviews Integrated
  15. Blog Page
  16. Contact Page
  17. Cart Page
  18. Translations
  19. FAQs Page
  20. Mailchimp Popup
  21. Get Mailchimp Form Action
  22. Get embedded code from Youtube
  23. Get embedded code from Vimeo
  24. Get embedded code from Soundcloud

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:

2. In your backoffice go to: YOUR STORE > THEME . At Unpublished themes section:

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:

In your Customize theme:

If you want to change the theme's codes, please choose Edit HTML/CSS:

Page Background

Page Background

Page Selector


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?

Logo and Favicon

Site Logo

You can set logo with image or text



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.

Collection Page

Product Page

Product video

Product Reviews Integrated

Blog Page


Cart Page


Here's a quick way to change some of the more commonly text

FAQs Page

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.


To complete this tutorial, you will need:


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?