Shopify theme documentation by “BeoCode”


“BeoShop - Responsive Shopify Theme”

Created: Feb 1st, 2018
By: BeoCode

Thank you for purchasing our Shopify theme. If you have any questions that are beyond the scope of this help file, please feel free to ask us any question on our support website.


Intro

Use any theme Preset as a starting point and then make it your own with an array of design options that let you customize branding, colors, typography and more... without any code. Start editing options in 'Theme Customizer' to further customize the look, to match your branding and anything your store needs.

Everything in 'Sections' and 'General Setings' tabs is placed from the top of the website to the very bottom (from header to footer) so you can logically go over the Theme Settings and set up one by one feature. Do not worry it is pretty easy and will only take a few minutes.

Using 'Sections' you can drag and drop widgets and rearrange homepage any way you like. Go to other pages, collections, product pages to drag and drop - rearrange widgets on those pages.

Our theme also offers many Shortcodes giving you options to place widgets (product carousels, sliders etc) on ANY Shopify page using regular Shopify admin.

TIP: When you make changes in Theme Customizer, in case you do not see the changes on Home page (or any other page), please try refreshing the page one more time, or go back to the admin and 'Save' again. Shopify is sometimes "slow" when applying changes.
In Theme Customize screen, some 'Sections' widgets are not fully rendered when change is applied, so it is always better to check the store preview (or refresh the whole Theme Customize page so changes are visible).


Basic Installation

To install the theme, log in to your Shopify store and go to the 'Themes' at the bottom of the left side menu. From there, click on 'Upload a theme' and upload the BeoShop_v1.1.1.zip file from the downloaded folder included with this package. Be sure to unpack the main zip you have downloaded since it contains Documentation files as well. Upload ONLY BeoShop_v1.1.1.zip!

Then you need to hit the 'Publish' button next to uploaded theme.

If your store is currently live and using a different theme, you'll probably want to temporarily password protect it while you switch themes and configure settings so that your site doesn't appear broken to visitors.


Theme Preset - top

Choose one of the following preset and adapt anything in 'Theme Customizer' from that point on:

  1. Default
  2. more to come...

Go to our demo store to see starter color combinations. Any combination is possible, you can play around with settings.

NOTE: Changing to another preset later will not only change the main colors but all other Customizations you may have done (this is how Shopify themes works), so please choose the Preset at the begining of your customizations and make changes further.

Every time you set something on Theme Settings page, be sure to hit the 'Publish Changes' button on top.


Theme update- top

Updating your theme is easy and does not require much time. Please take a look at the tutorial below:

 


Colors & Typography- top

You can easily change colors of any block you see on your Shopify store. Start from the Settings we explained in this section and for more detailed customization find the appropriate block under 'Colors' and change the colors, fonts, features etc.

Colors

In this section you can adjust primary and secondary theme colors, main text and links, top bar, header, navigation and footer colors.

Next to each color there are clear explanations of what effect you will get by changing any color.

Typography

In this section you can adjust base font styles for the body and also for headings, main navigation and slides.

Also, this is a place to change font used for icons across the store.

You can choose from variety of hand picked fonts, both regular web fonts and Google fonts.

You can add ANY Google font by checking 'Use Custom Google Font instead' and typing just the font name you would like to use. How to find Google Fonts? Click here.

Icons set

Choose the font set to be used across the store. Go to these pages to see the icons and grab the code for banner etc, were needed (in sections and shortcodes): FontAwesome Icons | Linear Icons


Layout Settings- top

Enable or disable Boxed layout as seen on our demo store. In case you use boxed layout, upload your own image for the site background or set background color.

You can set default layout for static page, blog, product page, collection etc under one place. It can be set to fullwidth, left or right sidebar etc. You can override these deafault settings on each new product, collection, blog, static page etc in Shopify admin..


Page Layout Defaults- top

You can set default layout for static page, blog, product page, collection etc under one place. It can be set to fullwidth, left or right sidebar etc. You can override these deafault settings on each new product, collection, blog, static page etc in Shopify admin..


Header, Pre-footer and Footer can be set up under Sections tab. In each of them, you can use drag-and-drop to rearrange widgets.

Pre-footer section spreads full store width and each Footer widgets leaves you options to set widgets in columns (check images below).

Wish List header button

Enable or disable Wish List button. It will only show if Wish List page is setup as well. Check out how to set up Wish List page in order to use Wish List on your store front.

Social Icons

Add a link to your social account page under 'Social and Sharing' under General Settings tab and show them using approprite widget. You can choose from Twitter, Facebook, Pinterest, Youtube, Flickr, Vimeo...

Custom payment icons

In case you do not want to use theme icons, you can add your own payment icons to footer. Just go to Theme Settings > Footer and find the options to upload your own images and set them up.

Instagram and Twitter widget

Add a link to your social account page under 'Twitter and Instagram' under General Settings tab in order for Instagram and Twitter widgets to show feed. Without it, you will not see feeds after placing the widgets.

Newsletter

Shopify do not offer Newsletters, but you can sign up for free at Mailchimp and connect your account to receive newsletters. You can add new MC form for each widget.

Check out how to find Mailchimp form action in order to use Wish List on your store front.


Main navigation will be already set up on your Shopify Navigation admin page and it is called 'Main Menu'. Edit that menu to change links.

HOW TO SET UP SUB-MENUS:
Shopify can accomodate up to 3 menu depths/levels. In order to show sub menus, you need to create another menu for each lmenu item/ink that will have submenu.

