From the store admin panel, navigate to Storefront > My Themes and find the Austin template. Click on the 3 dots next to the template name and select the 'Apply' option from the drop-down that appears. Select whichever child theme you would like to use for your store.

Theme Editor

Once an Austin template has been applied, you can navigate to the theme editor to begin the majority of your customizations. Under the 'Current Theme' heading, there should be a blue 'Customize' button to the right of the main Austin image. Click this to launch the theme editor.

File Editor

Once the Austin template has been applied, you can navigate to the theme files to customize some of the text and image content across the site. Under the 'Current Theme' heading, there should be a white 'Advanced' button to the right of the main Austin image. Click it, and choose the 'Edit Theme Files' option from the drop-down that appears.

Important Note: Always, always, always make a backup of your site by selecting the ‘Download Current Theme’ option before making any modifications to your template files in case something goes wrong. Then all you have to do is upload the resulting .zip file if you need to revert the theme.

Lang Files

Most, if not all of the Austin theme’s verbiage can be edited via this area by changing the matching text in the en.json language file, shown below. To find this file, you must first enter the theme’s File Editor.

Customize!

Recommended Image Sizes: Regardless of the images you use, the theme will do its best to make any image work where you place it. However, if the dimensions differ from what is recommended, there is no guarantee that it will not look grainy or distorted.

Theme Colors

After launching the Theme Editor, click on the ‘Theme Styles’ icon (the one shaped like a painter’s palette) to open the theme settings. In the ‘Global’ settings, you will find basic color options, some display options for page headings, and other fundamental options for your store.

Austin Night

The ‘Night’ variant allows you to set a background image for the mega menu dropdown, the footer, and the homepage Newsletter signup banner. The appropriate options must be toggled on in the Theme Editor, and you can change the link to your background image via the en.json file.

Austin Vogue

Note that the ‘Vogue’ variant uses a unique pair of settings to determine the background colors of certain elements: the homepage’s Newsletter signup banner and testimonials carousel, and primary action buttons.

Header & Footer

Header

The options for the theme header included in Austin consist of the container background, Logo, Navigation colors, and the ability to display certain promotional links and messages.

Promo Message & Blog Navigation

The promo message (default “Orders over $50 Ship Free!”) and the Gift Certificate / Blog Navigation can be toggled on and off in the theme settings. If the BC blog is not active, the Blog link will not show. Additionally, you can edit the promo message text by editing the en.json language file.

Mega Menu Images

The ‘Show Images in Sub Menu’ checkbox allows you to toggle the main category image on and off in the navigation drop-down. This image refers to whatever image you upload to the Edit Category page in the admin panel.

Recommended Image Size: 500x350 pixels.

Content Pages in Menu

In order for a content page’s link to appear in the main navigation, it must be made visible in the store’s Control Panel, as well as listed in the ‘Included Pages’ input in the theme settings. If you want to show multiple page links, separate the list with a comma and a space: About, Privacy Policy, etc.

Footer

The store’s footer, located at the very bottom of the site, can be customized in a small variety of ways. This includes the container background, text and link colors, the alternate Logo and store location/operating hours, and the urls and text for the links that appear in the custom ‘Support’ navigation column.

The alternate logo image can be toggled on and off, as can the address and the store’s operating hours. The hours can be edited in the theme’s en.json file. The address information is pulled from the ‘Store Profile’ in the general admin panel.

Home Page

Carousel

The main image carousel uses the built-in ‘Home Page Carousel’ options for its content. From there, you can upload the background images, edit the primary lines of text, button text, and button link. The options in the theme editor let you determine whether or not to have the carousel, toggling the navigation arrows on and off, and various colors.

Recommended Image Size: 1390x840 pixels.

Product Lists

There are two product lists that populate on the home page by default: New Products and Featured Products. You can toggle the appearance of these lists on and off, as well as set how many products can appear in each section.

Custom Content Rows

These custom content rows are another optional feature for your site’s home page. From the Theme Editor, you can choose to show or hide each individual row, as well as set any relevant colors.

In order to swap out text and images for these sections, you will need to visit the theme’s en.json file and edit the corresponding values.

Newsletter Signup Banner

Testimonial Carousel

Image + Text 1

Recommended Image Sizes: (Tall) 540x810 pixels; (Short) 495x290 pixels.

Image + Text 2

Recommended Image Sizes: (Tall) 540x810 pixels; (Short) 540x580 pixels.

Image + Text 3

Recommended Image Sizes: (Icon) 55x55 pixels; (Tall) 540x810 pixels.

Promo Hero Banner

Recommended Image Size: 970x540 pixels.

Blog Feed

Category Pages

Show Subcategory List on Sidebar

This setting in the category page allows you to choose whether or not you have a secondary list of your shop categories included in the top of the left column for easier navigation.

Category Title Banners

To set the background image for a category title banner, upload the image you would like to use in your store’s Image Manager (must be a .jpg file), and name the image file as follows:
category-banner-{{category ID}}.jpg

To find the Category ID, go to Products > Product Categories > click on the category in question. You should be able to see the ID in the URL bar, at the end of the string.

Brand Title Banners

Similar to the category banner images, brand images are fetched from your store’s image manager. Upload the image you would like to use in your store’s Image Manager (must be a .jpg file), and name the image file as follows: {{brand-name}}.jpg. For example, if your brand is named ‘Austin’, your image file would be ‘austin-light.jpg’.

Recommended Image Size: 1560x350 pixels.

Brands Landing Page Title Banner

The banner image on the /brands/ landing page can be edited in the theme’s en.json file.

Recommended Image Size: 1560x350 pixels.

Products

Play Video

The ‘Play Video’ button does not require any special attention to function. As long as there is a product video uploaded, this will automatically appear.

Short Meta Description

The brief pseudo-description of a product (located just below the product name) can be set by editing the individual product’s ‘Meta Description’ field:

Details

The Details section is populated using the general ‘Product Description’ text editor.

Warranty

The Warranty section is populated using the ‘Warranty Information’ field in the product editor.

Downloads

Appears if there are specific custom fields set with values containing links to download files. The ‘Custom Field Name’ must be called ‘Download’. The formatting for the ‘Custom Field Value’ is as follows: [[Text you want to appear as the download link]]

Content Pages

About Us Page

The Austin theme comes with a special template for your company page in order to help it stand out a little against your other content pages. In order to set this up, you must edit your About page to use the ‘about-us’ template in the page admin, as shown below:

You can swap out the top banner image by editing the source in the en.json file.

Recommended Image Size: 1150x350 pixels.

Contact Us Page

This template is automatically applied to any page that is set with the option of ‘Allow people to send questions/comments via a contact form.’ All images and verbiage (not including the form fields) can be edited via the theme’s en.json file.

Recommended Image Sizes: (Banner) 1560x350 pixels; (Tall) 650x850 pixels; (Icons) 55x55 pixels.

Blog Pages

The blog’s top image banner, included on the landing and individual post pages, can be edited via the theme’s en.json file. This includes the image, title, and tagline.

Recommended Image Size: 1560x350 pixels.