OLM Advantage Theme Basics
Shopify stores are all created using the OLM Advantage Theme. Described here are the configurable features of the theme.
1.2 Finding values:
While looking at the parent website define the colors, fonts, and overall styles by using the web inspector built into the Chrome Browser.
Right click an element > choose "Inspect Element"
The color, and size values will be displayed in the CSS section. Record these values in the Style Tile template.
Gatering Site Images:
Another major way OLM remains consistent with a client's brand is by using their existing artwork / images. If the artwork has not been provided by the client, simply download them through the parent website.
While in a Chrome Browser go to: View > Developer > Developer Tools
A new section will open up below the webpage content.
Choose the "Resources" tab and expand Frames > [Sitename] > Images
Click on the image name then the URL as shown.
Download the images and store in the defined Dropbox folder. Refer to the Dropbox post for more details.
Using the Style Tile as reference adjust the setting to match.
Logo Image: When checked "Yes" an image will be used for the logo. When unchecked text will be used instead. The default logo is the OLM logo.
Logo Placement:
Above Main Content (default) - The logo will be below the navigation and above the carousel slider.
Sidebar - The logo will appear in the defined sidebar.
Top Navbar - Logo will appear in the top navigation next to the navigation.
Favicon - Must be in .png format
Primary Color- This color is reserved for key functionality such as the call to action.
Background Color - The color of the page background. Colors the body element
Heading Color - The color of the text of the heading tags: h1, h2, h3... Most notably these show up above the products.
Text Color - The main text color such as paragraph text.
Link Color - The color of text links
Button Color - The background color of the button
Button Text Color - The color of the text on top of the button. This color should have a large contrast from the button color.
Footer Background Color - The color of the background in the footer.
Footer Heading Color - Text color of the headings in the footer (h4 tags).
Footer Link Color - Color of the links in the footer. This setting overwrites the link color from the general tab.
Footer Text Color - The color of the paragrap text within the footer.
ONELIVE Logo Color - The color of the One Live logo in the footer. Choices are black and white, so choose the one with the most contrast.
Navbar
Navbar Main Background Color - The primary background color of the navigation menu.
Navbar Main Link Color - The color of the navigational links on the top navbar.
Navbar Top and Footer Background Color - Need to ask James of the difference between this and the main background color.
Navbar Top and Footer Links Color - Need to ask James.
Navbar Dropdown Background Color - The background color of the cart dropdown in the top navbar.
Navbar Dropdown Link Color - Color of the links in the cart drown down menu from the navbar.
Navbar Dropdown Link Hover Background - The color of the background of link background when hovered.
Sidebar Background Color - Background color of the sidebar. By default only shows up on the blog page.
Sidebar Heading Color - The heading color in the sidebar.
Sidebar Link Color - Link colors in the sidebar.
Sidebar Text Color - Paragraph text color in the sidebar.
Breadcrumb
Breadcrumb Background Color - The background color of the breadcrumbs. Only shows up on the inner-pages.
Breadcrumb Text Color - The color of the current page.
Breadcrumb Link Color - The color of the links in the breadcrumb section.
Breadcrumb Link Hover Color - Color of the breadcrumb links when hovered over.
Square Form Controls - Not certain, need to ask James.
Round Avatars - Not certain, need to ask James.
Show Borders - Not certain, need to ask James.
Site Background Image - Does the site need a background image?
Site Background Image File - If the site background image is selected upload your background image.
Site Background Image Position - Sets the starting position of the background image.
Site Background Image Size - Contains 3 options (Auto, Contain, Cover).
Auto - Default value. The background-image contains its width and height.
Contain - Scale the image to the largest size such that both its width and its height can fit inside the content area
Cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.
Site Background Image Repeat - Repeats the background image: Repeat (repeats both x and y axis). Repeat-X - Only repeats on the X axis (left and right). Repeat-Y - Only repeats on the Y axis (up and down). No-Repeat - The background image does not repeat. Inherit - Takes on the properties of the parent.
Site Background Image Attachment - Defines how the background image will behave. Scroll - The background image scrolls with the page. Fixed - The background image stays fixed in and the content rolls over the image giving a parallax effect.
2.14 Cart
The cart section defines the values on the cart page.
Cart quantity color - The quantity color on the cart page.
Ajax Cart - Does the cart use Ajax functionality? Important! - If you are using a file upload field in your product property line items it will not work while Ajax Cart is enabled.
Cart Page Content - Page content to display on the cart page.
Collection to link to if cart empty - Collection to display if there is nothing in the cart.
Disable cart - If you're using Shopify as a brochure site until you are ready to sell online, you can disable the cart.
Free shipping threshold - The total cart amount required to qualify for free shipping.
Hide prices if cart is disabled - If checked the price will be hidden with the cart is disabled.
Show Agree with Terms and Conditions Checkbox - Add Terms and Conditions agreement checkbox.
Show shipping estimator - Estimate the cost to ship on the cart page.
2.15 Age Verification
Enable Age Verification - Required for sites that market alcohol .
Verification Age - Minimum age to enter website.
Verification Title - Title message for verification.
Verification Text - Message for verification.
2.16 Localizations
Localizations - Not certain, need to ask James.
2.17 Money
Show multiple currencies - 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.
Currency switcher default - If left blank the currency switcher will be set to your shops default currency.
Supported currencies - Separate your currency codes with a space. Use the ISO 4217 3-letter currency code. Click here for a complete list of currency codes. E.g., NZD USD CAD
Currency switcher position - Location of the currency switcher.
Show currency with prices - Adds the currency next to the price. For example $123.00 USD instead of $123.00.
Append “plus taxes” to prices - Add the text "Plus Tax" after the price. You can localize the wording in the Localization settings using “plus-taxes: + GST”
2.18 Money
Social Links Placement - Location the social links show up.
Social icon color - Uses the branded social icon color.
Newsletter platform - Define the platform newsletter uses.
Newsletter signup placement - Location of newsletter signup.
2.19 Advanced
SASS variables - Add SASS variables to this location. SASS variables start with a $.
Custom CSS - Overrides CSS settings.
Custom checkout CSS - Overrides CSS settings on the checkout page.
Custom header code - Codes that goes into the headers. This is also where Custom Google Fonts are added.
Custom footer code - Anything to be placed before the site’s closing body tag.
Advanced Homepage Layout - Use alternative homepage layout. Define a linklist for which to pull the homepage content from. This is handy if you want to reorder the homepage content or add in extra sections without touching the code.
Development mode - Not an active store.
2.20 Checkout
Use a custom banner background? - If checked a large banner will be used in the header of the checkout page. For best results, we recommend uploading a 1000 x 400 px image.
Background color - Color of the banner when not using a custom background image.
Logo image - Choose to add an logo image or simply use text for the logo.
Tagline - Your shop description will be displayed underneath your logo.
Colors:
Accent -Changes link and focus color on checkout page.
Buttons - Changes section, discount and gift card button on the checkout page.
Call to action - Changes the background color of the "Complete my purchase" button
Contents:
- Planning
- Intro
- Finding Values
- Recording Values
- Translate to Shopify Theme Settings
- Branding
- Color
- Design
- Layout
- Homepage
- Homepage Slider
- Typography
- Blog
- Products
- Collections
- Sidebar
- Navigation
- Footer
- Cart
- Age Verification
- Localization
- Money
- Social
- Advanced
- Checkout
- Additional Layouts
1. Planning
1.1 When migrating a website to Shopify choose colors, fonts and styles that have been defined in the parent website. It is best to define these colors before starting the migration. Use the style tile template from the Dropbox folder can speed up development and create fewer headaches ("fail to plan, plan to fail").1.2 Finding values:
While looking at the parent website define the colors, fonts, and overall styles by using the web inspector built into the Chrome Browser.
Right click an element > choose "Inspect Element"
The color, and size values will be displayed in the CSS section. Record these values in the Style Tile template.
Gatering Site Images:
Another major way OLM remains consistent with a client's brand is by using their existing artwork / images. If the artwork has not been provided by the client, simply download them through the parent website.
While in a Chrome Browser go to: View > Developer > Developer Tools
A new section will open up below the webpage content.
Choose the "Resources" tab and expand Frames > [Sitename] > Images
Click on the image name then the URL as shown.
Download the images and store in the defined Dropbox folder. Refer to the Dropbox post for more details.
2. Translate to Shopify Theme Settings
Login to the Shopify Partner Site and choose the appropriate site.
Using the Style Tile as reference adjust the setting to match.
2.1 Branding
The branding settings contains fields related to the logo, favicon and their placement.
Logo Image: When checked "Yes" an image will be used for the logo. When unchecked text will be used instead. The default logo is the OLM logo.
Logo Placement:
Above Main Content (default) - The logo will be below the navigation and above the carousel slider.
Sidebar - The logo will appear in the defined sidebar.
Top Navbar - Logo will appear in the top navigation next to the navigation.
Favicon - Must be in .png format
2.2 Color
General:
Primary Color- This color is reserved for key functionality such as the call to action.
Background Color - The color of the page background. Colors the body element
Heading Color - The color of the text of the heading tags: h1, h2, h3... Most notably these show up above the products.
Text Color - The main text color such as paragraph text.
Link Color - The color of text links
Button Color - The background color of the button
Button Text Color - The color of the text on top of the button. This color should have a large contrast from the button color.
Footer:
Footer Background Color - The color of the background in the footer.
Footer Heading Color - Text color of the headings in the footer (h4 tags).
Footer Link Color - Color of the links in the footer. This setting overwrites the link color from the general tab.
Footer Text Color - The color of the paragrap text within the footer.
ONELIVE Logo Color - The color of the One Live logo in the footer. Choices are black and white, so choose the one with the most contrast.
Navbar
Navbar Main Background Color - The primary background color of the navigation menu.
Navbar Main Link Color - The color of the navigational links on the top navbar.
Navbar Top and Footer Background Color - Need to ask James of the difference between this and the main background color.
Navbar Top and Footer Links Color - Need to ask James.
Navbar Dropdown Background Color - The background color of the cart dropdown in the top navbar.
Navbar Dropdown Link Color - Color of the links in the cart drown down menu from the navbar.
Navbar Dropdown Link Hover Background - The color of the background of link background when hovered.
Sidebar
Sidebar Background Color - Background color of the sidebar. By default only shows up on the blog page.
Sidebar Heading Color - The heading color in the sidebar.
Sidebar Link Color - Link colors in the sidebar.
Sidebar Text Color - Paragraph text color in the sidebar.
Breadcrumb
Breadcrumb Background Color - The background color of the breadcrumbs. Only shows up on the inner-pages.
Breadcrumb Text Color - The color of the current page.
Breadcrumb Link Color - The color of the links in the breadcrumb section.
Breadcrumb Link Hover Color - Color of the breadcrumb links when hovered over.
2.3 Design
Square Form Controls - Not certain, need to ask James.
Round Avatars - Not certain, need to ask James.
Show Borders - Not certain, need to ask James.
Site Background Image - Does the site need a background image?
Site Background Image File - If the site background image is selected upload your background image.
Site Background Image Position - Sets the starting position of the background image.
Site Background Image Size - Contains 3 options (Auto, Contain, Cover).
Auto - Default value. The background-image contains its width and height.
Contain - Scale the image to the largest size such that both its width and its height can fit inside the content area
Cover - Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area.
Site Background Image Repeat - Repeats the background image: Repeat (repeats both x and y axis). Repeat-X - Only repeats on the X axis (left and right). Repeat-Y - Only repeats on the Y axis (up and down). No-Repeat - The background image does not repeat. Inherit - Takes on the properties of the parent.
Site Background Image Attachment - Defines how the background image will behave. Scroll - The background image scrolls with the page. Fixed - The background image stays fixed in and the content rolls over the image giving a parallax effect.
2.4 Layout
Container width, small devices - Defines the width of the container on small devices like phones. Container width, medium devices - Defines the width of the container on medium devices like tablets. Container width, large devices - Defines the width of the container on medium devices like desktop computers. Thumbnails per row, mobile - Number of thumbnails or products that will be displayed per row on mobile (phone) devices. Thumbnails per row, tablet - Number of thumbnails or products that will be displayed per row on tablet devices. Thumbnails per row, laptop - Number of thumbnails or products that will be displayed per row on laptop devices. Thumbnails per row, desktop - Number of thumbnails or products that will be displayed per row on desktop devices. Default pagination (products per page) - Number of products that are displayed on a page. Product page image placement - From the product page, does the product image show up to the left of the description or to the right? Show breadcrumbs - Show or hide the breadcrumbs on the inner-pages. Window width thumbnail container - Not certain, need to ask James.2.5 Homepage
The homepage section defines the areas that will be displayed on only the homepage. Homepage content - Which page content to display on the homepage. Can be images or text. Pages can be found from the Shopify Dashboard in the left sidebar. Products Collection - Defines the product to display on the homepage. Collections can be added from from the Shopify Dashboard in the left sidebar. Products limit - The maximum number of product that will display on the homepage. Collections linklist - Not certain, need to ask James. Collections limit - The maximum number of collections that will display on the homepage. Blog - Which blog category (if any) should be displayed on the homepage. Facebook album blog - A blog that is linked to Facebook albums. Features linklist - Setup a linklist with links pointing to collections or pages. Instagram feed - Turn on or off the Instagram feed. Testimonials blog - Show a testimonial blog on the homepage (Must create a testimonial blog first). Testimonials blog post limit - Total number of testimonial blog entries to display on the homepage.2.6 Homepage Slider
The homepage slider section controls the carousel on the homepage. Show slider - Shows or hides the slider. Slider width - Sets the width of the slider. window width - The slider expands to the size of the user's window. Site Width - The slider expands to the width of the site and will have padding on the left and right of the slider when viewed on desktop platforms. Auto-play slider - Sets the slider to automatically play on load. Best to turn off during development and then turn on after deployment. Carousel Speed - How fast does the slider changes the images. Set in milliseconds. Carousel Transition - The transition effect between each slide. Slide Blog - Shows blog posts in the slider. Slide Image - Sets the image as the slide's background. Sliders should be at least than 2000px wide and a recommended size of 2,000 x 800px. Caption Position - Defines the placement of the slider text. Heading - Heading text on the slider background. Caption - Smaller descriptive text that is displayed below the heading text. Button text - The text to display on the slider button. Button link - Location that the button take the user.2.7 Typography
Heading "letterpress" - Adds a letterpress effect to the headings and makes the text appear to be pressed into the website. Font Body - main paragraph text. Font Brand - default text. Font Heading - The heading text. Primary used before the products or page titles. Font Navbar - Text used in the top navigation. Custom Font Name - The name of the font. For more details visit the custom font post. Fallback/default - A fallback font in case the custom font does not load due to user legacy systems. Weight - Recorded as a number. The larger number indicates a bolder font. Size - The size of the font. Style - Special styles such as italics. Case - Defines the font casing. For example UPPERCASE converts all text in capital letters, lowercase converts all text to lowercase letters, Title Case - converts the first letter of each word to uppercase.2.8 Blog
Blog list limit - Number of blog articles shown in the footer and sidebar blog lists. Show meta - Not certain, need to ask James. Show author - Display the name of the blog author. Show author bios - Display the bio of the author. Truncate words - Number of words to show in the blog article listings. Leave blank if you want to show the entire article. Use Gravatar for avatars - Uses the Gravatar system for author image. Events date tag format - Date format.2.9 Products
Show price if 0 - Display or hide the price on products that are below $0.00 Display vendor description - If checked and a collection exists with the same handle as the vendor handle, the collection description (and image) will be displayed at the bottom of the product page. Enable image lightbox - Adds a lightbox effect when the product image is clicked. Enable image zoom - If checked the product is zoomed in when the user hovers over the product image. Hidden tag prefixes - Tags to hide a product. Show product description as tabs - Adds tabs for the product description. Product Tab Linklist - A linklist of static pages that are generic across all products. Secondary call to action URL - Direct customers to another URL. E.g. link to your contact page for customers who want a customized version of your product. Secondary call to action text - CTA text to display. Secondary call to action link text - CTA link text. Show product collections - Shows product collections on the product page. Show product tags - Displays the product tags. Show product type - Displays the product type. Show product vendor - Displays the vendor of the product. Show unavailable products - Displays products that are unavailable. Show notify me form when sold out - Send an email when a product has sold out. Show related products - Displays similar products. Show social share links - Adds social links on the product page. Secondary collection on products page - Adds another collection to display on the product page. Show stock availability - Displays that amount of stock left. Max stock availability fallback - Default stock availability. This can be overridden on a product-by-product basis with the meta field 'availability.max-stock-level' inside a product. Or on specific variants by using the meta field 'availability.max-stock-level-[variant sku here]'. Color stock availability as traffic light - Green means plenty of stock. Yellow means the stock is getting low. Red means the stock is almost out.2.10 Collections
Featured Image Position - Location of the collection featured image on the featured page. Enable quick shop - Adds a button below the product for viewing product details and adding to cart without leaving the current page. Overlay title on hover - Hides the product title until hover. Overlay title on hover background color - When "overlay title on hover" is checked this defines the color of the background when hovered. Overlay title on hover text color - When "overlay title on hover" is checked this defines the color of the text when hovered. Enable box shadow on hover - When "overlay title on hover" is checked this adds an box shadow when overlay. Show “On Sale” badge - Displays an "On Sale" badge when a product is discounted. “On Sale” badge position - Position of the "On Sale" badge. Show “Compare At” Price - Displays competitive comparison price. Show icons for cart and view buttons - Adds icons for cart and view buttons. Show Quick Cart - Adds a quick cart button. Show products stock availability - Displays the stock availability of a product. Show product sorter - Not certain, need to ask James. Show product count for collections - Not certain, need to ask James. Show descriptions on nested collections page - Not certain, need to ask James. Show products on nested collections page - Not certain, need to ask James. Show Vendor with Thumbnail - Location within the thumbnail to display the vendor info. “All collections” collection linklist" - Not certain, need to ask James. Show “out of stock” badge - When checked an out of stock badge will display on out of stock products. If checked and unavailable products are visible, a badge will indicate that the products are out of stock. Collections per row - Number of collections to display per row. Hidden collection limit - Hides collections that have less than specified number of products. Thumbnail layout - Ordered, or Masonry Thumbnail ratio - The width:height ratio of the product image. 1:1 would be square 1:2 would have a height that is twice the width. Thumbnail alignment - the alignment of the thumbnail. Thumbnails Cropped - If checked, thumbnails will be cropped to fit their container. If unchecked, thumbnails will fit inside the container. Collection feature image - The main featured product image to display. Collection header placement - Location to place the collection header. The collection header contains the collection description and (if present) the collection’s feature image. Tag button limit - Tags will be shown as buttons until the amount of tags is equal or grater than this limit. If left blank tags will always be shown as buttons. Tag Filtering Action - Not certain, need to ask James. Tag placement - Locations of tags. Show a page when collections are empty - Page to display when there is nothing in a collection. “Recommended” products collection - You can choose to display “recommended” products on the homepage, collection pages and product pages. “Recommended” Collections Display Locations - Pages that display the recommended collections.2.11 Sidebar
Display Locations - Pages that display the sidebar General - Contains display location and content within the sidebar. Sidebar Widget - The title and content that goes into the sidebar.2.12 Navigation
Square navbar - If check the navbar will be squared off. Top navbar linklist, left - Linklist to display in the left section of the top navbar. Top navbar linklist, right - Linklist to display in the right section of the top navbar. Top navbar placement - Fixed to top makes the navbar sticky at the top of the header. Main menu linklist - Primary Menu. Use when extra info is needed beyond the top nav. Main menu alignment - Alignment of the main menu. Values are Left, Center and Right. Footer navbar linklist, left - Adds a footer linklist aligned to the left and below all content. Footer navbar linklist, right - Adds a footer linklist aligned to the right and below all content. Footer navbar placement - converts the footer navigation menu to a sticky or static footer. Search placement - Defines the location of the search bar. Search typeahead collection - The collection that gets searched.We recommend you create a collection of all products (i.e., an automatic collection where price (and/or inventory) is greater than 0. Allow multiple level dropdowns - This will allow your dropdowns to go down more than one level. Use this with extreme caution, if your linklists are not crafted correctly you can cause an infinate loop that will result in a Shopify liquid error. Use “Mega” dropdown menu -Menu with extra content. If you have a large number of dropdowns or more than two levels of nested dropdowns, it is advisable to enable this setting.2.13 Footer
The footer contains 4 columns. Blog - Which blog to display in the footer. Menu - Which Menu to display in the footer. Text - Custom text to display in the footer.Default Footer Order:
Column 1: About text with Bandmerch logo below Column 2: Helpful links Column 3: Social Media Icons Column 4: Newsletter Signup
2.14 Cart
The cart section defines the values on the cart page.
Cart quantity color - The quantity color on the cart page.
Ajax Cart - Does the cart use Ajax functionality? Important! - If you are using a file upload field in your product property line items it will not work while Ajax Cart is enabled.
Cart Page Content - Page content to display on the cart page.
Collection to link to if cart empty - Collection to display if there is nothing in the cart.
Disable cart - If you're using Shopify as a brochure site until you are ready to sell online, you can disable the cart.
Free shipping threshold - The total cart amount required to qualify for free shipping.
Hide prices if cart is disabled - If checked the price will be hidden with the cart is disabled.
Show Agree with Terms and Conditions Checkbox - Add Terms and Conditions agreement checkbox.
Show shipping estimator - Estimate the cost to ship on the cart page.
2.15 Age Verification
Enable Age Verification - Required for sites that market alcohol .
Verification Age - Minimum age to enter website.
Verification Title - Title message for verification.
Verification Text - Message for verification.
2.16 Localizations
Localizations - Not certain, need to ask James.
2.17 Money
Show multiple currencies - 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.
Currency switcher default - If left blank the currency switcher will be set to your shops default currency.
Supported currencies - Separate your currency codes with a space. Use the ISO 4217 3-letter currency code. Click here for a complete list of currency codes. E.g., NZD USD CAD
Currency switcher position - Location of the currency switcher.
Show currency with prices - Adds the currency next to the price. For example $123.00 USD instead of $123.00.
Append “plus taxes” to prices - Add the text "Plus Tax" after the price. You can localize the wording in the Localization settings using “plus-taxes: + GST”
2.18 Money
Social Links Placement - Location the social links show up.
Social icon color - Uses the branded social icon color.
Newsletter platform - Define the platform newsletter uses.
Newsletter signup placement - Location of newsletter signup.
2.19 Advanced
SASS variables - Add SASS variables to this location. SASS variables start with a $.
Custom CSS - Overrides CSS settings.
Custom checkout CSS - Overrides CSS settings on the checkout page.
Custom header code - Codes that goes into the headers. This is also where Custom Google Fonts are added.
Custom footer code - Anything to be placed before the site’s closing body tag.
Advanced Homepage Layout - Use alternative homepage layout. Define a linklist for which to pull the homepage content from. This is handy if you want to reorder the homepage content or add in extra sections without touching the code.
Development mode - Not an active store.
2.20 Checkout
Use a custom banner background? - If checked a large banner will be used in the header of the checkout page. For best results, we recommend uploading a 1000 x 400 px image.
Background color - Color of the banner when not using a custom background image.
Logo image - Choose to add an logo image or simply use text for the logo.
Tagline - Your shop description will be displayed underneath your logo.
Colors:
Accent -Changes link and focus color on checkout page.
Buttons - Changes section, discount and gift card button on the checkout page.
Call to action - Changes the background color of the "Complete my purchase" button