Example links in 'Main Menu' menu: Home | Collections | Blog | etc.

  1. For example, in order to show sub-menu under Collections menu item, simply create another menu with handle 'Collections' and add links.
  2. Do the same for the next level (example: if you have category called Shoes, create another menu with handle 'Shoes' and then add links such as 'Men', 'Women' etc. - please check screenshots below).
  3. Repeat for next level sub-menu (for example if Shoe menu have item called Men and you want to add sub-menu for it).

HOW TO ADD NAV TO BRANDING AREA (next to logo and search): Go to 'Sections' in admin and under 'Header' tab check or un-check 'Use navigation in branding' option.

HOW TO ENABLE/DISABLE STICKY NAV: Go to 'General Settings' in admin and under 'Header' tab check or un-check 'Enable Sticky Nav' option.


Mega Menu

Mega menus can be set up in 'Main Navigation' under 'General Settings' tab in Theme Customize.

You can turn up to 10 menu items to Mega Menu dropdown.

  1. Check 'Enable MegaMenu Item 1-10'
  2. Type in menu item name that should use Mega Menu dropdown. Be sure to type exactly the same name!
  3. Choose page. Content from selected page will show in fullwidth dropdown.
  4. Go to that page and add content using shortcodes (OR first create the page and then select it here). Shortcodes give you option to put any store widget (product carousel, slides, menus etc) into as many columns you want.
  5. You can also use Drag and drop builder to create widgets, if that is more convenient for you. Once enabled, they will show at the end of Sections area one after the other.

Learn more about shortcodes here

Mobile Menu

Mobile menu sub-menus will show links from the 'Main Menu' menu.

If you are using Mega menus - it will show only on desktop view. Mobile nav will show links from the 'Main Menu' sub-menus (set it up as explained here) and hide Mega Menu dropdown content for each menu item.


Sections - Drag & drop- top

TIP: You can show ANY widget (product carousel, static page content, sliders, parallax banners, columns, buttons, popups etc.) using our Shortcodes. All you need is to select 'Page Content' section widget and then, on the selected page, use shortcodes.

Sections gives you full control over sections on homepage and sidebar widgets (also on collection and product page headers). Greater flexibility when customizing your online store. This new feature allows you to easily add or move content on your pages with just a few clicks.

Read an offical Shopify post to learn more about Sections.

Homepage

Read also: Homepage settings

Header area (top bar, branding area and navigation)

Read also: Header and footer

More tutorials

Keep an eye on our support website for more tutorials coming in:

BeoCode support website ›

Or subscribe on YouTube channel:

BeoCode YouTube channel ›

 


Shortcodes generator - top

Using Shortcodes, you can add any widget (columns, slides, parallax banners, buttons, icons etc.) TO ANY PAGE (static page, product page, collection page, blog article etc.) to give it a unique content and create a product landing pages with more info about the products.

 

NEW SHORTCODE GENERATOR

Use this generator, and avoid going into technical details :) No need to read the next chapter

NEW GENERATOR, easy setup using your store collections, pages etc and previews available right away!

  1. Go to your Shopify pages, create a new page, name it Shortcode Generator and select page.shortcodes template.
  2. Go to theme Sections, select this newly created pages and shortcodes generator sections will appear with preview available in the theme preview screen.
  3. Check our video tutorial how to use it (if not clear).

Shortcodes details - top

READ THIS!

There is no need for you to read this section. Just use New shortcode generator explained above and set up each shortcode easily by selecting values and checking live update.

Generic SHORTCODE GENERATOR - for advanced users

This generator can be used for any store. We suggest you use the one above, and easily set it all up. You can skip explanations below as well.

GENERIC SHORTCODE GENERATOR ›

TIP: "Handle" is the last part of blog, page, product or collection url which you can change from page to page (on the bottom of any created page in admin you will find 'Search engine listing preview' and click on 'Edit website SEO' link).

IMPORTANT: Wherever unique ID is needed, please add this atribute (this can be any text or number combination)!

Blog

[bc-blog blog="News" articles="3" thumbnails="true" thumb-size="500x300" template="template 1" comments="true"]

Pull latest posts from one of your blogs. This will show large across the page just like the home page blog section.

Blog small

Pull latest posts from one of your blogs. It will show as a small list. Perfect for sidebar widget or footer widget.

[bc-blog-small blog="News" articles="3" thumbnails="true"]

Button

[bc-button text="Add text here" link="http://www.example.com" style="secondary"]

Add page on any button with a link of your choice. You can use primary or secondary button style.

Popup button

[bc-popup text="Click to see popup" page="faq" style="secondary"]

This is the same as regular button except that it can open a desired in a popup (shw content from linked page).

[bc-collection-links title="Some title here"]

List all collections from you store styled as menu widget.

Collections

[bc-collection action="new collections" class="large--one-third medium--one-half small--one-whole" thumb="500x" template="title below" height="400px"]

[bc-collection action="new collection" collection="bags" image-location="first product" image-url=""]

[bc-collection action="new collection" collection="bags" image-location="first product" image-url=""]

[bc-collection action="end collections"]

Show rows of collection thumbnails with title. Useful for creating sub-colection pages. Add as many collections you want and select columns and template. Useful for creating sub-colection pages.

Columns

[bc-columns action="new columns"]

[bc-columns action="new column" class="large--one-half medium--one-half small--one-whole"]
   Some content here. Add image, text, or even other shortcodes.
[bc-columns action="end column"]

[bc-columns action="new column" class="large--one-half medium--one-half small--one-whole"]
   Some content here. Add image, text, or even other shortcodes.
[bc-columns action="end column"]

[bc-columns action="end columns"]

You can use our Shortcode Generator to easily set up desired width for columns in dropdowns and just copy/paste the result on any page in Shopify admin. Then change content using Shopify editor (add text, links, images, headings, tables etc).

