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.