AMA Recap: Theme Office Hours with Shopify Partner @tim

[tim]

Thanks for joining the Theme Office Hours in May.

We covered everything from "which theme should I even pick?" (spoiler: there's no perfect answer) to getting into the weeds with code tweaks and trust-building tactics that actually work. As a host I want to to highlight several topics discussed during the session.

1. What is the most attractive template for my website?

The question came a bit late and was not answered in the session.

Unfortunately, there is no universal answer. You need to balance flexibility, ease of use and design choices to ultimately sell your products.

While there are best practices and design guidelines, no one can better define the message to your potential customers than you.

So, free theme may look great, depending on the content you've put there, but often added functionality of premium themes can be beneficial.

2. Understanding code for non-technical folk

To begin with theme modifications one would need a basic understanding of HTML and CSS. The beginners tutorials are widely available on the web and on Youtube.

Next step is to learn how to use your browser Developer Tools -- they are crucial to understand how your store is built and try simple CSS modifications.

3. How can I remove the Heading space under a collection item?

When asking questions in the forums it is always a very good idea (and often a necessity) to share a link to your store (and preview password, if one is set), exact page and area you want to change and share screenshots, mockup of what you're after.

A good question is half the answer.

The actual code for this question was very simple and a good example of why use into Customizer's built-in tools rather then edit code.

Main benefits of using "Custom CSS" are:

a. Your theme would be easy to update in the future -- themes with modified code will require manual updating, while "Custom CSS" is a setting which will be automatically transferred to an updated theme.

b. This code will apply only to the elements in this section, which allows you to style different sections of the same type differently.

4. Dawn theme product page image order

Featured product image is usually not the one selected when visitors come to product pages.

When you arrive at your product page, initial option values are already selected and the image assigned to this selected variant is shown.

At any time there is a variant selected and its price is shown, it's image is selected and cart button state reflects this variant availability. So there is no ambiguity -- if you click "Add to cart" you're getting whatever  the selected photo shows.

Changing this behaviour, while possible, will require massive code modification. One may consider upgrading to a Premium theme -- some of them offer this option out of the box.

As an alternate solution, it is possible to add a hero banner section above the main product page section to show the featured product image by using Dynamic sources for image setting.

5. How can I optimize my product page to increase conversions?

Besides polishing page design and improving user experience on the product page there is another area  which is often overlooked -- trust factors. Visitors will not become customers if they do not trust you/your store. And here I am not talking about trust badges, etc.

Your actual data must be easily available -- contact info, address, legal entity, phone number. Your policies must have your data -- make sure there are no placeholders if you're using templates/defaults.

6. Adding sections to my theme

First, it is always possible to significantly change the look and feel of existing sections by using "Custom CSS" settings and "Custom liquid" sections.

Originally, sections are specific to their own theme. At least, they share same common settings, like button shape and color, page width, etc. Same javascript code may be used by elements in different sections.

Sometimes it is possible to migrate section from one theme to another, but this will usually require some modifications.
Or create a section from scratch.

Then the Apps appeared which allow you to add sections to your theme from their assortment.

Usually, this will complicate theme updates -- automated update will transfer only settings from the current  theme to the updated one, not the modified code.

However, some of those apps offer tools to help with this by moving the sections you've purchased and their settings into updated theme as well.

7. In reality, is it best to switch a theme or just build on what you already have?

This depends on how old is your current theme is, how much it is modified and what benefits you will get with the new theme.

Usually, new themes are better because they were designed with new platform features and modern requirements in mind. They are faster, more flexible, support latest platform functionality.

Of course, new theme will most likely look different, but maybe it's aalready time for a little refresh.

However, if your old theme was heavily modified, these may need to be re-applied in new theme.

Almost always old theme can no longer be updated to newer versions because of heavy code edits. Nowadays platofm provides more opportunities to modify your theme without actual code edititing which allows smooth automated updates.

8. Home Page Enhancements. Should we add moving visuals such as video clips or rotating slides? Use apps for this?

Usually, content added with apps takes longer to load compared to theme built-in functionality -- this may negatively impact your site speed.

Same applies to heavy videos and slides -- while visually appealing, they may make your site slower. This is not always so, but one needs to be careful.

Excessive animation can be visually fatiguing too. Simple hero banner can be fast and still attractive.