Contact

[bc-contact-form button="Submit"]

Wherever you paste this code - form will show (with default Shopify form input fields). Use it to create contact page for any static page. Of course you can use this in tabs on product pages or using Popup Buttons shortcode anywhere etc.

FAQ

[bc-faq action="new faqs" icon="no"]

[bc-faq action="new faq" question="Who are you?"]
  I am a client.
[bc-faq action="end faq"]

[bc-faq action="new faq" question="Who am I?"]
  We are BeoCode, masters of the code.
[bc-faq action="end faq"]

[bc-faq action="end faqs"]

You can use our Shortcode Generator to easily set up this shortcode, if it looks hard for you to use it (at first). Just add as many faq's as you need, copy/paste the code into any page and then change content in regular Shopify editor (add text, links, images, headings, tables etc).

Full width

[bc-fullwidth action="new fullwidth" bgcolor="yellow" bgimage="http://url_to_your_image.jpg" bgfixed="yes" bgrepeat="no" bgcover="no" height="30px" padding-bottom="30px" padding="100px" wrapper="true"]
  Add content here. It can be text, images, or even other shortcodes.
[bc-fullwidth action="end fullwidth"]

text

Heading

[bc-heading title="Some title here" h1="false"]

In case you are using static page template that will hide h1 heading (page title), you can use this heading. In case you do not want to wrap it in h1 tag, use h1="false".

Icon

[bc-icon plane url="http://wwww.example.com" spin="false" size="2x" class="some-class"]

Choose icons by following these links and copy/paste selected icon names in this field (Use font family set under General Settings > Typography).

FontAwesome Icons - copy just the name without '.fa-' in front

Linear Icons - copy just the first name of the icon, before first comma.

Map

[bc-map location="44.8325702,20.4032193" width="100%" height="420px" id="uniquename" fullwidth="true" zoom="15" address1="Company name" address2="Company street address" address3="Zip and city"] 

In order for maps to works, go to this link to generate the Google Maps API key, then add your API key in 'General settings' under 'Google Map API' section. Also, check the 'Enable Google maps' checkbox.

Menu

[bc-menu menu="Cell Phones" title="Some title here" horizontal="false" list-width="100px" hide-borders="true"]

Display any meny created in the Shopify menu admin section.

Page

[bc-page page="faq"]

You can display content from ANY static page using this shortcode (on any product page, homepage, collections, etc.). You can use shortcodes on those page and they will show in that content any where you place it.

Products

[bc-products title-display="custom" title="Your title" collection="shoes" rows="6" grid="3" carousel="true" id="13445897" thumb-size="500x" crop="true" height="300px" quick-view="true" description="true" reviews="true" hover="second image" zoom="false" button-bg="" link-color="" link-color-contrast="" border-color="" heading-color=""]

Show product grid or product carousel anywhere on your store (static page, collection description, etc.)

 

Products-small

[bc-products-small collection="curling-irons" title="Some title here" grid="3"]

Pull latest products from one of your collections. It will show as a small list. Perfect for sidebar widget or footer widget.

 

Slider

[bc-slider action="new slider" width="800px"]

[bc-slider action="new slide"]
  Slide image 1 here.
[bc-slider action="end slide"]

[bc-slider action="new slide"]
  Slide image 2 here.
[bc-slider action="end slide"]

[bc-slider action="end slider"]

With this shortcode you can show unlimited sliders anywhere on your store.

 

Empty Space

[bc-space height="200px" width="400px"]

Add space anywhere on the page between other shortcodes to style the page better.

 

Tabs

[bc-tabs action="new tabs" id="unique-name-here" look="vertical"]

[bc-tab action="new tab" title="Tab title 1 here"]
  Tab number One
[bc-tab action="end tab"]

[bc-tab action="new tab" title="Tab title 2 here"]
  Tab number Two
[bc-tab action="end tab"]

[bc-tabs action="end tabs"]

With this shortcode you can show unlimited tabs anywhere on your store.

Wrapper

[bc-wrapper action="new wrapper" padding="true" width="100%"]
 Your content here. It can be image, text, or even other shortcode.
[bc-wrapper action="end wrapper"]

This will give you control to make content appear at the page center, without stretching to fullwidth.

Short Description (for product pages)

[bc-description action="new description"]
 Some short description here
[bc-description action="end description"]

This shortcode works on product pages ONLY. If added to product description field, content will show beneath the product title with anchor link to full description below.

Shopify does not offer short description custom field, so this can be useful for showing some product highlight to customer above the fold of product pages.

Use only ONE short description per product page.

Product-video (for product pages)

[bc-product-video video="dQw4w9WgXcQ" source="youtube"]

This shortcode works on product pages ONLY. If added to product description field, video thumbnail will appear amongst the product gallery thumbnails. When clicked on - popup with video will show.

Shopify does not offer video custom field, so this can be useful for showing video for each product.

Use only ONE product-video per product page.

Product-video-2 (for product pages)

[bc-product-video-2 video="108650530" source="vimeo"]

Another video that can be added to product gallery, behaving same as previous shortcode.

Use only ONE product-video-2 per product page.


Landing Pages - top

Use static page to create a page with widgets of your choice and promote ANY products you want. No limitations to page layouts using our Shortcodes (columns, sliders, product carousels, banners, buttons etc.).

You can also use collection pages and turn them into landing pages (for a better permalink control, for SEO purpose). Please read more about it here. There are no limitations to the layout using Shortcodes.


Homepage - top

Sections

Homepage can be set in 'Sections' for easy drag & drop of any element. Just choose widgets you need and rearrange them on the page.

