Once your Shopify data is connected, the next step is to add your unique branding. Shipcode provides powerful theming tools that allow you to manage the look and feel of your entire project from a central location. This section walks you through overriding the template's default settings to apply your own brand's custom fonts, colors, and design variables.

Step 1: Upload Fonts

All font management is handled in Project Settings.

You can access Project Settings in two ways:

• Click the Settings tab in the top header.
• Click your avatar in the top right corner and select Project Settings from the context menu.

Once you’re in Project Settings, select the Fonts tab in the left panel navigation.

1. Click the Upload fonts button in the top right corner to add new font files to your project. You can upload one or more fonts at a time from your finder window.
2. When the font is successfully added, you will see the font family with the weights that were added to your project.

Once your fonts are uploaded, you can apply them to text elements, Variables, and Text Styles.

Shipcode supports two font file formats:

• TrueType Font (.ttf): This is the most universally supported format across web and app platforms.
• OpenType Font (.otf): This format is also widely supported and is preferred for advanced typographic features.

📍📍📍 Note 📍📍📍

Other formats like .svg, .woff, and .woff2 cannot be uploaded for use in your project as they will not work across all platforms.

Every project includes the ‘System’ font. This font acts as a universal fallback, ensuring text can be rendered on any device or browser, even if a custom font fails to load. It is an instruction to the device to fall back to its default typeface. As such, the text will appear different depending on the device and operating system it's using.

Step 2: Update Text Styles

The landing page template uses Text Styles to make updating the project with your brand fonts easier. Text styles are a saved set of values—defined per breakpoint—that you can apply and reuse across your project. They are composed of core properties like font family, font style, font size, line height, and letter spacing. Making a change to a text style’s value updates all text elements that the style is applied to, saving you time and maintaining consistency in your design.

To update text styles:

1. Navigate to the Themes panel (palette icon) in the left sidebar, then select the Styles tab in the panel header. Here, you will see a list of all text styles used in the project.
2. Update each text style to change the font family and font style/weight to use your uploaded fonts instead of the default project fonts.

Edit a text style

• Click the settings icon to the right of the text style, or use the three-dot menu and select ‘edit’ in the context menu.
• You can rename a style using the name field.
• You can change the value of any text property, and it will update all elements that have the style applied.

Breakpoint logic for text styles

• Each text style has property values that apply to each breakpoint.
• Text styles use the same logic as the rest of the tool: Mobile values are applied to all breakpoints unless an override is made at a higher breakpoint.
• Review each breakpoint and the values for each property to ensure changes meet your desired design needs.

Step 3: Update Variables

Theme Variables are reusable design values that you define once and apply across your entire project. They are the fundamental building blocks of your design system, acting as a single source of truth for your brand's style and data properties.

Collections

Variables are organized into Collections, which are sets of related design values. For example, you might create a "Colors" collection for your brand palette or a "Spacing" collection for padding and margins.

Variable Types

There are three types of variables that can be used as values for different properties:

• Color: Accepts a hex code value.
• Number: Accepts a numeric value.
• String: Accepts a text value.

📍📍📍 Note 📍📍📍

Variables can be grouped into sub-groups using a forward slash (/) in the name. For example, Text/Primary or Text/Secondary would group your Text colors, making them easier to manage inside each collection.

Variable Collections in the Template

The landing page template has four Variable Collections:

• Border: Used for border properties like border width and corner radius.
• Color: Used for semantically named colors. This includes text, border, background, and component-specific colors like button colors.
• Size: Used for width and height values, as well as aspect ratios. The logo aspect ratio can be edited here.
• • To determine the aspect ratio of your logo, divide its width by its height. For example, if an image is 1920 pixels wide by 1080 pixels high, you would divide 1920 by 1080 to get approximately 1.78.
• Spacing: Used for defining space values like gap, margin, and padding.
• • T-shirt sizes for Main Container Padding relate to each of the 5 breakpoints. Main Container Padding is used on components to define values for left and right padding.

Using these variables allows you to make changes in one place that will update every instance using that variable across your project. Once a theme variable has been created, it can be attached to any property in the Appearance Panel or Settings Panel.

Applying Variables

You can apply a variable as a value in two ways:

1. Hover a prop label and click the plus icon to open the flyout menu, or right-click on a prop and click ‘Attach Data’.
2. Select the Theme Variables tab in the header if it’s not already selected.
3. Use the dropdown below the header to swap between collections.
4. Click to apply the variable you want to use for that prop.

To swap a variable, you can click the plus icon or click the applied variable on the prop to open the selection flyout menu.