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. Super Mega Menu
  11. Top
  12. Header
  13. Homepage Slideshow
  14. Homepage Video
  15. Homepage
  16. Footer
  17. Collection Page
  18. Advanced Group Filtering
  19. Ajax Infinite Scroll
  20. Product Page
  21. Product video
  22. Tweet to get Discount Code
  23. Product Reviews Integrated
  24. Blog Page
  25. Blog sidebar
  26. Contact Page
  27. Cart Page
  28. Translations
  29. FAQs Page
  30. Lookbook Page
  31. Mailing with MailChimp
  32. Mailing with Campaign Monitor
  33. Mailchimp Popup
  34. Get embedded code from Youtube
  35. Get embedded code from Vimeo
  36. Get embedded code from Soundcloud

LIGHT - 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.roartheme.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 Light 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-light.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-light.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

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?

Logo and Favicon


Site Logo

You can set logo with image or text

Favicon

Super Mega Menu


Basic settings

Top


Slideshow


!!! IMPORTANT: We recommend you using 1380-pixels-width images for Full width placement, and 1140-pixels-width for Within container placement. Please note that all images must be the same dimension - for best displaying. Our demo is using 1380x600 pixels images.

Basic settings

Advanced settings

This theme comes with a very flexible Slideshow. So, you can personalize it as much as you can:

Homepage Video


!!! IMPORTANT: You can only use either video or slideshow at a time. If both are selected, only slideshow is enabled

Upload Video

Homepage


Collection Page


How to enable advanced group filtering


So you have a lot of products and want to enable sub groups for your users to sort through. Follow the steps below to enable advanced group filtering like the image below.

  1. Define your groups. In the image above, the groups are BrandColor, and Price

  2. Export your products into a CSV file.
    (If you are creating new products, you can skip this step)



  3. Prepend all existing tags with what group you want them to be in, with the format Group_Tag Name

    Based on our image at the top of this page, we would have tags like Brand_Prada, Color_Black, and Price_200$ - 300$.

    The left side of the underscore is the group name, and the right side is the tag for the product. Spaces can be included on either side of the underscore.

  4. Save your .csv file and import the products back into your store.

    Make sure you check "Overwrite existing products that have the same handle" when uploading the file to prevent duplicate products from being created.

  5. Enable "Filter by groups" in your theme settings under "Collection Page"


Ajax Infinite Scroll


Besides using Shopify's default paging, you can also use our infinite scroll module. Infinite scroll has been called automatic or manual. This helps users browse your store without re-loading the page when you have many products

To config, please go to Customize theme > Collection Page > Look and Feel > Infinite Scroll

!!!NOTE: In automatic mode, the Load More button is not displayed. The next products will be loaded when scrolling to the bottom of the page. Otherwise, you have to click Load More to view next products. In both cases, the page is not reloading. The loading indicator is displayed while the next products are being loaded

Product Page


Product video


Tweet to get Discount Code


Product Reviews Integrated


Blog Page


Contact Page


Cart Page


Translations


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

FAQs Page


What is lookbook page?


Understanding the structure

Setting up the lookbook

Mailing with MailChimp


Where do I get my 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:

				

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.

Mailing with Campaign Monitor


Those themes contain a theme setting called Campaign Monitor Form Action or something similar. The Campaign Monitor form action is the only piece of information the theme needs to hook up its signup form to your Campaign Monitor account.

Requirements

To complete this tutorial, you will need:

To obtain the code for your Campaign Monitor Form Action:

1. Log into your Campaign Monitor account.

#

2. Click the Lists & Subscribers button in the top navigation bar.

#

3. Click the subscriber lists as you like.

#

4. Choose Grow your audience in the right navigation bar.

#

5. Click on Copy/paste a form to your site.

#

6. Scroll down and click Get the code.

#

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?