TIP: You can show ANY widget (product carousel, static page content, sliders, parallax banners, columns, buttons, popups etc.) using our Shortcodes. All you need is to select 'Page Content' section widget and then, on the selected page, use shortcodes. This way you will have even more control over the homepage (use content or widgets in columns etc.).

Sidebar on home page

When in 'Theme Customize' click on link in your menu of the store preview, to go to collection page. Then you will see Collection sidebar section in 'Sections'. You can use any widget there, set it up and re-order them.

Left Navigation

You can show vertical navigation next to slider if 'Enable Vertical Navigation' option is enabled (check screenshot below). In this case, slide width will be 2/3 of the page width while navigation wll ocuppy 1/3.

Main Slider

Size Tip: Slider images are actually background css images. So if you make them wide enough they will cover the whole page width. You can create 1980x600px image to make it show nice on widescreen monitors. But the main site width is 1170px so do not make the main section whit info or some text wider than that. To make it look good on tablets and mobile phones as well, we suggest keeping that middle section of your design/image even smaller in the middle, if it have some text that you want customers to see.

In case you are using Image Only slider option, it will just use images (without text over them), adjust the height based on image size and show fullwidth image.

HOW TO ADD VIDEO: Simply enable video (image 3 below), copy embed video url from Youtube, Vimeo etc and paste the code in "Embed video link" input.

Here's how to get embed code from You Tube:

  1. Click Playlists on the left side of your YouTube page.
  2. Click the playlist title you'd like to embed.
  3. Click the Share link.
  4. Click the Embed link.
  5. Copy the embed code that appears in the menu below.
  6. Paste the code into "Embed video link" input in Theme Customize on your Shopify store.

Here's how to get embed code from Vimeo:

  1. Go to Vimeo page of the video you would like to embed.
  2. Hover over the video and you will see little icon for share.
  3. Click on the Share icon.
  4. Click the Embed link.
  5. When popup appears click on "Show options".
  6. Uncheck "Show text link underneath this video."
  7. Copy the code from "Embed" input field
  8. Paste the code into "Embed video link" input in Theme Customize on your Shopify store.


Product Page - top

TIP: You can show ANY widget, in description field (product carousel, static page content, sliders, parallax banners, columns, buttons, popups etc.) using our Shortcodes.

Default layout

Read how to setup default layout for ALL product pages.

To override any specific product use theme templates (read the next chapter below).

Product page template

Default template can be set up in 'Page Layout Defaults' under 'General Settings' in Theme Customize. This template will be used for all new created product pages. By selecting any other template on ay product page, will override this setting.

