If you are about to launch your online store or plan to change its look and feel by publishing a new theme, you can seek feedback from others by sharing a preview of your theme. You can create a link that others can use to access a preview of any theme that you’ve added in your Shopify admin. The theme doesn’t have to be published to be shared.

A preview link enables others to explore your online store but prevents them from accessing the checkout. After you create a preview link, it remains active for two days. You can create new links as often as you like; creating a new one won’t affect old preview links.

Steps

1. From your Shopify admin, go to Online Store > Themes.
2. For the theme you want to share, click the … button to open the actions menu, then click Preview.
3. On the preview bar at the bottom of the page, click Share preview. A window containing a unique share link will open.
4. Click Copy link to copy the link to your clipboard.
5. Paste the link into emails, chats, or on social media to share.

In the Header settings, ensure that the Center logo on large screens setting is turned on. In addition, ensure that there are no quicklinks or a CTA, and tick Center menu links on large screens. In the announcement bar, ensure that there is only one announcement, and this will also centre.

Refer to our How to set up the mega menu guide which covers this in more detail.

This is currently not possible, but will be considered for an update in the future.

Yes. If you are using a translation app, check that the translation for the menu item in the Mega Menu block matches the Link name or names exactly. It may be necessary to review or refresh the translations in your app.

Alternatively, add a Mega Menu block for each language ensuring that the Link name matches the translated menu link. In this way the system can pair the Mega Menu block to the correct top level menu item. 

Double check that the link name you’ve entered exactly matches the name of the link as it appears in the Content > Menus page of the Shopify admin area. Sometimes link names could be in a different case, or have a space at the end or beginning, both of which would need to be reflected in the theme settings.

Set search scope to include or exclude products, pages, blog posts etc in Theme Settings > Search. These settings override those in the app. Choose how to display results for out of stock products using the Shopify Search & Discovery app scope settings.

Yes, you can use Shopify Search & Discovery app to add Synonyms or Product boosts to improve their visibility in search results. For guidance on this, refer to the Customize synonyms guide and the Shopify Customizing product boosts guide.

Predictive search is available for stores in the languages list on Shopify Supported languages documentation. Shopify determines the predictive search, not the theme.

Yes, the search will work in other languages. Even if you search for the product in English on the Spanish version, it will serve up the correct product.

Hreflang tags are code elements that allow search engines to determine which language and region a website is intended for, and then return the appropriate URL based on a customer’s language and location. Hreflang tags and meta tags are automatically created for every international domain or subfolder that you set up. The implementation is not controlled by the theme but rather by the Shopify system. Read more about Using hreflang tags to direct customers in the Shopify help center. 

This is managed in the admin under Settings > Markets. Edit the Preferences and choose Automatic redirection for Country/region redirection and Language redirection.

Yes. Please refer to the Shopify URLs and SEO doc.

Our themes currently only support English theme settings.

Please refer to Limitations of selling in multiple languages.

No. All Shopify plans come with the ability to translate your store and display multiple currencies. 

There are settings to independently control the position of the Image block on large screens and mobile devices. On large screens, the image block can be positioned on the left, right or top of the pop-up. On mobile devices, where screen real-estate is at a premium and to preserve a viable reading width for text content, the image block can only be positioned to the top of the pop-up, or hidden completely if a more streamlined appearance is required.

The height of the Age verification pop-up section will scale to accommodate the number of blocks added, and the amount of content in each block, but not beyond the device screen height. Instead, if the content would cause the pop-up to extend beyond the screen height, the content will scroll within the maximum pop-up height. 

Keep it under 3mb if possible, although there are no limits imposed. Remember, the video can loop so if it’s possible to make the loop seamless, the video can appear to be longer than it actually is.

Background videos don’t play sound. They are auto-playing videos that are designed to sit in the background to add a visual design. If you want to have videos that play sound, you can use the default video section.

Browsers don’t like auto-playing videos with sound when you land on a page, most will block the video causing issues. Also, it can be a negative experience for a customer to land on a site and be greeted with a sound that they didn’t accept to play.

Read Google’s Autoplay policy in Chrome article for more.

Temporarily change the video URL to this:

https://cdn.shopify.com/s/files/1/0848/3828/files/Placeholder_video_on_Vimeo_540p.mp4

If this plays, then your video has not been encoded correctly and it will need to be encoded in the h.264 formats. If you search for ‘h.264 mp4 encoders’ online, you should find sites that provide a facility to do this.

Whether a Background video plays on mobile is controlled by the device/browser rather than the theme. Background videos can slow down page loading, use a lot of mobile data, and consume the device’s battery.

Your device/browser may decide not to play the video if:

• Your phone is low on battery or is in ‘Battery saver mode’.
• Your data signal is weak.
• The video has sound.
• The video is too large.
• The current page contains multiple video or is slow to load.
• The video has been encoded in the incorrect format (see the next FAQ for more).
• Or any combination of the above.

