Customizing the product template

Displaying Tags on the Product Pages

For certain stores, it might make sense to list all of the tags on the product pages.  The following guide will walk you through the steps to insert a Liquid snippet into the product's template to show the tags as well as a link to the current collection with the tag filter.

  1. Open the Themes page of the Shopify admin
  2. Click on the Actions drop-down and select Edit HTML/CSS
    3f1110b1ed18819ac0f3102ddb473c0d.png
  3. Open the Sections/product-template.liquid file
  4. Search for the line that contains {{ product.description }} 
    With the current version of District this is on line 192, however, it might vary depending on your theme version.
  5. Directly after the {{ product.description }} add the following code snippet:
    https://gist.github.com/jonathanmoore/671035399d96d1362121bfc0679a182b
  6. Save the file

Displaying SKU Numbers on the Product Pages

You can easily show SKU numbers for products or variants by adding some code to your product pages in District. Here's a Shopify guide that has been tested and works beautifully with the District theme.

  https://help.shopify.com/themes/customization/products/show-sku-numbers#sectioned-themes

Linking Product Options on the Product Pages

You can link your product options so that when your store's visitors make a selection in the first drop-down, the values in the second drop-down right below will be updated to list only those values that are available in combination with their first selection. Shopify has a guide that can easily be used with District with an updated code snippet.

https://help.shopify.com/themes/customization/navigation/link-product-options-in-menus

Follow the steps you see in Shopify's guide, however, when you get to step five you'll want to copy and paste the updated version of the snippet:  https://gist.github.com/jonathanmoore/c0e0e503aa732bf1c05b7a7be4230c61

Select Product Variants by Clicking their Images

Normally, and the recommended approach by Shopify is to select variants by using the drop-down menu. You can switch this around where the product variant can be selected by clicking on a variant image, however, Shopify cautions that this change does have the potential to cause confusion with shoppers.

Shopify's guide for this change can easily be used with District with an updated code snippet.

https://help.shopify.com/themes/customization/products/variants/select-variants-by-clicking-images

Follow the steps you see in Shopify's guide, however, when you get to step seven you will want to copy and paste an updated version of the snippet into assets/theme.min.js instead of theme.js that is indicated in the guide. In step eight, you will need to copy and paste this updated version of the snippet:  https://gist.github.com/jonathanmoore/13a5bdb0552e18baded878b7d8fd28f2

Our premium theme support requires that a valid theme license has been purchased for use with a single store only. Using an unlicensed theme is in violation of Shopify’s Terms of Service https://www.shopify.com/legal/terms

Our premium theme support includes the following:

  • General questions on theme features and technical functionality.
  • Help with setting up and configuring your theme settings.
  • Shopify issues related to a fresh installation of one of our themes.
  • Prompt bug fixes once a theme bug has been identified. We will provide a fix and immediately update the theme for all customers to access.
  • Support for all Shopify Guides verified to work with sectioned themes.
  • In cases where a custom development solution is required, we'll provide details as to why and even provide recommendations related to minor theme customizations and app recommendations.

Our premium theme support does not include:

  • Shopify administration or native Shopify functionality which is handled by Shopify Support.
  • Custom development or custom design work which can better be handled by a Shopify Expert
  • Installation, configuration or troubleshooting related to third-party apps, including those in the official Shopify app store.
  • Design or layout changes beyond simple updates that can be made within the theme options.
  • Upgrading themes.
  • Search engine optimization (SEO) issues, conversion rate optimization (CRO) issues or similar.
  • Page speed or other issues.
  • Installing or troubleshooting issues with Google Merchant Center, Google Analytics, Google AdWords remarketing tags, Google Tag Manager, Facebook Pixels or other third-party analytics or tracking code.
  • Technical support for older versions of our themes is limited. Upgrading to the latest version is always recommended and may be required for us to provide technical support.

Still, feel free to reach out on topics that fall outside of our support to see if it’s something we have an easy solution for or a resource that we can point you to.

For any issues impacting your shop's availability or any other issues you deem an emergency or critical to your business, please contact Shopify support - https://help.shopify.com/questions