For each product page you can use any of the these templates (at the bottom of each product page):

  1. Default page (default template be set up in 'Page Layout Defaults' under 'General Settings' in Theme Customize. This template will be used for all new created product pages. By selecting any other template on the product page, will override this setting.)
  2. Left sidebar template (template - product.left-sidebar')
  3. Right sidebar template (template - product.right-sidebar')
  4. Full width grid template (template - product.fullwidth')
  5. Quick vew template (template - product.fullwidth') - DO NOT USE this template. It is used for Quick View only. and will not show store header and footer.

If product have a sidebar, it will show widgets set for product pages (they can be setup under Sections tab in Theme Customizer. Just go to any collection page with sidebar when in Theme Customizer).

Product Page Settings

Complete control over your product page is under 'Product Page' tab in Theme Settings.

Unique Layouts using shortcodes

Using Shortcodes, you can add any widget (columns, slides, parallax banners, buttons, icons etc.) to give it a unique content and create a product landing pages with more info about the products.

Header Options

When you are viewing Product page through Theme Customize - go to Sections and find Product header section.

Product Image Gallery

Image gallery show large image (zoom) on hover and on image click it will oepn the large popup gallery. You can disable the popup gallery under 'Product Image Gallery Effect' select.

Short Description

There are three available options for short text on product pages:

  1. Short description will show text written for SEO (Meta description field on admin Product pages).
  2. Beginning of description text.
  3. If you use shortcode for short description, you can get the code here.

Color Swatches

On product pages you can use color swatches instead of regular simple select field. In order to use it, on theme customize under 'Product page' tab select "Use color swatches" checkbox.

To display colors you need to use variant named 'Color' and set values. Read about variants here.

For the color options you have, you can either let the smartness of the script provide a color for you, or you can upload an image that represents that color. If you want to add colors that are not basic colors such as red, blue, green etc than please upload your own png images (or set some other extension in Theme Customize area as seen on preview below) to be used instead of the colors.

 

Option 1. - ADD SAME COLOR SWATCH IMAGES FOR ALL PRODUCTS:

Be sure to give your image the same names as your color set up on product page, BUT use small case letters, such as purple.png

The way I have gotten my images from my products in my demo shop was to open up each product image on my storefront in the “colorbox” (lightbox) and grab around ~ 35 by 35 pixels section of the product image (or leave it large and it will be shrinked to fit), then save that small screen grab to my desktop, and rename the image.

For example, if you have a color called 'Déjà Vu Blue', then name your image deja-vu-blue.png

Other example, if your color is 'Blue/Gray', then name your image blue-gray.png.

Most simple example, if your color is 'Black', the name your image black.png.

  1. On the Edit HTML/CSS page, locate and click on the Assets folder to reveal its content.
  2. Under the Assets heading, click on the Add a new asset link.
  3. Upload your image.

Repeat steps 2 and 3 until you have uploaded all your images.

 

Option 2. - USE VARIANT IMAGES FOR COLOR SWATCHES:

You can show product variant images as color swatches, in which case you do not need to upload any new images, AND most importantly - THEY WILL BE DIFFERENT for each product. Of course, keep in mind that those are the same images used for product gallery.

 

Payment icons & additional image

You can add up to two buttons below Add to cart button.

When you are viewing Product page through Theme Customize - go to Sections and find Product header section.

You can enable these buttons and select page which content will show in popup window.

Additional buttons

You can add buttons below Add to cart button that will open content from any page in a popup.

When you are viewing Product page through Theme Customize - go to Sections and find Product header section.

You can enable these buttons and select page which content will show in popup window.

You can also show some buttons ONLY if product belongs to certain collection. This can be useful if, for example you want to show one size chart for men shirts and other for women shirts etc.

Tabs & static page content

You can show content from static pages that will appear on product pages.

They can be shown one after the other OR you can use them in tabs.

 

Option 1. - FOR ALL PRODUCT PAGES:

This is useful for placing shipping or terms text accross all products at once.

When you are viewing Product page through Theme Customize - go to Sections and find Product tabs - additional section. Simply select a page you want to show here and tab will be created with all the content from that page. ( DO NOT wrapp headlines in 'Heading 5' tags on these pages or it will create a new tab on the page).

You can also show some tabs ONLY if product belongs to certain collection. This can be useful if, for example you want to show one size chart for men shirts and other for women shirts etc.

 

Option 2. - PER PRODUCT PAGE:

In case you want to show some tab specific to the product yoiu are editing, you can do it by giving the 'Heading 5' to any headline you type in product description editor.Content of the tab will be all text that is below that H5 tag. If another H5 appears below, new tab will be created and text udnerneath used for that tab content and so on.

Please check images below.



TIP: You can also show the content from ANY static page ANYWHERE in description field by using our Page shortcode or Popup button shortcode. This way you do not need to add some uinuque content on all pages, but pull them from one place (for example, size chart).

Please read this tutorial to see how to set up related products.

Product Reviews

You can easily add product reviews to this theme by first installing Shopify's free Product Reviews app or free Yotpo Product Reviews app.

After installment, select the app you are using and 'Reviews' tab will appear on all product pages (for Yotpp Reviews app there are additional steps you need to take, explained below.). No need for any manual code changes, as you may read in the app installation manual.

Theme is already set up to gracefully include theme colors into this review section on front end so be sure to enable 'Use theme colors for reviews' in order to use this feature.

CONNECTING YOTPO REVIEWS APP WITH YOUR STORE:

Please go to the Theme settings and add your code found in the app code.

1. Go to this Yotpo account page and copy the app key (please check images below for more instructions)
2. Go to 'Theme Customize' and paste the code, then Save

You will see the app on your store running and connected to your Yotpo account.

Wishlist

Choose the page you have given Wish List template and enable the use of wish list on your store.

Please check our tutorial on How To Set Up Wish List Page

Up-sell products

You can use our 'Products shortcode' to suggest customers to purchase additional products, without any app. Just create collection with product you want to up-sell and add it using shortcode in description field.

Pre-Order button functionality

When "Allow purchase when it is out of stock" is selected, text on 'Add to cart' button will change to 'Pre-Order', so it is more clear to the customers that item is not available.

In case you wish change the text simply go to theme translation and change the text to whatever you need.

Countdown

In case you want to offer limited time discount, you can use Countdown timer so it's clearly visible how much time is left. This is available for each product and need to be set specifically per product.

  1. Go to Theme Settings > Product Page > DISCOUNT COUNTDOWN and check 'Enable countdown for discounts'
  2. Go to any product page, where you want to show timer, and add tag like this example: countdown-2018/05/25 (format is (year/month/date). Selected date is by when the discount will be available
  3. View product page to see if the countdown appears
  4. In case you want to change text in front of the time, just use theme translation.


Simply choose from the dropdown 'Related Products' under 'Product Page' in Theme Customize.

Same collection:

Select "By Collection" from the dropdown. This will automatically choose products from the same collection this product is in.

Same tag from current collection:

Select "By Tags from current collection" from the dropdown. This will automatically choose products from same collection with the same tag as product that customer is looking at.

Same tag from All collections:

Select "By Tags from ALL collections" from the dropdown. In order to show related products by tags from ALL collections you need to create an automated collection called All and assign all products to it. Take a look at the 5 steps here.

Tag-specified product handle:

Select "By Handle" from the dropdown.

None:

Select "Disable" from dropdown.


Collection Pages - top

TIP: You can show ANY widget to collection pages, in description field (product carousel, static page content, sliders, parallax banners, columns, buttons, popups etc.) using our Shortcodes.

Default layout

Read how to setup default layout for ALL collection pages.

To override any specific collection use theme templates (read the next chapter below).

Collection page template

Default template can be set up in 'Page Layout Defaults' under 'General Settings' in Theme Customize. This template will be used for all new created collections. By selecting any other template on any collection page, will override this setting.

For each collection page you can use any of the these templates (at the bottom of each collection page). :

  1. Default page (default template be set up in 'Page Layout Defaults' under General Settings in Theme Customize. This template will be used for all new created collections. By selecting any other template on the collection page, will override this setting.)
  2. Left sidebar grid template (template - collection.left-sidebar')
  3. Left sidebar list template (template - collection.left-sidebarlist')
  4. Right sidebar grid template (template - collection.right-sidebar')
  5. Right sidebar list template (template - collection.right-sidebarlist')
  6. Full width grid template (template - collection.fullwidth')
  7. Full width list template (template - collection.fullwidthlist')
  8. Blank page with only store header, pre-footer, footer no breadcrumbs (template 'collection.blank-page')

If collection have a sidebar, it will show widgets set for collection pages (they can be setup under Sections tab in Theme Customizer. Just go to any collection page with sidebar when in Theme Customizer).

UNIQUE CONTENT USING SHORTCODES

Using Shortcodes, you can add any widget (columns, slides, parallax banners, buttons, icons etc.) to give it a unique content in collections description field.

For example use it to add DIFFEREBT sliders for each collection.

Collection page with "sub-collections"

Shopify does not have a concept of main collections and sub-collections, they are all simply just same level collections.

BUT, with our shortcode system you can create from any collection page - a fake "main" category that will display collections of your choice. For example, you can create Men category, set up collection.blank-page template on it and then use collection description field to add unlimited links to other collections using multiple instances of 'Collection link shortcode' (you can use Columns shortcode as well, to create a nice layout of your choice and set uo the grid any way you want).

This will create a feeling of main and sub-collections on your store (same as you group them in navigation using drop downs, for example)

To learn how to create a Shortcode Generator used in the above tutorial, play this video from the start (sub-collection tutorial starts at 3:30).

Collection pages settings

Control over your collection page is under 'Collection Pages' tab in Theme Cutomize 'General settings' and also in Sections (when you are viewing Product page). You can set:


Header Options

When you are viewing Product page through Theme Customize - go to Sections and find Collection header section.

If you want to show collection image or color in header area, you can set it up here, adjust height etc. You can also move description in the header below title or set it up any way you like.

Thumbnails and Custom Crop

You can set the thumbnail size and background color (in case your product images have different orientation). Also you can disable reviews stars or content excerpt, if you do not wish to show them on hover.

SHOPIFY SOFT CROP: Thumbnails height is generated based on highest pic. Shopify crop will not crop the images all the same (if you have portrait AND lanscape images), so you an use THEME HARD CROP in case you are not liking what you see.

THEME HARD CROP: In case your images are not the same orientation (and/or size), and want to set up the max height size, you can set up custom size and that will automatically crop all the thumbnail images to same size.

product Color images

To display colors you need to use variant named 'Color' and set values. Read about variants here.

If you want to show them on collection pages, ssimply check 'Show color options on grid' under Collection Pages tab in 'General Settings'.

To change the extension of the image you want to upload, you can do it under Product Page tab in 'General Settings'.

Learn more about image upload in this tutorial.

Sidebar Widgets on collection pages

When in 'Theme Customize' click on link in your menu of the store preview, to go to collection page with sidebar template selected. Then you will see Collection sidebar section in 'Sections'. You can use any widget there, set it up and re-order them.

Sidebar Filters

You can display regular tags in sidebar or use the Advanced Group Filtering so users can filter few tags at once and search items in more convenient way.

Learn how to set up tags in order to use 'Filter by groups' feature.

Best Sellers

By using Featured Products widget in the sidebar, you can list products from any collection. Here's an explanation on how to set up Best Sellers using Best Selling Collection.

First set a collection in your Shopify admin under 'Collections' left sidebar menu, and simply add all your products to that collection (or choose items as you wish). To show best selling products here, be sure to set "Sort this collection:" dropdown to "By Best Selling" and then choose that colection in a sidebar widget.


Product Filters - top

How to set up 'Filter by groups'

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 (disregard if design on preview below is different then on your theme, layout is the same):

In case you already have a store with tags you can rewrite your existing tags to group them using Shopify export feature. Otherwise, if you write one by one tag, using admin area, simply just read the step 3 and step 5 below.

  1. Define your groups. In the image above, the groups are  MaterialModel, Ocassions, 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 Material_WoolModel_Men, and  Price_$50-$100.

    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' under "Collection Pages' in Theme Customize

How to order tags/filters any way you need

In case you are using tags to display Price group for filtering, you may want to position the tags in appropriate order (since by default it will list, for example $100-$200 before $50-$100 since it is looking at first number - 1 is before number 5). To set it up right, you should write: Price_1_$50-$99, Price_2_$100-$499, Price_3_$500-$999 etc.

If you want to do the same for any other group (named anything you want) or if your group with prices is not named "Price", you may want to hide the order numbers for them as well (for group called Price they are already hidden). Please write the names of the groups in 'Theme Customize' > 'Collections Pages' tab (screenshot below) and they will be hidden.

On how to position main level groups, please scroll to the next chapter below.


How to order groups any way you need

By default all filtes will be listed alphabetically. To position main level group the way you want, just type them in the field in the order you need and that's it! You can find this section in Theme Customize under 'Collection pages'. This gives you option to show, for example Size group (shown because you are using tags: Size_XL) before for example Price group (shown because you are using tags: Price_$50-$99). So you would need to type Size, Price in the field (because that is the order you want groups to show).

Limit Filter Height

You can limit the height for filter once they are open, so they do not take much space.

You can use:

  1. 'See More' button or
  2. Show ' scrollbar'

Filter Groups closed by default

By default, all groups and their filters will be displayed in full. You can choose to start with all filter groups closed and then set up to show only some of the open by default. This can save space in the left sidebar and let customers use filters more easier. Please check the settings on this image tutorial:

Layered Nav

Use Layered Nav in filters sidebar instead of showing all avaliable filter tags always. When used, once customer select one filter, all other will disappear if they do not match the current view (will display only filters that these filtered products actually have).


Blog Pages - top

TIP: You can show ANY widget in Content field of any article (product carousel, static page content, sliders, parallax banners, columns, buttons, popups etc.) using our Shortcodes.

Default layout

Read how to setup default layout for ALL blog pages.

To override any specific product use theme templates (read the next chapter below).

Blog category templates

Default template can be set up in 'Page Layout Defaults' under 'General Settings' in Theme Customize. This template will be used for all new created blogs. By selecting any other template on the blog page, will override this setting.

To set up blog category templates navigate to 'Blog Post', then hit the 'Manage Blogs' button and it will take you to a blog categories list. Open each category and set up the desired template.

For each product page you can use any of the four templates (at the right sidebar bottom of each product page):

  1. Right sidebar blog template (default template - 'blog')
  2. Left sidebar blog template (template - 'blog.left-sidebar')
  3. Full width grid blog template (template - 'blog.grid')
  4. Full width blog template (template - 'blog.fullwidth')

Blog article templates

Default template can be set up in 'Page Layout Defaults' under 'General Settings' in Theme Customize. This template will be used for all new created articles. By selecting any other template on any article page, will override this setting.

You can set up template on each admin article page. Just scroll down to the bottom of the page and choose the desired template



For each product page you can use any of the three templates (at the right sidebar bottom of each product page):

  1. Right sidebar (default template - 'article')
  2. Fullwidth (template - 'article.fullwidth')
  3. Left sidebar (template - 'article.left-sidebar')

Sidebar

When in 'Theme Customize' click on link in your menu of the store preview, to go to blogor article page with sidebar template selected. Then you will see Blog sidebar section in 'Sections'. You can use any widget there, set it up and re-order them. Same sidebar will show on blog category and blog article pages with left or right sidebar templates.

Blog settings

Complete control over your collection page is under 'Blog Pages' tab in Theme Settings.

Set how many articles are visible per one blog page. Since the fullwidth template do not have a sidebar, you can set how many articles to show on this template alone.


Static Pages - top

TIP: You can show ANY widget in Content field on any page (product carousel, static page content, sliders, parallax banners, columns, buttons, popups etc.) using our Shortcodes.

Default layout

Read how to setup default layout for ALL static pages.

To override any specific static page use theme templates (read the next chapter below).

Static page template

Default template can be set up in 'Page Layout Defaults' under 'General Settings' in Theme Customize. This template will be used for all new created pages. By selecting any other template on any static page page, will override this setting.

For each static page you can use any of the these templates (at the bottom of each static page). :

  1. Default page - (template - 'page')
  2. Left sidebar template (template - 'page.left-sidebar')
  3. Right sidebar template (template - 'page.right-sidebar')
  4. Full width template (template - 'page.fullwidth')
  5. Blank page with only store header, pre-footer, footer no breadcrumbs (template 'page.blank')
  6. Blank page with no pre-footer - show only store header, footer and no breadcrumbs (template 'page.blank-no-pre-footer')
  7. Fullwidth blank page with only store header, pre-footer, footer no breadcrumbs (template 'page.blank-fullwidth')
  8. Fullwidth blank page with no pre-footer - show only store header, footer and no breadcrumbs (template 'page.blank-fullwidth-no-pre-footer')
  9. Wishlist page (template 'page.wishlist')

Sidebar

If page have a sidebar, it will show widgets set for static pages (they can be setup under Sections tab in Theme Customizer.

When in 'Theme Customize' click on link in your menu of the store preview, to go to page with sidebar template selected. Then you will see Page sidebar section in 'Sections'. You can use any widget there, set it up and re-order them.

Landing pages

Use static page to create a page with widgets of your choice and promote ANY products you want. No limitations to page layouts using our Shortcodes (columns, sliders, product carousels, banners, buttons etc.).

Learn more here.

Contact page

Contact page can be created by using map and contact form shortcodes on any page.

FAQ Page

FAQ page can be created by using FAQ shortcode on any page.

Wishlist page template

Wishlist template should be used for a Wish list page. Instructions are here.


MailChimp Integration - top

To integrate MailChimp with your Shopify store, you will need:

To begin, you'll need to get a form action URL from MailChimp. You can find the form action URL in your MailChimp account dashboard. The following steps show you how to find your form action URL, and how to add it to your theme on the Customize theme page:

  1. Log in to your MailChimp account.
  2. From your account Dashboard, click  Lists in the navigation menu.
  3. Find the list you want to connect to your Shopify store, click the v button, and choose Signup forms. (Clicking Signup forms might take you to the Settings page if your list is not configured correctly. To continue, configure your list and save the settings, then click  Signup forms at the top of the Settings page.)
  4. Click Select on the Embedded forms option.
  5. On the Embedded forms page, click Naked.
  6. Take a look at the the Copy/paste code. All you need is form action url code so copy this selected code between brackets in action tag only (action="YOUR CODE").
  7. In shortcode - you can use subscribe form on any page using shortcodes. Please check the attached screen on where to insert the action url code. In this example we are using it in Footer HTML widget using sections.

Wish List - top

In order to start using Wish List on your store, all you need to do is create a new page in Shopify admin, call it whatever you want, select a 'page.wishlist' page template and then assign that page under Wishlist section in 'Product Page' tab (in Theme Settings under 'General Settings' tab). Of course, 'Enable Wishlist' needs to be selected as well, in order Wish list buttons to be visible on the store.


Twitter Widget - top

All you need to do is add your Twitter username in Theme Customize > 'General Settings' tab > Twitter and Instagram, and then use widget where you want to show it.

Widgets can be found in Footer section.


Instagram Widget - top

Instagram feed provide options to show photo feed from specific "user" only. "By hashtag" is no loger supported due to new Instagram policies.

Due to latest Instagram API changes you need to add access in order to show photos on your store:

  1. Be sure that you are logged in to your Instagram account, and then go to this page to Get your Access Token
  2. Once this page generates the code for you, please copy it and then paste in Theme Customize under 'Instagram Access Token' located in Theme Customize > General Settings tab > Twitter and Instagram
  3. Your user ID is located in the Access Token. Just copy/paste here all numbers from access token from the start until the first dot (selected with red square on image below)

Widgets can be found in Footer and Pre-Footer sections. Use ONLY ONE widget placement per store.


Cart & 'Add to cart' button Ajax - top

Customer Notes and Shipping

You can enable/disable customer notes text area on cart page and also set up if you want to display Shipping calculator. No settings required except changing the displayed text. Calculations are conducted automatically based on customer's zip code and if you have set up the weight prices and assigned weights to products (or just global shipping prices).

Instructions on how to set up Shipping Rates on your Shopify store.

Ajaxify cart and buttons

Ajaxify cart is enabled by default. When customer hit 'Add to cart' button it will add the product to cart without reloading the page. If you want to redirect user to cart after adding product to cart, please disable ajaxify option. It can be set under 'Cart' in theme Customize.

Social Sharing - top

Enable social share on product page and article pages. You can choose a few design things, like button size and colors. Alos you can allow or disallow use of certain social services and place your Twitter handle that will be used when shared to boost your backlinks and promote your business.




Currency Picker - top

For functionality to work in your shop, you are required to edit your money formats as per these instructions.

Then simply enable Show Currency picker checkbox in 'Currency Picker' tab located under 'General settings' in 'Theme Customize' and you will see a currency picker dropdown on header branding area. In case it does not work, please double check if you set up the money format right.

You can support any currency by adding new ones in appropriate field. Separate your currency codes with a space. Use the ISO 4217 3-letter currency code.Click here for a complete list of currency codes. Example: CAD USD.

Note: Although you will be able to display prices on your store front in different currencies, Shopify will still process orders in your shop's currency. This is a default Shopify behavior.


You will see a tab in Customize called Newsletter popup. You can add a form code, the same like you did for the footer newsletter field (you can even paste the same code as in footer). There are lot of options such as text, social icons and image. You can use it, change image or uncheck the boxes if you do not wish to use it (if you do not need text, just leave those fields empty.)

Once you create everything and are satisfied with the look of it, be sure to check the last field: "Show popup only once". That way customers will not get annoyed each time on each page, but see the popup only first time they visit.

After you check it - If you want to see it again, you can use "private browsing" by using New private window in Chrome or firefox.




Change ANY Text - top

You can change any text on the website. They are under default english Shopify translation.

Please check this tutorial to see how to get to the English translation page.

You will tabs for each store section, such as, header, footer, home page, pages, blog etc. Under each tab you can change text snippets accross the whole store.


How To Translate Theme to ANY Language - top

Please check this tutorial to learn how to change text snippets to any other language.


FAQ - top

  1. Slideshow image size?
    Slider images are actually background css images. So if you make them wide enough they will cover the whole page width. You can create 1980x600px image to make it show nice on widescreen monitors. But the main site width is 1170px so do not make the main section whit info or some text wider than that. To make it look good on tablets and mobile phones as well, we suggest keeping that middle section of your design/image even smaller in the middle, if it have some text that you want customers to see.
  2. Collection Grid/List mode (by clicking on the icons) do not work on collection - "all" (yourdomain.com/collections/all)
    Collection named all is there by default (listing all the products), but in order for grd/list view buttons to properly work you would need to create the collection named "All". To show all your products simply create a smart collection and assign it "products with price greater then zero"

  3. How to upgrade the theme when new update comes out?
    Please view our tutorial on our support site.
  4. On product pages, zoom image option is not displaying correctly (zoom image is lower then on demo store).
    This is because you are logged in as admin and you have a Shopify admin black bar on top. If you click on a small 'X' icon on top right (or simply log out), you will notice that the problem have dissapeared. This is how your customers see the website.
  5. Short description on product page - how to change it and why it has been cut off (when using Metadata settings for shortcode)?
    Since Shopify admin product page is limited to description field we are using metadata field to display a short description. You can find it at the bottom of every product page in admin. It is called Metadata and it is used for SEO purposes (it is a smal text you can find on Google search right beneath the link of the search result). It is limited to 160 characters (since Google description is limited to that many characters), so please be aware of this and rewrite the sentence(s) to make sence in 160 characters.
    Note that you do not need to edit it each time on product pages, since once you write a description, this metadata field will be automatically filled with first 160 characters of your product description.

For Web Developers - top

BeoShop theme is based on Timber Framework - official Shopify framework but taken to another level with many of their issues fixed and multiple functionalities added.

You can check out timber documentation on the CSS setup and how to use the framework the right way. For icon fonts we used Font Awesome font instead of Timber icons except for the payment icons that appear in footer.

Please check Credits section below to check resourses we used for some of the elements such as animations, popups etc.

CSS built with Sass

Some things to know about timber.scss file:


Updates History - top

Version 1.1.1 – August 13 2018

Version 1.1.0 – June 05 2018

Version 1.0.9 – May 15 2018

Version 1.0.8 – May 05 2018

Version 1.0.7 – May 04 2018

Version 1.0.6 – Apr 30 2018

Version 1.0.5 – Apr 23 2018

Version 1.0.4 – Apr 16 2018

Version 1.0.3 – Apr 03 2018

Version 1.0.2 – Mar 29 2018

Version 1.0.1 – Mar 23 2018

Version 1.0.0 – Mar 21 2018


Sources & Credits - top

We've used the following scripts, fonts, images, icons or other files as listed.

Once again, thank you so much for purchasing this theme. As we said in the beginning, we will be happy to help you if you have any questions relating to this theme. We take pride in our work and care about our users. Thanks again!


BeoCode

Go To Table of Contents