FAQs

Align is a brand new theme (🎉), and we're hard at work improving the default templates and putting together stellar documentation and tutorials for exactly this kind of question.

Shopify requests that we keep the default templates a bit "basic" as you noticed by the "blank slate" look you mentioned, but we certainly want to match your expectations after looking at the demo (which we hope you like!)

We understand you might need to purchase a theme more quickly and we're working on this exact update + more tutorials/documentation now. It should available via update as soon as 15 May 2023. We will update this entry when more information is available, but this will be made available for easy update for all customers. Thanks for your patience!

For full width images

We recommend "full width" images to be 1600-2400px wide (at 72 dpi). The height depends on you and your layout!

If you're using the banner to design for mobile, we recommend your mobile image be ~640-800px wide (at 72dpi). You can go smaller — 320px minimum — but the slightly larger size shrinks down and looks sharper (another little "protip!")

For multi-column images

For smaller images which are contained within a multi-column section, we generally recommend making the image 1.5-2x as wide as the "average" dimension it will be seen at.

For example: say you have a two-column layout and you want to put the right size image in a banner in one of the columns. You can use ~1600px as your "average" full-width size (probably lower, but it's okay to round up) — so half of that would be ~800px, which sounds about right!

Sometimes it takes a little trial and error to find the right size. As always, we recommend testing your work across multiple devices and tweaking until you're happy!

Don't forget to optimize!

Keep your eye out and don't use massive images! Image dimensions and files can get huge if you're not careful! And heavy images = slow sites = bad SEO = ☹️

Our themes will automatically resize images for mobile, but we always recommend you compress ("tinify") your images so they're as lightweight as possible.

Here's a great/easy/free tool we use all the time for exactly this: tinypng.com

Sometimes you may want to actually use two banners — one for desktop and one for mobile — so you can control the layout with more nuance. This is a great little "protip" to allow making the text shorter on mobile, or use a smaller image (or a different/specific crop), or change the aspect ratio, etc etc.

For that, we added a setting at the bottom of the section settings for "Visibility" which allows you to "hide on desktop" or "hide on mobile."

This same hide on desktop/mobile setting is available on all of the sections, so you can use this in a lot of fun/clever ways. We recommend not going overboard with it… but it's very helpful in the right situations.

Also note we will likely add some new mobile-specific settings to various sections (like banner) in our next set of updates — for things like mobile aspect ratio and mobile background image. We're wrapping up that update now and hope to have the setting available as soon!

Lear more about Visibility settings

To get a product's slideshow gallery to automatically switch to the correct variant image, you'll need to add/select an image for each variant within the Shopify admin. Here's how to do that:

1. In the Shopify admin, navigate to the product you want to edit.
2. Scroll down to the list of variants.
3. Click the small image thumbnail to the left of the variant title.
4. This will open a box to select from the available images that are associated with the product (i.e. any image that you've uploaded to the product's "main" media).
5. Select the image for that variant (or upload a new one). (Note that you can use the same image for multiple variants! i.e. If you have a t-shirt product with red, blue, and black variants, which are also available in small, medium, and large — you would add the red t-shirt image to all red variants (i.e. the red/small variant, the red/medium variant, and the red/large variant... Unless you actually have different images for these!)
6. Save your work.

Here's a quick screencapture of the process: 

Align is a brand new theme which only went live very recently... hence the lack of reviews.

We're thankful to have gotten a few new installs since our launch (thank you customers! 🙏), so we hope some reviews will start appearing over the next few days/weeks.

We're a small, independent studio and we aim to become one of the most trusted providers of themes and apps in the marketplace. Our partnership was founded in 2022 by a few folks with deep experience in the industry who wanted (and knew how!) to build awesome, modern digital products.

Align is our first official theme as a company, and we spent a full year building it the right way. We're building it "the right way" because we genuinely want to help you succeed.

But of course we're also always learning and finding edge cases and encountering things which need to be updated — it's a natural part of the process, and we will continue putting out regular updates to get things right.

By the way, please report all bugs and weirdness! We want to hear about them and get you looking sharp asap!

We welcome your feedback and will offer the best support possible — we are currently hard at work building out our support hub with thorough documentation, examples, tips, tutorials, etc. It'll be awesome.

So stay tuned for some stellar documentation and tutorials, and plan to see regular updates and improvements to our themes.

Thanks for your patience as we get our ducks in a row! We promise the wait will be worth it! ✌️