Queen - Responsive Shopify Theme

Documentation 1.0.6

• Demo: http://demo.roarapi.com/shopify/queen
• Latest Document: http://docs.roarapi.com/shopify/queen
• Created: November 06, 2014
• Latest Update: August 11, 2017
• By: RoarTheme
• Support: http://support.roarapi.com

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:

• http://www.shopify.com/blog/15714308-introducing-responsive-checkout

Theme Installation

Installation Queen 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-queen.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-queen.zip).

Customize theme

To customize this theme's appearance and settings

In your backoffice go to: YOUR STORE > THEME:

• Click: Customize theme

  

In your Customize theme:

• Overview:

  

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

• Overview:

  

Page Background

Page Background

• Go to: Customize theme > Aesthetics > Scaffolding

  

• Edit and Save

Page Selector

• Go to: Customize theme > General > Page Selector

  

• Edit and Save

Fonts

• Go to: Customize theme > General > Fonts

  

• Edit and Save

Finding 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 this words as below image

  

• Go to: Customize theme > General > Fonts > paste into Google Web Fonts field

  

Logo and Favicon

Site Logo

You can create logo with image format or text format.

• Go to: Customize theme > Header > Site Logo

  

• Edit and Save

Favicon

• Go to: Customize theme > General > Favicon

  

• Edit and Save

Navigation

Navigation Settings

• Go to: Customize theme > Header > Navigation

  

• Edit and Save

• Review in front-end

  

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.

Header

• 6 header styles

  To config, please go to Customize theme > Header > Look and Feel > Style

  

  1. Style #1

     

  2. Style #2

     

  3. Style #3

     

  4. Style #4

     

  5. Style #5

     

  6. Style #6

     

• Customer Links

  1. Enabling Accounts

     To enable customer accounts, select Settings > Checkout > Customer accounts. There are three options available, as noted below.

     Go to: Settings > Checkout > Customer accounts

     

  2. Configuration

     Go to: Customize theme > Header > Customer links

     

  3. Review in front-end

     

• Currencies switcher

  1. Go to: Customize theme > Header > Currencies switcher

     

  2. Go to: Settings > General > Standards & formats

     

  3. Review in front-end

     

• Cart info

  1. Go to: Customize theme > Header > Cart info

     

  2. Review in front-end

     

• Search

  1. Go to: Customize theme > Header > Search

     

  2. Review in front-end

     

• Top Message

  1. Go to: Customize theme > Header > Top Message

     

  2. Review in front-end

     

• Edit and Save

Slideshow

• Go to: Customize theme > Slideshow

  

• Edit and Save

• Review in front-end

  

Homepage

• Promotion blocks

  1. Go to: Customize theme > Homepage > Promotion blocks

     

  2. Review in front-end

     

• Frontpage Page Options

  1. Go to: Customize theme > Homepage > Frontpage Page Options

     

  2. Review in front-end

     

• Featured Collections

  1. Go to: Customize theme > Homepage > Featured Collections

     

  2. Review in front-end

     

• Static blocks

  1. Go to: Customize theme > Homepage > Static blocks

     

  2. Review in front-end

     

• Featured Products

  1. Go to: Customize theme > Homepage > Featured Products

     

  2. Review in front-end

     

• Special Offers

  1. Go to: Customize theme > Homepage > Special Offers

     

  2. Review in front-end

     

• Our Partners

  1. Go to: Customize theme > Homepage > Our Partners

     

  2. Review in front-end

     

Bottom

• Featured Products

  1. Go to: Customize theme > Bottom > Featured Products

     

  2. Review in front-end

     

• On Sale Products

  1. Go to: Customize theme > Bottom > On Sale Products

     

  2. Review in front-end

     

• Social widget

  1. Go to: Customize theme > Bottom > Social widget

     

  2. Review in front-end

     

• Contact Information

  1. Go to: Customize theme > Bottom > Contact Information

     

  2. Review in front-end

     

Footer

• Footer Link list

  1. Go to: Customize theme > Footer > Footer Link list

     

  2. Review in front-end

     

• Mailing

  1. Go to: Customize theme > Footer > Mailing List Widget

     

  2. Review in front-end

     

• Social Media Icons

  1. Go to: Customize theme > Footer > Social Media Icons

     

  2. Review in front-end

     

• Payment methods

  1. Go to: Customize theme > Footer > Payment methods

     

  2. Review in front-end

     

Collection Page

• Go to: Customize theme > Collection Page

  

• Edit and Save

• Review in front-end

  

Sidebar in Collection Pages

• Go to: Customize theme > Sidebar in Collection Pages

• Review in front-end

  

Product Page

• Product Image Zoom

  • Go to: Customize theme > Product Page > Misc > Behavior for main product image > choose Zoom

    

  • Review in front-end

    

• Product Image Lightbox

  • Go to: Customize theme > Product Page > Misc > Behavior for main product image > choose Lightbox

    

  • Review in front-end

    

• Social Sharing

  1. Go to: Customize theme > Social Sharing

     

  2. Review in front-end

     