Read Google’s Autoplay policy in Chrome article for more.

✅Tip

Always include a cover image for your video. This will be shown instead of the video on occasions where it’s unable to autoplay.

The most reliable (although not guaranteed) way to get a Background video to autoplay is to upload the video file in an MP4 format to Shopify in the Content > Files area of the Shopify admin.

If the video still does not play, see the FAQ below.

You can’t change the subject line for emails sent through a contact form on a Shopify store.

Emails will go to your email address as added in the Shopify admin area, in Settings > Notifications > Sender email. 

Yes, a custom checkbox can be shown on the contact form in versions after 1.6.0. Simply add the Custom checkbox block to the section and fill in all the relevant fields. If you are using a version prior to 1.6.0, an alternative to this may be to add a dropdown box and have the options listed as Yes and No.

There are three possible scenarios. If the End text has been entered, then this will show. If the Hide the timer when the date and time elapses setting is selected, then only section content excluding the timer will show show. If neither of these are used, then the timer will simply remain as 0:0:0:0.

This is likely due to the format of the date or time being entered incorrectly. Double check that the date format is YYYY-MM-DD and the time follows the 24 hour clock HH:MM. Refer to the How to set up the Countdown timer section for more.

The End text will show indefinitely, until new date and time data is entered.

The timer will work in the time zone that the store is operating in.

Carousel

When the setting LAYOUT > Layout > Carousel is used, and no image is selected, then the card will automatically scale to neatly match the height of the product card set in LAYOUT > Product card size.

When using an image, consider using the setting PROMOTION CARD > Image aspect ratio > Fill so the promotion card scales to neatly match the height of the product card.

Grid

When the setting LAYOUT > Layout > Grid is used, the promotion card does not automatically scale to match the height of the product cards set in LAYOUT > Product card size. Instead, the height of the promotion card is determined by the amount of content in PROMOTION CARD > Title and PROMOTION CARD > Text, and the setting used in PROMOTION CARD > Image aspect ratio. When Grid layout is used, the Promotion card will stick when scrolling should the product grid be greater in height.

To avoid this from happening, a good place to start is to check the number of products in the selected collection in Admin > Collection against the setting used in LAYOUT > Maximum products to show.

If there are fewer products in the collection than are set to show, then likely there will be empty spaces – particularly if the setting LAYOUT > Layout > Grid is used. By using different combinations of the settings under LAYOUT – Carousel or Grid, Product card size and Maximum products to show – it is possible to eliminate undesirable gaps in a variety of ways.

The copyright message is a translation and can be changed by opening the Theme Editor > … > Edit default theme content. 

These must be set up in Theme Settings > Social media before the theme will be able to display them in the Image, text and socials block.

No. They are taken directly from the Payment settings in the Shopify admin area.

To individually customize the Column heading background color and Column heading text color, select a column and use the settings provided. To change the text and background colour of the link list area of all columns with a single click, select the Link lists section and use the dropdown menu under Style to select a Colour scheme from Theme settings > Colors.

Several settings can be used to customize the design and layout of the Link lists section. Click on Link lists and use the settings under Layout and Style to customize the section as required.

When working with many columns, consider using the setting Layout > Carousel for a more compact look. The setting Layout > Grid, will automatically stack and tile the columns to create a neat grid free of gaps.

Depending on the number of columns required and the design of your store, you might want to adjust the width of the columns. Click on Link lists and use the dropdown menu under Layout > Column size to adjust as needed.

Double check the main section Layout settings and make sure that the column and row heights are set correctly. Secondly, do the same in the block Layout settings. It may take some trial and error before you get the optimum layout on all screen widths.

Initial tests indicate that using MP4 video is more performant than using third party sources. To keep the theme fast, we have limited this to MP4 in the current version of VotraLee.

By it’s nature, a slideshow contains several different images, all of which are shown in the same sized space. You may find that you can set up your slideshow such that the first image displays perfectly, but if subsequent images have different dimensions – parts of the images will be cropped.

This is best illustrated below:

The best way to avoid this is to set the Image height setting use the Height of first image option, and then make all images within the slideshow the same dimension. This will ensure that the entire image is shown for all slides.

To read more about aspect ratios, refer to the Shopify Understanding image aspect ratio guide.

Focal points may also affect image cropping. Focal points allow you to choose the part of the image which should remain in view, no matter what the screen size. This means that parts of the image may be cropped to ensure that the focal point remains visible. Read Shopify’s Focal points guide for more on this.

The price slider is available if a collection is selected as part of your menu structure and the store is in the default currency. If the customer is not browsing the store in the stores default currency, the price range slider will not show.

The navigation panel is anchored to the right hand side of each slide. We find that this is the most convenient location for the majority of merchants, but if you’d like more granular control over positioning, you can hire a developer to extend the theme to support this.

