General Support

Sometimes you want to style your "Add to cart " button differently than your other main buttons.

You can do this by adding a bit of custom styles. First, open up your theme editor (navigate to /admin/themes, click “Actions” on the copy of our theme, and then click “Edit code”).

You’ll be looking for the theme.scss.liquid file in your assets folder. At the bottom of that file, add this:

.add-to-cart {
  background-color: #000000;
  color: #ffffff;
}

Use hex color codes as values above to get exactly the color you're looking for.

Motion support Impulse support Streamline support

As of Motion v4.1.0 and Impulse v2.1.0, you can set a page to use a custom FAQ page template. All versions of Streamline have this template.

First, navigate to the page you want to designate as your FAQ template and change the template setting to page.faq.

The dropdown will only have the page.faq template option if your theme is currently published.

Set the page template to page.faq

Second, open your theme editor and navigate to that page. This is where you'll find the options to add your questions.

Navigate to FAQ page

Click on Page.faq page.

Select FAQ settings

In here you'll find the ability to add a Rich text or Question content block. Use the Rich text block to create separate sections of questions, and the Question block to add an expandable answer box.

Expandable question box

Impulse support Motion support Streamline support

We cache color swatch files so they load faster since they won't change often. The trade off is that if you decide to change the swatch it won't be updated right away.

To force your swatches to update to the new image you've uploaded, you'll need to jump into the code briefly.

First, open up your theme code editor by navigating to /admin/themes, clicking Actions on your copy of your theme, and then Edit code.

Open these two files:

  • snippets/product-grid-item.liquid
  • snippets/variant-button.liquid

You'll need to remove some code that needs to be done carefully, so it's best you back up the file first. If something goes wrong you can always follow these steps to revert the file.

Search and delete | split: '?' | first and you're all set.

In both files the code should now look like this:

{%- assign color_image = value | handle | append: '.' | append: swatch_file_extension | asset_img_url: '50x' | prepend: 'https:' -%}

Motion support Impulse support Streamline support

As of May 12th, 2019, MailChimp's app that integrates with Shopify is no longer available. Here's Shopify's reasoning. They recommend you uninstall the app from your store by that date, and use one of their recommended alternatives.

For those that don't want to part with MailChimp, Shopify suggests trying one of these email integration apps.

Shopify is also working on a tool that will allow you to easily import your MailChimp lists into Shopify. Until that's ready, you can follow these steps to do it manually.

Our newsletter forms and popup add customer emails to your Shopify customers list and are tagged with Accepts marketing. Our support team isn't able to help with direct integrations with your newsletter services, so if you need some hands on help we suggest checking out TaskHusky or Blend Commerce for something like that. They’re specialize in smaller theme customizations and integrations like this.

Motion support Impulse support Streamline support

As of Motion v3.6.0 and Impulse v1.5.0, dynamic variant availability is enabled by default. All versions of Streamline have this feature.

Working with multiple product variants can be challenging task. When there is only one variant, say size, it's easy to know if it's available so we can visually show it's unavailable.

In the above example, Shopify sends us something like this:

  1. S
  2. M
  3. L
  4. XL

 

One option with four variations to handle, nice and easy. If we add two color variants, we go from 4 possible options to 8. 4 sizes x 2 colors gives us a lot more information to deal with, and Shopify sends it to us in a big list of all the possibilities:

  1. S Black
  2. M Black
  3. L Black
  4. XL Black
  5. S Camel
  6. M Camel
  7. L Camel
  8. XL Camel

 

We take these options and split them up so you have some user friendly buttons or dropdowns, rather than one long list of all the options to choose from. Determining which combination is available is difficult on the code side — especially if you had 3 options with 5 variations each. That's 125 total possibilities and a much longer list to sort through.

Unavailable variants

If we used the same color and size options above but removed XL Black and L Camel, we'd get a list of only 8 instead of 10. Shopify doesn't tell us those don't exist since they're never been set on the product page.

In earlier versions of our themes, and most themes available, the only way to know the status of a variant is to send a query to Shopify with the variant's ID and get a response back of available, sold out, or not available — with that we could update the add to cart button with either Sold out or Unavailable.

Below is an example of what happened when you clicked on XL Black, a variant that isn't available on the shop.

That's not a great experience for your customers.

With this new feature, we get ahead of any possible disappointment by proactively marking unavailable items when the page loads and as you click through them:

This prevents your users from accidentally finding themselves with an option they cannot purchase, like a Large Camel or XL Black product here.

Sold out variants

Sold out variants will not be blocked off. This is because a number of apps, like back in stock notifications, require sold out variants to be clickable. 

Motion support Impulse support Streamline support