FAQs

Great question! We'd love to collaborate but we're fully focused on our internal/product roadmap these days.

But we'd be happy to connect you with a vetted dev/designer/team who can help customize our themes and/or build something more custom as needed. Check out the providers below, or get in touch with more specifics — we'd be happy to point you in the right direction!

HeyCarson

Get a stacked team of Shopify designers and developers. Speedy turnarounds. 1/2 typical agency costs. HeyCarson handles short-term projects, recurring needs, and full-time Shopify work.

• Premium theme setups
• Small and complex theme customizations
• Theme version updates
• Custom design
• Conversion optimization for Shopify merchants across all categories

Pay by the task or per hour. Project quotes start at USD $85/hour. Get in touch with HeyCarson →

Storetasker

A closed network of the most talented Shopify developers around. Get paired directly with a freelancer in hours and execute on projects big & small including Shopify theme customization. They've reviewed over 15,000 developers, designers, and marketers and hand selected the top 3%.

Per-project pricing, starting at USD $75/hour. Get in touch with Storetasker →

Align theme

As mentioned elsewhere, we do not officially support/provide any non-native customizations. But the basic idea of how you could customize the font, color, or something else used in product badges is to use some simple CSS customization:

1. Go to theme settings
2. Open the setting for Custom CSS
3. Add some custom css like the code below — update it for your specifics!
4. Save your edit.

p.c-card-product__badge {
  font-family: YourFamilyName;
}

To make all cards in a row be equal height, we must stretch cards to be the full height of the row.

We will be adding better settings for this in the near future, but in the meantime you can add a small snippet of custom CSS to the section's Custom CSS setting:

1. In your theme editor, click the section you want to edit.
2. Scroll to the bottom of the section settings and click into the Custom CSS settings.
3. Type or paste the code below to stretch cards to be 100% height.
4. Save your work!

Here's the custom CSS you'll need to add:

.card {height: 100%;}

And if you want the card text to always be directly under the image (instead of anchored to the bottom of the card), you can add this CSS too:

.card__content {
  justify-content: flex-start;
}

Align theme

Great question! This is a little more "advanced" but is straightforward enough. You'll basically just need to find and link to the section ID of each accordion.

How to find a section ID using devtools

Note: this is easier to do on a "live" page instead of in the theme editor/template, but both are possible.

1. While on the FAQs page/template open your browser's dev tools
• Devtools info for Chrome available here
• Devtools info for Firefox available here
2. With devtools open, hover and click into the section for which you are trying to find the ID in your browser window.
• The section will be highlighted in the code and the frontend as you click through various chunks of text in devtools.
• This may require a bit of clicking around and you may need to "expand" or "un-nest" parent containers in the theme editor
3. Once you find the section you're looking for, you will see that it starts with something like "<section id="shopify-section-template--15276797132844__accordion-01"
• Click into the id snippet of that code and copy this ID…
4. Find the button for the block you are trying to link and paste this in as your link URL.
• Note you must type a single hash ("#") into the "button link" setting before the section ID.
• The hash tells the frontend that this URL is actually on the same current page, so the browser won't try to navigate to another/external URL.
• So in the example above, I would have #shopify-section-template--15276797132844__accordion-01 as the URL in my button link.
5. Repeat for the other sections as needed.

We've recorded a little example of this process which is available below:

Want to make this?

Then add the callout class to your

Want to make this?

You can also put everything inside a div, ie

📚 Resources

Shopify has a great set of resources available to learn about updating themes. We encourage you to start here:

help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes

Align theme

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 theme

The ReCharge app needs a quick manual update to work properly.

You should only do this after you've fully installed the ReCharge app and it has added all of their snippets to your theme files. To confirm this, you should see these files in your theme's "Snippets" directory:

• subscription-account-login.liquid
• subscription-cart-footer.liquid
• subscription-product.liquid
• subscription-theme-footer.liquid

In your Shopify admin, navigate to the Edit code, then find and click into the component-form-product.liquid file within the Snippets directory.

Find the line which includes the code below — this should normally be found around line 19:

{%- form 'product', product, data-productid: product.id, id: product_form_id, class: product_form_id, novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}

Paste the code below under that line — save your update and check to ensure ReCharge is working as expected!

{% if product.available and request.page_type == 'product' %}{% render 'subscription-product' with product as product %}{% endif %}