Check that the menu has been set up correctly in Content > Menus and that the correct menu has been selected. Within the selected menu, double check that the menu links have all been created at the correct level, following the principles shown in the How to set up navigation slideshow section.

There are settings to independently control the position of the Image block on large screens and mobile devices. On large screens, the image block can be positioned on the left, right or top of the pop-up. On mobile devices, where screen real-estate is at a premium and to preserve a viable reading width for text content, the image block can only be positioned to the top of the pop-up, or hidden completely if a more streamlined appearance is required.

The height of the Pop-up section will scale to accommodate the number of blocks added, and the amount of content in each block, but not beyond the device screen height. Instead, if the content would cause the pop-up to extend beyond the screen height, the content will scroll within the maximum pop-up height. For optimal user experience, the width of pop-ups have been pre-determined.

The Metafield namespace and key setting should NOT reference a dynamic source – but should be a text reference to the metafield in the Shopify admin area.

Once set up correctly, the metafield should look like this:

It should NOT look like this:

If this is correctly set up and the metafield is still not working, double check the namespace and key are correct, and ensure the products being compared do actually have a value for those metafields.

If you have added a Description block, consider using the Truncate description setting to control the number of Words to show with the range slider provided.

Also think about limiting the total number of THEME BLOCKS added to the section. Whilst any number of blocks can be used, it should be remembered that the Product comparison grid section is primarily intended to provide a high-level overview of key product features, enabling customers to make more informed purchase decisions as quickly as possible. For more in-depth product information, direct your customers to the relevant Product pages, by enabling the Show product info button in the Product summary block.

A common reason for color swatches not displaying correctly is that they have not yet been set up yet. Refer to the Swatches guide for more on how to set this up.

If you have previously set up color swatches, and they are displaying correctly in product cards and elsewhere on your online store, then it’s likely there is an issue with how color swatches have been set up in the Product comparison grid section.

Check that a Variant option block with the correct Option name has been added to the Product comparison grid – please note that the Option name entered here must match exactly the Option name added under Variants in the admin area.

For optimum user experience, column widths are set to scale dynamically according to the device size. Larger screens will display up to a maximum of five full columns, without horizontal scrolling. On smaller screens (tablet and mobile devices), where displaying five columns at once could lead to readability issues, column widths scale to best fit each particular device. A minimum of two full columns will display on mobile, with the remaining columns accessed via the horizontal scroll bar which displays when required.

Up to a maximum of five products can be added to each Product comparison grid section.

If your product images are smaller than the recommended 1920px wide, they will be scaled up and subsequently may loose some quality. To avoid this, think about uploading a larger image under CUSTOM CONTENT.

Image quality can also be controlled globally in Theme settings > Advanced > Image quality. Check this setting to ensure it is no set to Low (fastest page loading).

The default hotspot color may not have sufficient contrast to stand out from the background image. Under STYLE use the Hotspot color setting to select a color with greater contrast.

No, the discount will need to be copied and pasted from the Discounts page of the Shopify admin area.

If you have set up the section to use Heading and Text blocks, consider using the Show on mobile and Show on large screens settings within these blocks to hide selected content on different devices.

The Section height can also be adjusted in Promo strip > LAYOUT > Section height.

The Pause on hover setting is specifically for desktop users. Mobile users will still be able to click on any of the links and buttons, but on mobile touch screen devices, hovering isn’t possible.

If the image you have selected in step three above is smaller than the recommended 1920px wide, it will be scaled up and subsequently may lose some quality. To avoid this, consider uploading a larger image.

Image quality can also be controlled globally in Theme settings > Advanced > Image quality. Check this setting to ensure it is no set to Low (fastest page loading).

Under LAYOUT uncheck the Show text setting to hide the heading, text and button and increase the image size to full site width. You may want to consider adding a Rich text section directly above or below to help describe the offering.

The default hotspot color may not have sufficient contrast to stand out from the background image. Under STYLE use the color picker to select a color with greater contrast.

By it’s nature, a slideshow contains several different images, all of which are shown in the same sized space. You may find that you can set up your slideshow such that the first image displays perfectly, but if subsequent images have different dimensions – parts of the images will be cropped.

This is best illustrated below:

The best chance to avoid this is to set the Image height to the Height of first image, and then make all images within the slideshow the same dimension. 

To read more about aspect ratios, refer to the Shopify Understanding image aspect ratio guide.

Focal points may also affect image cropping. Focal points allow you to choose the part of the image which should remain in view, no matter what the screen size. This means that parts of the image may be cropped to ensure that the focal point remains visible. Read Shopify’s Focal points guide for more on this.

If you require the video to play on loop, then it is recommended to use a Background video section instead of a Video section. 

No. Browsers don’t allow sound to be active by default on auto-playing videos. Most browsers will block the video, which can cause issues.