• Related Products

  1. Go to: Customize theme > Product Page > Collection Beneath Product

     

  2. Review in front-end

     

• Recently Viewed Products

  1. Go to: Customize theme > Product Page > Recently Viewed Products

     

  2. Review in front-end

     

• Sale off logo

  1. Go to: Customize theme > Product Page > Sale off logo

     

  2. Review in front-end

     

• Product Reviews

  1. Go to: Customize theme > Product Page > Product Reviews

     

  2. Review in front-end

     

Blog Page

• Go to: Customize theme > Blog Page

  

• To add thumbnail, go to Blog Posts > choose your article > add your image into Excerpt

  

• Review in front-end

  

Sidebar in Blog Pages

• Go to: Customize theme > Sidebar in Blog Pages

  

• Review in front-end

  

• Edit and Save

Contact Page

• Creating or opening up your Contact Us page

  

• Adding some content to your Contact Us page (or not)

  

• Assign the page.contact.liquid template to your Contact Us page

  Go back to your Contact Us page in your shop admin.

  Select 'page.contact' in the Template drop-down like so:

  

• Go to: Customize theme > Contact Page

  

• Edit and Save

• Review in front-end

  

Cart Page

• Go to: Settings > Cart Page

  

• Edit and Save

• Review in front-end

  

Wishlist Page

• Create Wishlist Page

  Go to: Pages > Add page with Handle wish-list and Template page.wishlist

  

• Go to: Customize theme > Wishlist Page

  

• Edit and Save

• Review in front-end

  

Translations

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

• Go to: Themes > Edit language

  

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

  

• Save

• Review in front-end

  

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:

• 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.

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:

• A Campaign Monitor account.
• A Campaign Monitor list (to learn all about lists in Campaign Monitor, click Support from the Campaign Monitor homepage, then scroll down and click Getting Started.)
• A Shopify Theme that integrates with Campaign Monitor (it has a Campaign Monitor Form Action theme setting.)

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.

Limited Offers

• Go to: Customize theme > Limited Offers

  

• What is a product handle?

• Save

Mailchimp Popup

• Go to: Customize theme > Extentions > Popup Mailchimp

  

• Where do I get my MailChimp Form Action?

• Save

Single Product Selling

• Go to: Customize theme > Homepage > Single Product Selling

  

• Review in front-end

  

Tweet to get Discount Code

• Create Discount Confirmation Page

  Go to: Pages > Add page with Template page.discount

  

• Go to: Customize theme > Product Page > Tweet to get Discount Code

  

• Edit and Save

Product Reviews Integrated

• !!! IMPORTANT: You must install Product Reviews app before modifying these settings.

• Go to: Customize theme > Product Page > Product Reviews

  

• Review in front-end

  

• Save

Adding color swatches to your products

• When you have completed the steps in this tutorial, the color options of your products will appear as clickable swatches on your product pages

  

• Also, you can config for the size options of your products

  

• To config, please go to: Customize theme > Product Page > Misc

  

• Upload your color images

Notification Products

• Go to: Customize theme > Extensions > Notification Products

  

• Save

• Review in front-end

  

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 Brand, Focal Length, and Resolution
   
   
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_Canon, Focal Length_18 - 55mm, and Resolution_12 MP.
   
   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"
   
   
   

Vertical Menu

• Go to: Customize theme > Homepage > Vertical Menu

  

• Save

• Review in front-end

  

Super Mega Menu

• Go to: Customize theme > Header > Mega Menu

  

• Save

A menu has 2 options: Full-width: check this will force the menu in full width. Otherwise, the width fits the content of the menu only.

• Full-width: check Full width field

  

• Otherwise: un-check Full width field

  

• Background image: you can select the background for the menu here. The image is on the right by default.

  

Snow effect for Christmas

• Go to: Customize theme > General > Use snow effect?

  

• Save

• Review in front-end

  

Background music playing

• Go to: Customize theme > General > Use music (only homepage)?

  

• Save

• Review in front-end

  

Homepage video

• First:

  In Admin, go to Settings > Files and click Upload files to upload your video.

  

  After upload, you must copy the video URL.

• Next:

  Go to Customize theme > Video > Video link > paste your video URL

  

• Save

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:

  How to get embedded code from YouTube?

  1. 1. Click the Share link under the video.

     

  2. 2. Click the Embed link.

     

  3. 3. Copy the code provided in the expanded box. This is the embedded code.

     

  How to get embedded code from Vimeo?

  1. 1. Click the Share icon on the video.

     

  2. 2. The embedded code is in the Embed section. Just copy it.

     

• Review in front-end

  

Product item

Have 3 styles for product item. To config, please go to Customize theme > General > Miscellaneous > Wrapper product item > Style

• Style #1

  

• Style #2

  

• Style #3

  

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.

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

• Called automatic

• Called manual

Product Description

• Go to: Products > choose your product and press Show HTML

  

• Go to: http://demo.roarapi.com/shopify/others/description3

• Press: Add Tab button to add new tab for description

  

• Press: General Description button to general new html code

  

• Copy your new html code and Paste to your product page

  

• Save