Align theme

Open Theme settings>Cards

Uncheck "Show quick add button”

Note: A ‘View product’ button will replace the “Add to cart” button if unchecked.

Great question! We'd love to collaborate but we're fully focused on our internal/product roadmap these days.

But we'd be happy to connect you with a vetted dev/designer/team who can help customize our themes and/or build something more custom as needed. Check out the providers below, or get in touch with more specifics — we'd be happy to point you in the right direction!

HeyCarson

Get a stacked team of Shopify designers and developers. Speedy turnarounds. 1/2 typical agency costs. HeyCarson handles short-term projects, recurring needs, and full-time Shopify work.

• Premium theme setups
• Small and complex theme customizations
• Theme version updates
• Custom design
• Conversion optimization for Shopify merchants across all categories

Pay by the task or per hour. Project quotes start at USD $85/hour. Get in touch with HeyCarson →

Storetasker

A closed network of the most talented Shopify developers around. Get paired directly with a freelancer in hours and execute on projects big & small including Shopify theme customization. They've reviewed over 15,000 developers, designers, and marketers and hand selected the top 3%.

Per-project pricing, starting at USD $75/hour. Get in touch with Storetasker →

Align theme

As mentioned elsewhere, we do not officially support/provide any non-native customizations. But the basic idea of how you could customize the font, color, or something else used in product badges is to use some simple CSS customization:

1. Go to theme settings
2. Open the setting for Custom CSS
3. Add some custom css like the code below — update it for your specifics!
4. Save your edit.

p.c-card-product__badge {
  font-family: YourFamilyName;
}

To make all cards in a row be equal height, we must stretch cards to be the full height of the row.

We will be adding better settings for this in the near future, but in the meantime you can add a small snippet of custom CSS to the section's Custom CSS setting:

1. In your theme editor, click the section you want to edit.
2. Scroll to the bottom of the section settings and click into the Custom CSS settings.
3. Type or paste the code below to stretch cards to be 100% height.
4. Save your work!

Here's the custom CSS you'll need to add:

.card {height: 100%;}

And if you want the card text to always be directly under the image (instead of anchored to the bottom of the card), you can add this CSS too:

.card__content {
  justify-content: flex-start;
}

Align theme

Great question! This is a little more "advanced" but is straightforward enough. You'll basically just need to find and link to the section ID of each accordion.

How to find a section ID using devtools

Note: this is easier to do on a "live" page instead of in the theme editor/template, but both are possible.

1. While on the FAQs page/template open your browser's dev tools
• Devtools info for Chrome available here
• Devtools info for Firefox available here
2. With devtools open, hover and click into the section for which you are trying to find the ID in your browser window.
• The section will be highlighted in the code and the frontend as you click through various chunks of text in devtools.
• This may require a bit of clicking around and you may need to "expand" or "un-nest" parent containers in the theme editor
3. Once you find the section you're looking for, you will see that it starts with something like "<section id="shopify-section-template--15276797132844__accordion-01"
• Click into the id snippet of that code and copy this ID…
4. Find the button for the block you are trying to link and paste this in as your link URL.
• Note you must type a single hash ("#") into the "button link" setting before the section ID.
• The hash tells the frontend that this URL is actually on the same current page, so the browser won't try to navigate to another/external URL.
• So in the example above, I would have #shopify-section-template--15276797132844__accordion-01 as the URL in my button link.
5. Repeat for the other sections as needed.

We've recorded a little example of this process which is available below:

Want to make this?

Then add the callout class to your

Want to make this?

You can also put everything inside a div, ie

📚 Resources

Shopify has a great set of resources available to learn about updating themes. We encourage you to start here:

help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes

Align theme

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 theme

The ReCharge app needs a quick manual update to work properly.

You should only do this after you've fully installed the ReCharge app and it has added all of their snippets to your theme files. To confirm this, you should see these files in your theme's "Snippets" directory:

• subscription-account-login.liquid
• subscription-cart-footer.liquid
• subscription-product.liquid
• subscription-theme-footer.liquid

In your Shopify admin, navigate to the Edit code, then find and click into the component-form-product.liquid file within the Snippets directory.

Find the line which includes the code below — this should normally be found around line 19:

{%- form 'product', product, data-productid: product.id, id: product_form_id, class: product_form_id, novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}

