Installation Guide - OTB Shopify Styles
This guide outlines the steps to install OTB styles into your Shopify store. Follow the instructions below to duplicate your theme, install the code, and configure your preferred template.
Part 1: Installation Guide
Before making changes to your code, it is highly recommended to create a backup of your live theme.
Prerequisites
Before starting, ensure you have the source code files.
Steps to Install OTB Styles
Step 1: Backup Your Theme
Log in to your Shopify Dashboard.
Go to Online Store > Themes.
Click the three dots (⋯) next to your current live theme.
Select Duplicate. This creates a safe backup copy to work on.
Step 2: Open the Code Editor
On the duplicated theme you just created, click the three dots (⋯) again.
Select Edit Code to open the theme file editor.
Step 3: Create Necessary Files
You need to create four specific files - three within the Snippets folder and one in the Sections folder.
In the Snippets folder:
Scroll down to the "Snippets" folder and click "Add a new snippet".
Name it: template-1.liquid
Repeat to create: template-2.liquid
Repeat to create: template-3.liquid
In the Sections folder:
Scroll down to the "Sections" folder and click "Add a new section".
Name it: Vu-custom.liquid
Step 4: Add the Code
Open the folder on your computer where you extracted the files.
Open the file corresponding to template-1. Copy all contents and paste them into the template-1.liquid file in Shopify.
Repeat this process for template-2.liquid, template-3.liquid, and the vu-custom.liquid section file.
Click Save in the top right corner after pasting code into each file.
Step 5: Activate the Section
Exit the code editor and return to the Themes dashboard.
Click Customize on your duplicated theme.
Navigate to the Product Template (using the dropdown selector at the top center of the editor).
On the sidebar, click + Add section.
Search for and select "VU Customizer".
Part 2: Configuration & Settings
Once the section is added, click on "VU Customizer" in the sidebar to open the settings panel. You can switch between Template 1, Template 2, or Template 3 via the dropdown menu.
Choosing Your Layout
Select the template that best fits your product visualization needs:
Template 1
Template 2
Template 3
Common Settings (All Templates)
These settings apply regardless of which template you select:
Background Image: Set an image for the customizer interface background.
Logo: Upload the logo displayed within the customizer.
Brand Color: The primary color used for buttons and selected items.
Secondary Background Color: Background color for selectors and summary items.
Typography:
Heading Font & Body Font: Select font families for the customizer text.
Text Color: Primary text color.
Secondary Text Color: For text on darker backgrounds.
Title Size: Adjusts the font size of the main title.
UI Controls:
Buttons & Selector Radius: Controls the roundness of button corners and dropdowns.
Show/Hide Controls: Toggle visibility for "Save", "Share", and "Reset" buttons.
Hide Tabs: Enter the number of specific tabs to hide (separated by commas).
Template-Specific Settings
Each template has unique settings that only appear when that template is selected.
Template 1 Specifics:
Image Size: Adjusts the display size of images in the customizer.
Icons: Toggles to show or hide the Drag and Zoom icons.
Template 2 Specifics:
Brand Logo: Sets the specific logo displayed on the customizer loading screen.
Template 3 Specifics:
Header Height Override: Adjusts modal position relative to headers (set to 0 to auto-detect).
Brand Logo: Shown on the loading screen and bottom navigation rail.
Button Styling Grid: Extensive color controls for the Template 3 button grid, including background, text, hover states, and border colors.
Part 3: Go Live
Once you have configured the settings and are happy with the preview, return to your Shopify Dashboard.
Locate your customized duplicate theme.
Click Publish to make VU Custom live on your store.
Last updated