1. Start
  2. Activate Responsive Checkout
  3. Theme Installation
  4. Error in Installation
  5. Theme Settings
  6. Page Background
  7. Font
  8. Logo and Favicon
  9. Navigation
  10. Header
  11. Slideshow
  12. Homepage
  13. Bottom
  14. Footer
  15. Collection Page
  16. Sidebar in Collection Pages
  17. Product Page
  18. Blog Page
  19. Sidebar in Blog Pages
  20. Contact Page
  21. Cart Page
  22. Wishlist Page
  23. Translations
  24. FAQs Page
  25. Mailing with MailChimp
  26. Mailing with Campaign Monitor
  27. Limited Offers
  28. Mailchimp Popup
  29. Single Product Selling
  30. Tweet to get Discount Code
  31. Product Reviews Integrated
  32. Adding color swatches to your products
  33. Notification Products
  34. Advanced Group Filtering
  35. Vertical Menu
  36. Super Mega Menu
  37. Snow effect for Christmas
  38. Background music playing
  39. Homepage video
  40. Product video
  41. Product item
  42. Ajax Infinite Scroll
  43. Product Description

Queen - Responsive Shopify Theme

Documentation 1.0.5


Thank you for purchasing this theme. If you have any questions or need support, please help me submit a ticket to https://roartheme.ticksy.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 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:

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

Customize theme


To customize this theme's appearance and settings

In your backoffice go to: YOUR STORE > THEME:

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


Finding Google Web Font name

Logo and Favicon


Site Logo

You can create logo with image format or text format.

Favicon

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.

Homepage


Bottom


Collection Page


Product Page


Blog Page


Contact Page


Cart Page


Wishlist Page


Translations


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

FAQs Page


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.

Limited Offers


Single Product Selling


Tweet to get Discount Code


Product Reviews Integrated


Adding color swatches to your products


Notification Products


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 BrandFocal 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


Super Mega Menu


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.

Snow effect for Christmas


Background music playing


Homepage video


Product video


Product item


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

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

Product Description