Paste the code below under that line — save your update and check to ensure ReCharge is working as expected!

{% if product.available and request.page_type == 'product' %}{% render 'subscription-product' with product as product %}{% endif %}

Align theme

Open Theme settings>Cards

Uncheck "Show quick add button”

Note: A ‘View product’ button will replace the “Add to cart” button if unchecked.

Updating your theme

We will consistently strive to provide the best possible experience for our customers, and will regularly release theme updates to offer new features, design enhancements, and bug fixes. We'll keep everything up to date with the newest Shopify features and requirements, and will continue to develop new features while keeping your underlying codebase modern, lean, flexible, and well-documented.

Manual theme updates in your Shopify store admin

To ensure your Align theme is up to date, you can easily check its status in your Shopify Admin. Simply click on the version number under the Align theme, and if you see a green check mark icon with the message "This theme is up to date," you're all set!

If an update is available for Align, a notification will replace the version number in your Shopify Admin.

Click on the notification to open the details pop-up, where you can choose to add the updated version to your theme library or view the release notes to learn about the new enhancements.

Any customizations you've made to your theme using the Theme Editor will be preserved. This includes changes to theme settings, page layouts, sections and blocks, app integrations, translations, and more.

Larger themes may take a few minutes to complete the update process. Once the update is finished, you'll find the updated Align theme in your library. It will be indicated by a "Just added" badge and the title will be prefixed with "Updated copy of".

Take your time to review the changes and ensure that your online store looks and functions as expected before publishing the updated version of Align.

Adding an update to your theme library

To add an updated version of the Align theme to your online store library, follow these steps:

1. From your Shopify admin, navigate to Settings > Apps and sales channels.
2. Click on Online store.
3. Open the sales channel.
4. Select Themes.
5. Locate the Align theme you want to update and click on the version notification.
6. Click on Add to theme library. This will create a copy of your original Align theme (named [theme name]), download the updated version, and automatically apply your customizations made through the theme editor.
7. Once the updated Align theme is added to your library, click on Review theme to ensure everything looks and functions as expected. If you have added custom CSS, please double-check that the selectors you targeted still exist in the latest version and that your CSS is applied correctly.
8. When you are ready to make the new version of Align live, simply click on Publish!

Automated updates

As part of our commitment to delivering a seamless experience, Company XYZ provides automated updates for the Align theme. These updates are designed to fix bugs and address security issues without altering the appearance, content, or settings of your theme. You can always check the release notes to stay informed about the improvements included in these updates.

Updates not supported

Please note that only themes installed through the Shopify Theme Store are eligible for updates. If you have purchased a paid theme from a third-party designer, we recommend reaching out to them directly for updates and support.

Additionally, it's important to know that only Online Store 2.0 themes support updates. If you are using an older version of a Shopify theme, it has been sunsetted and is not supported by Company XYZ. We encourage you to consider upgrading to an Online Store 2.0 theme or seek the assistance of a theme expert to take full advantage of the latest Shopify features.

Other recommendations

Practice good renaming habits

It's important to be mindful about naming or renaming your themes — these can quickly get confusing if you let them!

We recommend using a standard naming convention and sticking to it. We like to rename the new updated theme first to something like "Align v1.2 (updated)"; then we'll rename the current (old) version to something like "Align v1.1 (pre-update)". This way it's crystal clear which version you were using before the update and which version you need to test.

Align theme

Align theme

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

Align theme

A block for stacked, expandable information tabs. Used for FAQs, additional details, etc.

It is extremely similar to the Row block, which is seen/used in an Accordion section.

Learn more here ⟶

Align theme

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

Align theme

Align theme

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! ✌️

Align theme

The type of button available on each product card is determined by whether or not the product has variants.

Products without variants can be added directly to the cart from product cards via the "Add to cart" button.

Products with variants use the "View product" button on the product cards so the desired variant can be selected on the product page.

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!)

Align theme

Align theme

Most sections which utilize video have a "mute" setting which is checked by default. To enable audio:

• Select the section in question;
• Scroll to view its settings;
• Find the checkbox setting for "Mute video."
• Uncheck that setting.
• Save your update.
• Check your work!

Also note the other settings you have available, like the ability to autoplay or loop your video.

Align theme

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.

Align theme

Align theme