If you need audio in your video, it’s always best to give your customers the choice as to when they want to play the video.

Read Google’s autoplay policy in Chrome for more.

No. The Show grid/list layout buttons setting allows customers to control the layout of the product grid. The grid view is always shown by default.

If you have added any of the four promotion blocks (Wide, Media, Card and Filter) to the Collection products section, firstly check that the block is not hidden by using the eye icon to the right of the block name. Set the promotion block to show if it is not already.

It could also be that the promotion(s) Visibility is not set correctly, and it has been hidden in a particular page view. Under Layout > Visibility use the settings to choose whether the promotion shows in Grid view, List view or Grid and List view. Check these settings against the relevant collection, and the chosen view, and adjust accordingly so the promotion displays as intended.  

Another reason a promotion might not be obvious could be the Layout > Position in results setting. Promotion blocks are only shown on the first page of results. 

Lastly, it could be that you are viewing a collection page that has had filters applied to it, and that the setting Layout > Hide when results are filtered has been activated. Enabling this setting will hide the selected promotion(s) from filtered search results. Make sure this has not been checked if you wish for the promotions to show even when filters have been applied.

Refer to Promotions for more.

Unlike the Inventory status block for the product page or featured product section, the inventory text for a product card is pulled through from the themes language files.

✅Steps

1. Open the Shopify admin area and click Online Store.
2. Next to the relevant, theme click the three dots and select Edit default theme content. 
3. Search for the term “inventory” on this page and all the options for customizing inventory related content will appear.
4. Edit the content as you wish, making sure you do not edit, or delete, and text contained within double brackets, example: {{ quantity }}.

Firstly, ensure that your products have inventory levels set up. Refer to How to specify product inventory levels for more.

Secondly, ensure the setting for product cards is enabled. Refer to Adding the inventory status indicator to a product card for more.

If the Product compare section is hidden in the Theme Editor, then the compare function will not work. Customers will see an on screen message “Unable to compare products. Please try again later.” To resolve this problem go into the Theme editor and ensure that the Product compare section is active.

This is only the ‘default’ state of the Compare toggle. If you or a customer has previously turned compare on or off on the store front – their toggle preference will still apply. The above setting will only apply to customers who haven’t clicked this toggle before.

See Compare toggle settings for more.

No, only products can be compared.

In the Product compare feature, product images are set to automatically scale in size to fill the entire width of a single column. By using the Maximum column width on large screens setting, it is possible to make the product image bigger or smaller, depending on your requirements.

Yes. By default, the Product compare section in the Overlay group will display all metafields added to the Metafields block within it. Should you have a varied inventory, or if not all metafields are relevant to all products, consider unchecking the Show empty metafields rows setting. This will hide metafield rows that have no data associated with them for any of the products selected.

Unlike the Inventory status block for the product page or featured product section, the inventory text for a product card is pulled through from the themes language files.

✅Steps

1. Open the Shopify admin area and click Online Store.
2. Next to the relevant, theme click the three dots and select Edit default theme content. 
3. Search for the term “inventory” on this page and all the options for customizing inventory related content will appear.
4. Edit the content as you wish, making sure you do not edit, or delete, and text contained within double brackets, example: {{ quantity }}.

Firstly, ensure that your products have inventory levels set up. Refer to How to specify product inventory levels for more.

Secondly, ensure the setting for product cards is enabled. Refer to Adding the inventory status indicator to a product card for more.

A quick Google search will provide you with a list of basic hex color codes, which can be adjusted for specific store requirements. Alternatively, there are various websites that provide ‘color hex code generators’. If you search for that term on the web, you should find many tools to help.

Yes, for theme swatches, add that Color variant title to the Color option name field.

Yes. The swatch style on the product card is controlled by the Swatches theme settings (Version 1.1.0 and above)

✅Steps

Open the Theme Editor, and click on Theme Settings > Swatches.

Within the Product cards settings, select the the Variant images Style and set the Icon shape and Icon Size

Yes. Under swatch settings, add the translations of your variant title in other languages.

✅Steps

1. Open the Theme Editor, and click on Theme Settings > Swatches.
2. In the Color option name settings, add translations, separating each word with a comma and no spaces in between.
3. Check your translation app. Please note, Shopify’s built-in translation app lacks an auto-translation feature, it is crucial to consistently confirm and auto-translate whenever modifications are made to ensure swatches display correctly.

Color list and Shopify swatches can be used as filters in the Enterprise theme on the collection and search page. (Support for Shopify category metafield swatches in filters was added in version 1.6.1.)

✅Steps

1. Open the Theme Editor, and click on Theme Settings > Swatches.
2. Within the Color option name setting, enter the variant option title (e.g. Color). 
3. Within the Product filters settings, set the Style to Swatch color list or Shopify.