References

• https://help.shopify.com/en/manual/online-store/images/3d-images

No code 3D viewer configuration

You can configure your 3D models in your Shopify admin without needing to edit any code. Adjust the lighting, background color, exposure level, zoom, and initial camera view of your model from your Products page.

Edit a 3D model

You can adjust the Lighting of your 3D model, or the Camera view. To access the 3D model editor, open a product that contains a 3D model. Scroll down to the Media section on the product page, and click the 3D icon in the image.

Edit model lighting

1. Open your Products page and select a product that contains a 3D model.
2. Scroll down to Media in the product. Locate the 3D model and click the 3D icon in the image.
3. Click Edit file. By default, the Lighting edit options are loaded first. Select the type of editing you want to do:

• Environment has pre-set filters that change the shadows and reflections that appear on your image. Click any filter to see how it affects your image.
• Lighting allows you to change the exposure of your 3D image. Use the slider to adjust the image exposure.
• Background changes the background color of your 3D image. You can set the image background to be transparent by selecting the Use transparent background box. Select a background color for your image with the color picker, or enter the hex code for the color in the field below the color picker.

1. After editing your file, click Done to save your changes or click Reset to return the image to its original state.

Edit model camera view

1. Open your Products page and select a product that contains a 3D model.
2. Scroll down to Media in the product. Locate the 3D model and click the 3D icon in the image.
3. Click Edit file. Click the Camera icon to load the model's view options.
4. Select the type of editing you want to do:

• Change the X Rotation of the image by increasing or decreasing the X Rotation angle.
• Change the Y Rotation of the image by increasing or decreasing the Y Rotation angle.
• Zoom in on your image with the Zoom percentage slider.

1. After editing your file, click Done to save your changes or click Reset to return the image to its original state.

References

• https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility

Accessibility resources

To learn more about web accessibility for the topics discussed in this article, see the following resources.

Color contrast resources

• Colors with Good Contrast, an article from the Web Accessibility Initiative
• Contrast Ratio, an online tool that you can use to find the contrast ratio between two colors
• Color Contrast Analyzer, a contrast ratio application for download that was developed by the Paciello Group

Text resources

• 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake, an article from Smashing Magazine
• Text alignment, an article from Web AIM
• Link Appearance, an article from Web AIM
• Using Headings for Content Structure, an article from Web AIM

Alternative text resources

• Text to Speech, an article from the Web Accessibility Initiative
• Alternative Text, an article from Web AIM
• Considerations when writing alt text, an article on Medium.

Slideshow and video resources

• A Primer to Vestibular Disorders, an article from The A11Y Project
• Text to Speech, an article from the Web Accessibility Initiative
• Video Captions, an article from the Web Accessibility Initiative
• Use automatic captioning, an article from YouTube Help
• Captions and subtitles, an article from the Vimeo Help Center

Keyboard support resources

• Keyboard Compatibility, an article from the Web Accessibility Initiative
• Introduction to Focus, an article from Google Developers

Accessibility for themes

When you customize your theme, make design and content choices that help to keep your online store accessible. An accessible website is designed so that it can be used by everyone, including people with disabilities. Making choices for your online store with accessibility in mind can help you to provide an inclusive experience for all of your customers.

The guidelines below were created with the Web Content Accessibility Guidelines (WCAG) in mind. Since there are many factors to consider when creating an accessible website, only following guidelines below doesn't guarantee that your online store is fully accessible. You can learn more about web accessibility by visiting the WCAG website, or by seeing the resources listed below.

Tip

If you're a developer, then you can further optimize your theme for accessibility using Shopify tools and best practices. Learn more on Shopify.dev.

Text accessibility

It's important that the text on your online store is readable for customers who are visually impaired or who have difficulty reading dense blocks of text.

Color contrast

When you edit the colors for your online store, make sure that all of your text is accessible to customers who are colorblind or otherwise visually impaired. These customers rely on adequate color contrast to visually differentiate one thing from another. You can use an online contrast ratio tool to check the contrast of the different parts of your store.

In the example below, the text has a contrast ratio of 2.4:1 against its background, and is difficult to read for some customers.

In the next example, the text has a contrast ratio of 4.8:1, and is easier to read for many customers.

Test the contrast of all text, including body text, headings, links, and form fields. Use the following guidelines:

• The color of body text and button text has a contrast ratio of at least 4.5:1 against its background.
• The color of headings and other large text (font size 24 px and up) has a contrast ratio of at least 3:1 against its background.
• The color of all text over images, including slideshows, banners, and videos, has sufficient contrast ratios against its background. For large text (font size 24 px and up), the contrast is at least 3:1. For smaller text the contrast is at least 4.5:1.
• The color of non-text elements, including input borders and icons, has a contrast ratio of at least 3:1 against its background.

Tip

In some themes, you can place a color overlay between text and an image to improve the contrast and readability of the text.

Text headings

When you add headings to your page with the rich text editor, it's important to keep them in sequential order (1 - 6). Headings are used by assistive technologies to communicate how page content is organized. Skipping over levels, such as a heading level 2 followed by a heading level 4, can be confusing to users. Use the following guideline:

• Headings are used in sequential order and do not skip over levels.

Text size and alignment

When you edit your theme's typography settings, make sure that your text is large enough for customers to comfortably read.

Text should also have consistent spacing between words and letters to make it easy to read. In the example below, the text alignment is justified, which creates inconsistent spacing between words.

In the next example, the text alignment is left-aligned, which creates consistent spacing between words.

When customizing the size and alignment of text, use the following guidelines:

• The minimum font size for body text is the equivalent of 16 px.
• Text alignment isn't justified. Justified text creates inconsistent spacing between words.

Note

Different font families can appear comparatively small or large, even if they have the same font size. If the font you're using appears smaller than other fonts do at 16 px, then use a larger size.

Text links

When you add links to your text, make sure that they can be identified by all of your customers. Because some customers have trouble seeing color, you can't rely on a change in color alone to differentiate a link from regular text. Text should be underlined so that it doesn't rely on the change in color to communicate that the text is a link.

If you edit your theme's stylesheet, then make sure that you don't remove text link styles. Use the following guideline:

• Text links are either underlined or have another visual differentiator from regular text.

Alternative text for images

When you add images to your online store, it's important to make them accessible to customers who are blind or have low vision. You can do this by adding alternative text that accurately describes each image. Customers who use screen readers rely on alt text to communicate the content of images on your online store.

You can add alt text to your product images from the Shopify admin. You can add alt text to the other images in your theme from the theme editor.

When you add alt text to an image, a good practice is to pretend that you're describing the image to someone who has their eyes closed. Help them to create an image in their mind. The way that you describe an image also depends on the context of your web page. For example, you might describe an image differently if your business is a travel agency than if your business is an outdoor equipment store. Consider the following image:

For a travel agency, you might refer to the country and region in which the two friends are traveling, and to the name of the ocean or sea that they're looking at. On the other hand, for an outdoor equipment store, you might focus on the brands and features of the two friends' backpacks.

If your business is a travel agency, then an example of poor alt text might be, "Two people in front of the ocean." For the same agency, an example of good alt text might be, "Two friends traveling in Lagos, Portugal, looking out at the sandy cove of Praia do Camilo on a sunny day."

Add alt text to theme images

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. From the theme editor sidebar, click the section with the image that needs alt text.
4. On the image, click Edit.
5. In the dialog, enter the alt text, and then click Save.
6. Click Save.

Slideshow and video accessibility

When you add videos to your online store, make sure that you consider the needs of customers with low vision, customers who are deaf or hard of hearing, or customers who might be susceptible to vestibular disorders.

Some of these customers rely on the text to speech capability of screen readers, which read aloud the contents of a web page. Additional audio from videos and music, especially when it's unexpected, can make this experience difficult. For customers who are deaf or hard of hearing, it's a good idea to add closed captioning to your videos so that those customers can access the content.

Customers with vestibular disorders can experience dizziness with moving content. Because of this, it's important that slideshows and videos don't play automatically.

Slideshows

When you add a slideshow to your online store, use the following guidelines:

• Slideshows don't play automatically.
• If slideshows do play automatically, then they include a setting that customers can use to pause or stop the slideshow.

Videos

When you add a video to your online store, use the following guidelines:

• Videos don't play automatically.
• If videos do play automatically, then their audio is muted.
• For videos that include audio, the video is fully visible and not obstructed by other page elements. This allows closed captions to remain visible.
• For videos that include dialogue, text transcripts are available. These are included either on the page, or in a link to a separate page.

These guidelines also apply to videos that are in a slideshow.

Keyboard support

Customers with vision or motor impairment might use a keyboard to navigate and complete tasks online. These customers rely on a visual indicator to communicate where their keyboard’s focus is on a web page. In the example below, the Email field has a visual focus indicator:

If you edit your theme's stylesheet, then make sure that you don't remove the keyboard focus style from any page elements. Use the following guideline:

• All interactive page elements have a clear visual indicator when they have keyboard focus. These elements include links, buttons, and form fields.

References

• https://help.shopify.com/en/manual/online-store/blogs/publishing-blogs

Introduction

You can make it easier to manage your blog by using Shopify tools to do the following:

• Create a custom template to layout a blog or an indivdual post in a particular style.
• Set a specific publishing date for posts.
• Publish or unpublish several posts at the same time using a bulk action.
• Invite customers to subscribe to your blog so they'll see your updates.

Create a new blog template

You can create a template to customize the layout of all of the posts in a blog. For example, you could create a template for a blog that will feature a lot of images on posts, and use that template for all posts.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Under the Templates folder, click Add a new template.
4. In the Add a new template dialog box, do the following:
   1. Select the blog option from the dropdown menu.
   2. Choose between a JSON or liquid template, depending on your theme.
   3. In the File name field, write a name for your template.
5. Click Create template.
6. In the online code editor, make your changes to the template to customize the blog post style.
7. Click Save.

Tip

If you're not sure whether to use a JSON or liquid template, then you should check the format of your existing blog templates in the Templates folder.

Creating customized blog templates requires some knowledge of coding, such as using JSON and liquid templates. If you're not comfortable editing code, then you you can hire a Shopify Partner to help you.

Apply a template to a blog

After you create at least one new blog template, you can apply a template to a blog. All of the posts in the blog will display according to the template you set. Using blog templates can be useful when you want the posts to look similar to one another.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click **Manage blogs.
3. Click the blog you want to edit.
4. In the Template drop-down menu, select a template.
5. Click Save.

Create a blog post template

You can create a template to customize the layout of individual blog posts. For example, you could create a template for posts that will feature a lot of images, but that you only want to use for some of the posts in a blog.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Under the Templates folder, click Add a new template.
4. In the Add a new template dialog box, do the following:
   1. Select the article option from the dropdown menu.
   2. Choose between a JSON or liquid template, depending on your theme.
   3. In the File name field, write a name for your template.
5. Click Create template.
6. In the online code editor, make your changes to the template to customize the blog post style.
7. Click Save.

Tip

If you're not sure whether to use a JSON or liquid template, then you should check the format of your existing article templates in the Templates folder.

Creating customized blog post templates requires some knowledge of coding, such as using JSON and liquid templates. If you're not comfortable editing code, then you you can hire a Shopify Partner to help you.

Apply a template to a blog post

After you create at least one new template, you can apply a template to an individual post. Only the posts that have the template applied will appear according to the template you set. Using blog post templates can be useful when you want a shortcut to making a blog post look a certain way, but you don't want to use it fore very post in the blog.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click the blog post that you want to edit.
3. In the Template drop-down menu, select a template.
4. Click Save.

Set a specific publish date for a blog post

You can set a specific publish date for your blog. For example, you can set a post to be published in time for the launch of a new product. You can also backdate a post. Learn more about using future publishing.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, click the post that you want to publish on a specific date.
3. Click Set visibility date.
4. Select the publishing date and time for the post.
5. Click Save.

Publish blog posts in bulk

You can use a bulk action to publish multiple blog posts at the same time and make them visible on your online store.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, check the blog posts that you want to publish.
3. Click Actions.
4. Select Publish selected blog posts.

Unpublish blog posts in bulk

You can use a bulk action to unpublish multiple blog posts at the same time and make them hidden from your online store. This doesn't delete the blog posts from Shopify.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, check the blog posts that you want to unpublish.
3. Click Actions.
4. Select Unpublish selected blog posts.

Invite customers to subscribe to your blog

Shopify automatically produces an RSS feed for every blog that you create, so customers can subscribe to it and receive notifications when you publish a new post. The feed URL is the URL of the blog page with .atom appended. For example, http://store.myshopify.com/blogs/blogname.atom. Customers who want to subscribe to your blog can paste the feed URL into a feed reader.

You can include your feed URL in a blog post to invite customers to subscribe to your blog.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click the name of the blog post where you want to add the feed name for the blog.
3. In the Content field, enter text with the feed name, for example Subscribe to this blog's RSS feed using http://store.myshopify.com/blogs/blogname.atom.
4. Click Save.

Allow customers to subscribe to your blog feed with FeedBurner

FeedBurner is a third-party service that delivers your blog content to subscribing customers.

If you previously integrated your blog with FeedBurner, then your existing blog and its posts stay connected to FeedBurner.

New or existing blogs that aren't already integrated with FeedBurner can't use the service.

Tip

Google has stopped supporting FeedBurner. To get help with FeedBurner, visit the FeedBurner Help Group.

References

• https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/shopify-magic

Automatically generating content in the theme editor

Through Shopify Magic, you can use Artificial Intelligence (AI) to generate suggestions for content in your theme editor based on details that you provide, such as headings and titles. Before you generate automatic text for your theme, review Tips for using Shopify Magic text generation.

Caution

You're responsible for the accuracy of all the content that you publish to your store, even when you use automatic text generation to create it. Generated text can include content sourced from the AI's database that doesn't necessarily apply to your products, such as product benefits you don't list or facts about similar products. For example, the generated content for a T-shirt could mention care instructions such as "machine-washable", or product guarantees such as "guaranteed up to 1000 washes". It's important that you read all generated content closely to ensure accuracy before publishing. Refer to Shopify's Terms of Service to learn more about your responsibilities for store content.

Supported languages

​Support for automatically generated product descriptions is currently available in the following languages:

• English
• German
• Spanish
• French
• Italian
• Japanese
• Portuguese (Brazilian)
• Chinese (Simplified)

By default, American English is the dialect used for English suggestions. The language data that the AI uses is largely from North American sources, so generated content might contain vocabulary and expressions that are local to that region. You can change any part of the content suggestions to match what your customers would expect.

The language that's used to generate your output suggestions is determined by the default language for your storefront. If your default storefront language isn't one of the supported languages, then this feature isn't available in your admin. To use this feature, update your language settings to a supported language.

Although the list of supported languages are the languages that have been verified and tested, the text generation might work for additional languages to differing degrees of quality. If you want to try generating output in your preferred language, then generate the English output, and then use the Translate and Adapt app to translate the generated output to your preferred language. ​

Generate content for your online store

Note

Content can be generated only in specific text fields in the theme editor. If a text box doesn't have the Generate text icon, then suggestions can't be generated for that field.

Steps:

1. From your Shopify admin, go to Online store > Themes.
2. Next to the theme that you want to edit, click Customize.
3. Select a text element in your theme, such as an image banner heading.
4. In the text box, click the Generate text icon in the toolbar.
5. Enter some keywords to indicate the type of content that you want to be generated, such as headline, title, subtitle, or announcement. The more details that you add, the more relevant the suggested content is.
6. Optional: Select a tone for the generated text. You can select one of the predefined tones or add a custom tone. Learn more about choosing a tone for your theme text.
7. Click Generate.
8. Optional: To refresh the suggested text and get a new version, do any of the following:
   • To get new suggestions with the same settings, click Generate again.
   • To change the tone of the suggested text, select a new tone option, and then click Generate again.
9. Optional: To view different versions that you’ve generated, use the arrows below the generated text to move forward and backward through the versions.
   10. Click the suggested content that you want to keep.
   11. Optional: Edit the content to match your store tone and brand.
   12. After you complete your edits, click Save.

Improving the theme content suggestions that you receive

The content that you create needs to communicate the benefits of your products in a non-generic way that reflects your store’s brand. You get better results in your automatically-generated content when you include more details, and choose a tone that matches your business.

​To improve results, consider adding the following types of information:

• Information about the customer: Often, the best content reflects the needs and interests of your target customer. Include some keywords about who the products would be great for, such as their demographic (young parents) or their values (eco-conscious, outdoorsy). This information is helpful for generating product benefits and determining the type of vocabulary that's included in your results.
• Specific details about materials, production method, fit, intended use: Any product specifications you provide can be turned into paragraphs in your generated content.
• Important brand keywords or terminology: Although the results include different phrasing for the information you provide, special words or phrases are often kept, such as brand names or unique descriptive words. For example, if you describe your mint lip balm as mint-tastic in the keywords, then the generated suggestions will often include that term.
• Other details: You can use the details and images that you’ve added to your theme to give you ideas about what keywords to provide, such as product vendors, product categories, or the names of your collections.

References

• https://help.shopify.com/en/manual/online-store/images/3d-images

No code 3D viewer configuration

You can configure your 3D models in your Shopify admin without needing to edit any code. Adjust the lighting, background color, exposure level, zoom, and initial camera view of your model from your Products page.

Edit a 3D model

You can adjust the Lighting of your 3D model, or the Camera view. To access the 3D model editor, open a product that contains a 3D model. Scroll down to the Media section on the product page, and click the 3D icon in the image.

Edit model lighting

1. Open your Products page and select a product that contains a 3D model.
2. Scroll down to Media in the product. Locate the 3D model and click the 3D icon in the image.
3. Click Edit file. By default, the Lighting edit options are loaded first. Select the type of editing you want to do:

• Environment has pre-set filters that change the shadows and reflections that appear on your image. Click any filter to see how it affects your image.
• Lighting allows you to change the exposure of your 3D image. Use the slider to adjust the image exposure.
• Background changes the background color of your 3D image. You can set the image background to be transparent by selecting the Use transparent background box. Select a background color for your image with the color picker, or enter the hex code for the color in the field below the color picker.

1. After editing your file, click Done to save your changes or click Reset to return the image to its original state.

Edit model camera view

1. Open your Products page and select a product that contains a 3D model.
2. Scroll down to Media in the product. Locate the 3D model and click the 3D icon in the image.
3. Click Edit file. Click the Camera icon to load the model's view options.
4. Select the type of editing you want to do:

• Change the X Rotation of the image by increasing or decreasing the X Rotation angle.
• Change the Y Rotation of the image by increasing or decreasing the Y Rotation angle.
• Zoom in on your image with the Zoom percentage slider.

1. After editing your file, click Done to save your changes or click Reset to return the image to its original state.

References

• https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility

Accessibility resources

To learn more about web accessibility for the topics discussed in this article, see the following resources.

Color contrast resources

• Colors with Good Contrast, an article from the Web Accessibility Initiative
• Contrast Ratio, an online tool that you can use to find the contrast ratio between two colors
• Color Contrast Analyzer, a contrast ratio application for download that was developed by the Paciello Group

Text resources

• 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake, an article from Smashing Magazine
• Text alignment, an article from Web AIM
• Link Appearance, an article from Web AIM
• Using Headings for Content Structure, an article from Web AIM

Alternative text resources

• Text to Speech, an article from the Web Accessibility Initiative
• Alternative Text, an article from Web AIM
• Considerations when writing alt text, an article on Medium.

Slideshow and video resources

• A Primer to Vestibular Disorders, an article from The A11Y Project
• Text to Speech, an article from the Web Accessibility Initiative
• Video Captions, an article from the Web Accessibility Initiative
• Use automatic captioning, an article from YouTube Help
• Captions and subtitles, an article from the Vimeo Help Center

Keyboard support resources

• Keyboard Compatibility, an article from the Web Accessibility Initiative
• Introduction to Focus, an article from Google Developers

Accessibility for themes

When you customize your theme, make design and content choices that help to keep your online store accessible. An accessible website is designed so that it can be used by everyone, including people with disabilities. Making choices for your online store with accessibility in mind can help you to provide an inclusive experience for all of your customers.

The guidelines below were created with the Web Content Accessibility Guidelines (WCAG) in mind. Since there are many factors to consider when creating an accessible website, only following guidelines below doesn't guarantee that your online store is fully accessible. You can learn more about web accessibility by visiting the WCAG website, or by seeing the resources listed below.

Tip

If you're a developer, then you can further optimize your theme for accessibility using Shopify tools and best practices. Learn more on Shopify.dev.

Text accessibility

It's important that the text on your online store is readable for customers who are visually impaired or who have difficulty reading dense blocks of text.

Color contrast

When you edit the colors for your online store, make sure that all of your text is accessible to customers who are colorblind or otherwise visually impaired. These customers rely on adequate color contrast to visually differentiate one thing from another. You can use an online contrast ratio tool to check the contrast of the different parts of your store.

In the example below, the text has a contrast ratio of 2.4:1 against its background, and is difficult to read for some customers.

In the next example, the text has a contrast ratio of 4.8:1, and is easier to read for many customers.

Test the contrast of all text, including body text, headings, links, and form fields. Use the following guidelines:

• The color of body text and button text has a contrast ratio of at least 4.5:1 against its background.
• The color of headings and other large text (font size 24 px and up) has a contrast ratio of at least 3:1 against its background.
• The color of all text over images, including slideshows, banners, and videos, has sufficient contrast ratios against its background. For large text (font size 24 px and up), the contrast is at least 3:1. For smaller text the contrast is at least 4.5:1.
• The color of non-text elements, including input borders and icons, has a contrast ratio of at least 3:1 against its background.

Tip

In some themes, you can place a color overlay between text and an image to improve the contrast and readability of the text.

Text headings

When you add headings to your page with the rich text editor, it's important to keep them in sequential order (1 - 6). Headings are used by assistive technologies to communicate how page content is organized. Skipping over levels, such as a heading level 2 followed by a heading level 4, can be confusing to users. Use the following guideline:

• Headings are used in sequential order and do not skip over levels.

Text size and alignment

When you edit your theme's typography settings, make sure that your text is large enough for customers to comfortably read.

Text should also have consistent spacing between words and letters to make it easy to read. In the example below, the text alignment is justified, which creates inconsistent spacing between words.

In the next example, the text alignment is left-aligned, which creates consistent spacing between words.

When customizing the size and alignment of text, use the following guidelines:

• The minimum font size for body text is the equivalent of 16 px.
• Text alignment isn't justified. Justified text creates inconsistent spacing between words.

Note

Different font families can appear comparatively small or large, even if they have the same font size. If the font you're using appears smaller than other fonts do at 16 px, then use a larger size.

Text links

When you add links to your text, make sure that they can be identified by all of your customers. Because some customers have trouble seeing color, you can't rely on a change in color alone to differentiate a link from regular text. Text should be underlined so that it doesn't rely on the change in color to communicate that the text is a link.

If you edit your theme's stylesheet, then make sure that you don't remove text link styles. Use the following guideline:

• Text links are either underlined or have another visual differentiator from regular text.

Alternative text for images

When you add images to your online store, it's important to make them accessible to customers who are blind or have low vision. You can do this by adding alternative text that accurately describes each image. Customers who use screen readers rely on alt text to communicate the content of images on your online store.

You can add alt text to your product images from the Shopify admin. You can add alt text to the other images in your theme from the theme editor.

When you add alt text to an image, a good practice is to pretend that you're describing the image to someone who has their eyes closed. Help them to create an image in their mind. The way that you describe an image also depends on the context of your web page. For example, you might describe an image differently if your business is a travel agency than if your business is an outdoor equipment store. Consider the following image:

For a travel agency, you might refer to the country and region in which the two friends are traveling, and to the name of the ocean or sea that they're looking at. On the other hand, for an outdoor equipment store, you might focus on the brands and features of the two friends' backpacks.

If your business is a travel agency, then an example of poor alt text might be, "Two people in front of the ocean." For the same agency, an example of good alt text might be, "Two friends traveling in Lagos, Portugal, looking out at the sandy cove of Praia do Camilo on a sunny day."

Add alt text to theme images

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. From the theme editor sidebar, click the section with the image that needs alt text.
4. On the image, click Edit.
5. In the dialog, enter the alt text, and then click Save.
6. Click Save.

Slideshow and video accessibility

When you add videos to your online store, make sure that you consider the needs of customers with low vision, customers who are deaf or hard of hearing, or customers who might be susceptible to vestibular disorders.

Some of these customers rely on the text to speech capability of screen readers, which read aloud the contents of a web page. Additional audio from videos and music, especially when it's unexpected, can make this experience difficult. For customers who are deaf or hard of hearing, it's a good idea to add closed captioning to your videos so that those customers can access the content.

Customers with vestibular disorders can experience dizziness with moving content. Because of this, it's important that slideshows and videos don't play automatically.

Slideshows

When you add a slideshow to your online store, use the following guidelines:

• Slideshows don't play automatically.
• If slideshows do play automatically, then they include a setting that customers can use to pause or stop the slideshow.

Videos

When you add a video to your online store, use the following guidelines:

• Videos don't play automatically.
• If videos do play automatically, then their audio is muted.
• For videos that include audio, the video is fully visible and not obstructed by other page elements. This allows closed captions to remain visible.
• For videos that include dialogue, text transcripts are available. These are included either on the page, or in a link to a separate page.

These guidelines also apply to videos that are in a slideshow.

Keyboard support

Customers with vision or motor impairment might use a keyboard to navigate and complete tasks online. These customers rely on a visual indicator to communicate where their keyboard’s focus is on a web page. In the example below, the Email field has a visual focus indicator:

If you edit your theme's stylesheet, then make sure that you don't remove the keyboard focus style from any page elements. Use the following guideline:

• All interactive page elements have a clear visual indicator when they have keyboard focus. These elements include links, buttons, and form fields.

References

• https://help.shopify.com/en/manual/online-store/blogs/publishing-blogs

Introduction

You can make it easier to manage your blog by using Shopify tools to do the following:

• Create a custom template to layout a blog or an indivdual post in a particular style.
• Set a specific publishing date for posts.
• Publish or unpublish several posts at the same time using a bulk action.
• Invite customers to subscribe to your blog so they'll see your updates.

Create a new blog template

You can create a template to customize the layout of all of the posts in a blog. For example, you could create a template for a blog that will feature a lot of images on posts, and use that template for all posts.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Under the Templates folder, click Add a new template.
4. In the Add a new template dialog box, do the following:
   1. Select the blog option from the dropdown menu.
   2. Choose between a JSON or liquid template, depending on your theme.
   3. In the File name field, write a name for your template.
5. Click Create template.
6. In the online code editor, make your changes to the template to customize the blog post style.
7. Click Save.

Tip

If you're not sure whether to use a JSON or liquid template, then you should check the format of your existing blog templates in the Templates folder.

Creating customized blog templates requires some knowledge of coding, such as using JSON and liquid templates. If you're not comfortable editing code, then you you can hire a Shopify Partner to help you.

Apply a template to a blog

After you create at least one new blog template, you can apply a template to a blog. All of the posts in the blog will display according to the template you set. Using blog templates can be useful when you want the posts to look similar to one another.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click **Manage blogs.
3. Click the blog you want to edit.
4. In the Template drop-down menu, select a template.
5. Click Save.

Create a blog post template

You can create a template to customize the layout of individual blog posts. For example, you could create a template for posts that will feature a lot of images, but that you only want to use for some of the posts in a blog.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Under the Templates folder, click Add a new template.
4. In the Add a new template dialog box, do the following:
   1. Select the article option from the dropdown menu.
   2. Choose between a JSON or liquid template, depending on your theme.
   3. In the File name field, write a name for your template.
5. Click Create template.
6. In the online code editor, make your changes to the template to customize the blog post style.
7. Click Save.

Tip

If you're not sure whether to use a JSON or liquid template, then you should check the format of your existing article templates in the Templates folder.

Creating customized blog post templates requires some knowledge of coding, such as using JSON and liquid templates. If you're not comfortable editing code, then you you can hire a Shopify Partner to help you.

Apply a template to a blog post

After you create at least one new template, you can apply a template to an individual post. Only the posts that have the template applied will appear according to the template you set. Using blog post templates can be useful when you want a shortcut to making a blog post look a certain way, but you don't want to use it fore very post in the blog.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click the blog post that you want to edit.
3. In the Template drop-down menu, select a template.
4. Click Save.

Set a specific publish date for a blog post

You can set a specific publish date for your blog. For example, you can set a post to be published in time for the launch of a new product. You can also backdate a post. Learn more about using future publishing.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, click the post that you want to publish on a specific date.
3. Click Set visibility date.
4. Select the publishing date and time for the post.
5. Click Save.

Publish blog posts in bulk

You can use a bulk action to publish multiple blog posts at the same time and make them visible on your online store.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, check the blog posts that you want to publish.
3. Click Actions.
4. Select Publish selected blog posts.

Unpublish blog posts in bulk

You can use a bulk action to unpublish multiple blog posts at the same time and make them hidden from your online store. This doesn't delete the blog posts from Shopify.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, check the blog posts that you want to unpublish.
3. Click Actions.
4. Select Unpublish selected blog posts.

Invite customers to subscribe to your blog

Shopify automatically produces an RSS feed for every blog that you create, so customers can subscribe to it and receive notifications when you publish a new post. The feed URL is the URL of the blog page with .atom appended. For example, http://store.myshopify.com/blogs/blogname.atom. Customers who want to subscribe to your blog can paste the feed URL into a feed reader.

You can include your feed URL in a blog post to invite customers to subscribe to your blog.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click the name of the blog post where you want to add the feed name for the blog.
3. In the Content field, enter text with the feed name, for example Subscribe to this blog's RSS feed using http://store.myshopify.com/blogs/blogname.atom.
4. Click Save.

Allow customers to subscribe to your blog feed with FeedBurner

FeedBurner is a third-party service that delivers your blog content to subscribing customers.

If you previously integrated your blog with FeedBurner, then your existing blog and its posts stay connected to FeedBurner.

New or existing blogs that aren't already integrated with FeedBurner can't use the service.

Tip

Google has stopped supporting FeedBurner. To get help with FeedBurner, visit the FeedBurner Help Group.

References

• https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/shopify-magic

Automatically generating content in the theme editor

Through Shopify Magic, you can use Artificial Intelligence (AI) to generate suggestions for content in your theme editor based on details that you provide, such as headings and titles. Before you generate automatic text for your theme, review Tips for using Shopify Magic text generation.

Caution

You're responsible for the accuracy of all the content that you publish to your store, even when you use automatic text generation to create it. Generated text can include content sourced from the AI's database that doesn't necessarily apply to your products, such as product benefits you don't list or facts about similar products. For example, the generated content for a T-shirt could mention care instructions such as "machine-washable", or product guarantees such as "guaranteed up to 1000 washes". It's important that you read all generated content closely to ensure accuracy before publishing. Refer to Shopify's Terms of Service to learn more about your responsibilities for store content.

Supported languages

​Support for automatically generated product descriptions is currently available in the following languages:

• English
• German
• Spanish
• French
• Italian
• Japanese
• Portuguese (Brazilian)
• Chinese (Simplified)

By default, American English is the dialect used for English suggestions. The language data that the AI uses is largely from North American sources, so generated content might contain vocabulary and expressions that are local to that region. You can change any part of the content suggestions to match what your customers would expect.

The language that's used to generate your output suggestions is determined by the default language for your storefront. If your default storefront language isn't one of the supported languages, then this feature isn't available in your admin. To use this feature, update your language settings to a supported language.

Although the list of supported languages are the languages that have been verified and tested, the text generation might work for additional languages to differing degrees of quality. If you want to try generating output in your preferred language, then generate the English output, and then use the Translate and Adapt app to translate the generated output to your preferred language. ​

Generate content for your online store

Note

Content can be generated only in specific text fields in the theme editor. If a text box doesn't have the Generate text icon, then suggestions can't be generated for that field.

Steps:

1. From your Shopify admin, go to Online store > Themes.
2. Next to the theme that you want to edit, click Customize.
3. Select a text element in your theme, such as an image banner heading.
4. In the text box, click the Generate text icon in the toolbar.
5. Enter some keywords to indicate the type of content that you want to be generated, such as headline, title, subtitle, or announcement. The more details that you add, the more relevant the suggested content is.
6. Optional: Select a tone for the generated text. You can select one of the predefined tones or add a custom tone. Learn more about choosing a tone for your theme text.
7. Click Generate.
8. Optional: To refresh the suggested text and get a new version, do any of the following:
   • To get new suggestions with the same settings, click Generate again.
   • To change the tone of the suggested text, select a new tone option, and then click Generate again.
9. Optional: To view different versions that you’ve generated, use the arrows below the generated text to move forward and backward through the versions.
   10. Click the suggested content that you want to keep.
   11. Optional: Edit the content to match your store tone and brand.
   12. After you complete your edits, click Save.

Improving the theme content suggestions that you receive

The content that you create needs to communicate the benefits of your products in a non-generic way that reflects your store’s brand. You get better results in your automatically-generated content when you include more details, and choose a tone that matches your business.

​To improve results, consider adding the following types of information:

• Information about the customer: Often, the best content reflects the needs and interests of your target customer. Include some keywords about who the products would be great for, such as their demographic (young parents) or their values (eco-conscious, outdoorsy). This information is helpful for generating product benefits and determining the type of vocabulary that's included in your results.
• Specific details about materials, production method, fit, intended use: Any product specifications you provide can be turned into paragraphs in your generated content.
• Important brand keywords or terminology: Although the results include different phrasing for the information you provide, special words or phrases are often kept, such as brand names or unique descriptive words. For example, if you describe your mint lip balm as mint-tastic in the keywords, then the generated suggestions will often include that term.
• Other details: You can use the details and images that you’ve added to your theme to give you ideas about what keywords to provide, such as product vendors, product categories, or the names of your collections.

References

• https://help.shopify.com/en/manual/online-store/images/3d-images

No code 3D viewer configuration

You can configure your 3D models in your Shopify admin without needing to edit any code. Adjust the lighting, background color, exposure level, zoom, and initial camera view of your model from your Products page.

Edit a 3D model

You can adjust the Lighting of your 3D model, or the Camera view. To access the 3D model editor, open a product that contains a 3D model. Scroll down to the Media section on the product page, and click the 3D icon in the image.

Edit model lighting

1. Open your Products page and select a product that contains a 3D model.
2. Scroll down to Media in the product. Locate the 3D model and click the 3D icon in the image.
3. Click Edit file. By default, the Lighting edit options are loaded first. Select the type of editing you want to do:

• Environment has pre-set filters that change the shadows and reflections that appear on your image. Click any filter to see how it affects your image.
• Lighting allows you to change the exposure of your 3D image. Use the slider to adjust the image exposure.
• Background changes the background color of your 3D image. You can set the image background to be transparent by selecting the Use transparent background box. Select a background color for your image with the color picker, or enter the hex code for the color in the field below the color picker.

1. After editing your file, click Done to save your changes or click Reset to return the image to its original state.

Edit model camera view

1. Open your Products page and select a product that contains a 3D model.
2. Scroll down to Media in the product. Locate the 3D model and click the 3D icon in the image.
3. Click Edit file. Click the Camera icon to load the model's view options.
4. Select the type of editing you want to do:

• Change the X Rotation of the image by increasing or decreasing the X Rotation angle.
• Change the Y Rotation of the image by increasing or decreasing the Y Rotation angle.
• Zoom in on your image with the Zoom percentage slider.

1. After editing your file, click Done to save your changes or click Reset to return the image to its original state.

References

• https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility

Accessibility resources

To learn more about web accessibility for the topics discussed in this article, see the following resources.

Color contrast resources

• Colors with Good Contrast, an article from the Web Accessibility Initiative
• Contrast Ratio, an online tool that you can use to find the contrast ratio between two colors
• Color Contrast Analyzer, a contrast ratio application for download that was developed by the Paciello Group

Text resources

• 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake, an article from Smashing Magazine
• Text alignment, an article from Web AIM
• Link Appearance, an article from Web AIM
• Using Headings for Content Structure, an article from Web AIM

Alternative text resources

• Text to Speech, an article from the Web Accessibility Initiative
• Alternative Text, an article from Web AIM
• Considerations when writing alt text, an article on Medium.

Slideshow and video resources

• A Primer to Vestibular Disorders, an article from The A11Y Project
• Text to Speech, an article from the Web Accessibility Initiative
• Video Captions, an article from the Web Accessibility Initiative
• Use automatic captioning, an article from YouTube Help
• Captions and subtitles, an article from the Vimeo Help Center

Keyboard support resources

• Keyboard Compatibility, an article from the Web Accessibility Initiative
• Introduction to Focus, an article from Google Developers

Accessibility for themes

When you customize your theme, make design and content choices that help to keep your online store accessible. An accessible website is designed so that it can be used by everyone, including people with disabilities. Making choices for your online store with accessibility in mind can help you to provide an inclusive experience for all of your customers.

The guidelines below were created with the Web Content Accessibility Guidelines (WCAG) in mind. Since there are many factors to consider when creating an accessible website, only following guidelines below doesn't guarantee that your online store is fully accessible. You can learn more about web accessibility by visiting the WCAG website, or by seeing the resources listed below.

Tip

If you're a developer, then you can further optimize your theme for accessibility using Shopify tools and best practices. Learn more on Shopify.dev.

Text accessibility

It's important that the text on your online store is readable for customers who are visually impaired or who have difficulty reading dense blocks of text.

Color contrast

When you edit the colors for your online store, make sure that all of your text is accessible to customers who are colorblind or otherwise visually impaired. These customers rely on adequate color contrast to visually differentiate one thing from another. You can use an online contrast ratio tool to check the contrast of the different parts of your store.

In the example below, the text has a contrast ratio of 2.4:1 against its background, and is difficult to read for some customers.

In the next example, the text has a contrast ratio of 4.8:1, and is easier to read for many customers.

Test the contrast of all text, including body text, headings, links, and form fields. Use the following guidelines:

• The color of body text and button text has a contrast ratio of at least 4.5:1 against its background.
• The color of headings and other large text (font size 24 px and up) has a contrast ratio of at least 3:1 against its background.
• The color of all text over images, including slideshows, banners, and videos, has sufficient contrast ratios against its background. For large text (font size 24 px and up), the contrast is at least 3:1. For smaller text the contrast is at least 4.5:1.
• The color of non-text elements, including input borders and icons, has a contrast ratio of at least 3:1 against its background.

Tip

In some themes, you can place a color overlay between text and an image to improve the contrast and readability of the text.

Text headings

When you add headings to your page with the rich text editor, it's important to keep them in sequential order (1 - 6). Headings are used by assistive technologies to communicate how page content is organized. Skipping over levels, such as a heading level 2 followed by a heading level 4, can be confusing to users. Use the following guideline:

• Headings are used in sequential order and do not skip over levels.

Text size and alignment

When you edit your theme's typography settings, make sure that your text is large enough for customers to comfortably read.

Text should also have consistent spacing between words and letters to make it easy to read. In the example below, the text alignment is justified, which creates inconsistent spacing between words.

In the next example, the text alignment is left-aligned, which creates consistent spacing between words.

When customizing the size and alignment of text, use the following guidelines:

• The minimum font size for body text is the equivalent of 16 px.
• Text alignment isn't justified. Justified text creates inconsistent spacing between words.

Note

Different font families can appear comparatively small or large, even if they have the same font size. If the font you're using appears smaller than other fonts do at 16 px, then use a larger size.

Text links

When you add links to your text, make sure that they can be identified by all of your customers. Because some customers have trouble seeing color, you can't rely on a change in color alone to differentiate a link from regular text. Text should be underlined so that it doesn't rely on the change in color to communicate that the text is a link.

If you edit your theme's stylesheet, then make sure that you don't remove text link styles. Use the following guideline:

• Text links are either underlined or have another visual differentiator from regular text.

Alternative text for images

When you add images to your online store, it's important to make them accessible to customers who are blind or have low vision. You can do this by adding alternative text that accurately describes each image. Customers who use screen readers rely on alt text to communicate the content of images on your online store.

You can add alt text to your product images from the Shopify admin. You can add alt text to the other images in your theme from the theme editor.

When you add alt text to an image, a good practice is to pretend that you're describing the image to someone who has their eyes closed. Help them to create an image in their mind. The way that you describe an image also depends on the context of your web page. For example, you might describe an image differently if your business is a travel agency than if your business is an outdoor equipment store. Consider the following image:

For a travel agency, you might refer to the country and region in which the two friends are traveling, and to the name of the ocean or sea that they're looking at. On the other hand, for an outdoor equipment store, you might focus on the brands and features of the two friends' backpacks.

If your business is a travel agency, then an example of poor alt text might be, "Two people in front of the ocean." For the same agency, an example of good alt text might be, "Two friends traveling in Lagos, Portugal, looking out at the sandy cove of Praia do Camilo on a sunny day."

Add alt text to theme images

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. From the theme editor sidebar, click the section with the image that needs alt text.
4. On the image, click Edit.
5. In the dialog, enter the alt text, and then click Save.
6. Click Save.

Slideshow and video accessibility

When you add videos to your online store, make sure that you consider the needs of customers with low vision, customers who are deaf or hard of hearing, or customers who might be susceptible to vestibular disorders.

Some of these customers rely on the text to speech capability of screen readers, which read aloud the contents of a web page. Additional audio from videos and music, especially when it's unexpected, can make this experience difficult. For customers who are deaf or hard of hearing, it's a good idea to add closed captioning to your videos so that those customers can access the content.

Customers with vestibular disorders can experience dizziness with moving content. Because of this, it's important that slideshows and videos don't play automatically.

Slideshows

When you add a slideshow to your online store, use the following guidelines:

• Slideshows don't play automatically.
• If slideshows do play automatically, then they include a setting that customers can use to pause or stop the slideshow.

Videos

When you add a video to your online store, use the following guidelines:

• Videos don't play automatically.
• If videos do play automatically, then their audio is muted.
• For videos that include audio, the video is fully visible and not obstructed by other page elements. This allows closed captions to remain visible.
• For videos that include dialogue, text transcripts are available. These are included either on the page, or in a link to a separate page.

These guidelines also apply to videos that are in a slideshow.

Keyboard support

Customers with vision or motor impairment might use a keyboard to navigate and complete tasks online. These customers rely on a visual indicator to communicate where their keyboard’s focus is on a web page. In the example below, the Email field has a visual focus indicator:

If you edit your theme's stylesheet, then make sure that you don't remove the keyboard focus style from any page elements. Use the following guideline:

• All interactive page elements have a clear visual indicator when they have keyboard focus. These elements include links, buttons, and form fields.

References

• https://help.shopify.com/en/manual/online-store/blogs/publishing-blogs

Introduction

You can make it easier to manage your blog by using Shopify tools to do the following:

• Create a custom template to layout a blog or an indivdual post in a particular style.
• Set a specific publishing date for posts.
• Publish or unpublish several posts at the same time using a bulk action.
• Invite customers to subscribe to your blog so they'll see your updates.

Create a new blog template

You can create a template to customize the layout of all of the posts in a blog. For example, you could create a template for a blog that will feature a lot of images on posts, and use that template for all posts.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Under the Templates folder, click Add a new template.
4. In the Add a new template dialog box, do the following:
   1. Select the blog option from the dropdown menu.
   2. Choose between a JSON or liquid template, depending on your theme.
   3. In the File name field, write a name for your template.
5. Click Create template.
6. In the online code editor, make your changes to the template to customize the blog post style.
7. Click Save.

Tip

If you're not sure whether to use a JSON or liquid template, then you should check the format of your existing blog templates in the Templates folder.

Creating customized blog templates requires some knowledge of coding, such as using JSON and liquid templates. If you're not comfortable editing code, then you you can hire a Shopify Partner to help you.

Apply a template to a blog

After you create at least one new blog template, you can apply a template to a blog. All of the posts in the blog will display according to the template you set. Using blog templates can be useful when you want the posts to look similar to one another.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click **Manage blogs.
3. Click the blog you want to edit.
4. In the Template drop-down menu, select a template.
5. Click Save.

Create a blog post template

You can create a template to customize the layout of individual blog posts. For example, you could create a template for posts that will feature a lot of images, but that you only want to use for some of the posts in a blog.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Under the Templates folder, click Add a new template.
4. In the Add a new template dialog box, do the following:
   1. Select the article option from the dropdown menu.
   2. Choose between a JSON or liquid template, depending on your theme.
   3. In the File name field, write a name for your template.
5. Click Create template.
6. In the online code editor, make your changes to the template to customize the blog post style.
7. Click Save.

Tip

If you're not sure whether to use a JSON or liquid template, then you should check the format of your existing article templates in the Templates folder.

Creating customized blog post templates requires some knowledge of coding, such as using JSON and liquid templates. If you're not comfortable editing code, then you you can hire a Shopify Partner to help you.

Apply a template to a blog post

After you create at least one new template, you can apply a template to an individual post. Only the posts that have the template applied will appear according to the template you set. Using blog post templates can be useful when you want a shortcut to making a blog post look a certain way, but you don't want to use it fore very post in the blog.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click the blog post that you want to edit.
3. In the Template drop-down menu, select a template.
4. Click Save.

Set a specific publish date for a blog post

You can set a specific publish date for your blog. For example, you can set a post to be published in time for the launch of a new product. You can also backdate a post. Learn more about using future publishing.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, click the post that you want to publish on a specific date.
3. Click Set visibility date.
4. Select the publishing date and time for the post.
5. Click Save.

Publish blog posts in bulk

You can use a bulk action to publish multiple blog posts at the same time and make them visible on your online store.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, check the blog posts that you want to publish.
3. Click Actions.
4. Select Publish selected blog posts.

Unpublish blog posts in bulk

You can use a bulk action to unpublish multiple blog posts at the same time and make them hidden from your online store. This doesn't delete the blog posts from Shopify.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, check the blog posts that you want to unpublish.
3. Click Actions.
4. Select Unpublish selected blog posts.

Invite customers to subscribe to your blog

Shopify automatically produces an RSS feed for every blog that you create, so customers can subscribe to it and receive notifications when you publish a new post. The feed URL is the URL of the blog page with .atom appended. For example, http://store.myshopify.com/blogs/blogname.atom. Customers who want to subscribe to your blog can paste the feed URL into a feed reader.

You can include your feed URL in a blog post to invite customers to subscribe to your blog.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click the name of the blog post where you want to add the feed name for the blog.
3. In the Content field, enter text with the feed name, for example Subscribe to this blog's RSS feed using http://store.myshopify.com/blogs/blogname.atom.
4. Click Save.

Allow customers to subscribe to your blog feed with FeedBurner

FeedBurner is a third-party service that delivers your blog content to subscribing customers.

If you previously integrated your blog with FeedBurner, then your existing blog and its posts stay connected to FeedBurner.

New or existing blogs that aren't already integrated with FeedBurner can't use the service.

Tip

Google has stopped supporting FeedBurner. To get help with FeedBurner, visit the FeedBurner Help Group.

References

• https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/shopify-magic

Automatically generating content in the theme editor

Through Shopify Magic, you can use Artificial Intelligence (AI) to generate suggestions for content in your theme editor based on details that you provide, such as headings and titles. Before you generate automatic text for your theme, review Tips for using Shopify Magic text generation.

Caution

You're responsible for the accuracy of all the content that you publish to your store, even when you use automatic text generation to create it. Generated text can include content sourced from the AI's database that doesn't necessarily apply to your products, such as product benefits you don't list or facts about similar products. For example, the generated content for a T-shirt could mention care instructions such as "machine-washable", or product guarantees such as "guaranteed up to 1000 washes". It's important that you read all generated content closely to ensure accuracy before publishing. Refer to Shopify's Terms of Service to learn more about your responsibilities for store content.

Supported languages

​Support for automatically generated product descriptions is currently available in the following languages:

• English
• German
• Spanish
• French
• Italian
• Japanese
• Portuguese (Brazilian)
• Chinese (Simplified)

By default, American English is the dialect used for English suggestions. The language data that the AI uses is largely from North American sources, so generated content might contain vocabulary and expressions that are local to that region. You can change any part of the content suggestions to match what your customers would expect.

The language that's used to generate your output suggestions is determined by the default language for your storefront. If your default storefront language isn't one of the supported languages, then this feature isn't available in your admin. To use this feature, update your language settings to a supported language.

Although the list of supported languages are the languages that have been verified and tested, the text generation might work for additional languages to differing degrees of quality. If you want to try generating output in your preferred language, then generate the English output, and then use the Translate and Adapt app to translate the generated output to your preferred language. ​

Generate content for your online store

Note

Content can be generated only in specific text fields in the theme editor. If a text box doesn't have the Generate text icon, then suggestions can't be generated for that field.

Steps:

1. From your Shopify admin, go to Online store > Themes.
2. Next to the theme that you want to edit, click Customize.
3. Select a text element in your theme, such as an image banner heading.
4. In the text box, click the Generate text icon in the toolbar.
5. Enter some keywords to indicate the type of content that you want to be generated, such as headline, title, subtitle, or announcement. The more details that you add, the more relevant the suggested content is.
6. Optional: Select a tone for the generated text. You can select one of the predefined tones or add a custom tone. Learn more about choosing a tone for your theme text.
7. Click Generate.
8. Optional: To refresh the suggested text and get a new version, do any of the following:
   • To get new suggestions with the same settings, click Generate again.
   • To change the tone of the suggested text, select a new tone option, and then click Generate again.
9. Optional: To view different versions that you’ve generated, use the arrows below the generated text to move forward and backward through the versions.
   10. Click the suggested content that you want to keep.
   11. Optional: Edit the content to match your store tone and brand.
   12. After you complete your edits, click Save.

Improving the theme content suggestions that you receive

The content that you create needs to communicate the benefits of your products in a non-generic way that reflects your store’s brand. You get better results in your automatically-generated content when you include more details, and choose a tone that matches your business.

​To improve results, consider adding the following types of information:

• Information about the customer: Often, the best content reflects the needs and interests of your target customer. Include some keywords about who the products would be great for, such as their demographic (young parents) or their values (eco-conscious, outdoorsy). This information is helpful for generating product benefits and determining the type of vocabulary that's included in your results.
• Specific details about materials, production method, fit, intended use: Any product specifications you provide can be turned into paragraphs in your generated content.
• Important brand keywords or terminology: Although the results include different phrasing for the information you provide, special words or phrases are often kept, such as brand names or unique descriptive words. For example, if you describe your mint lip balm as mint-tastic in the keywords, then the generated suggestions will often include that term.
• Other details: You can use the details and images that you’ve added to your theme to give you ideas about what keywords to provide, such as product vendors, product categories, or the names of your collections.

References

• https://help.shopify.com/en/manual/online-store/images/3d-images

No code 3D viewer configuration

You can configure your 3D models in your Shopify admin without needing to edit any code. Adjust the lighting, background color, exposure level, zoom, and initial camera view of your model from your Products page.

Edit a 3D model

You can adjust the Lighting of your 3D model, or the Camera view. To access the 3D model editor, open a product that contains a 3D model. Scroll down to the Media section on the product page, and click the 3D icon in the image.

Edit model lighting

1. Open your Products page and select a product that contains a 3D model.
2. Scroll down to Media in the product. Locate the 3D model and click the 3D icon in the image.
3. Click Edit file. By default, the Lighting edit options are loaded first. Select the type of editing you want to do:

• Environment has pre-set filters that change the shadows and reflections that appear on your image. Click any filter to see how it affects your image.
• Lighting allows you to change the exposure of your 3D image. Use the slider to adjust the image exposure.
• Background changes the background color of your 3D image. You can set the image background to be transparent by selecting the Use transparent background box. Select a background color for your image with the color picker, or enter the hex code for the color in the field below the color picker.

1. After editing your file, click Done to save your changes or click Reset to return the image to its original state.

Edit model camera view

1. Open your Products page and select a product that contains a 3D model.
2. Scroll down to Media in the product. Locate the 3D model and click the 3D icon in the image.
3. Click Edit file. Click the Camera icon to load the model's view options.
4. Select the type of editing you want to do:

• Change the X Rotation of the image by increasing or decreasing the X Rotation angle.
• Change the Y Rotation of the image by increasing or decreasing the Y Rotation angle.
• Zoom in on your image with the Zoom percentage slider.

1. After editing your file, click Done to save your changes or click Reset to return the image to its original state.

References

• https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility

Accessibility resources

To learn more about web accessibility for the topics discussed in this article, see the following resources.

Color contrast resources

• Colors with Good Contrast, an article from the Web Accessibility Initiative
• Contrast Ratio, an online tool that you can use to find the contrast ratio between two colors
• Color Contrast Analyzer, a contrast ratio application for download that was developed by the Paciello Group

Text resources

• 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake, an article from Smashing Magazine
• Text alignment, an article from Web AIM
• Link Appearance, an article from Web AIM
• Using Headings for Content Structure, an article from Web AIM

Alternative text resources

• Text to Speech, an article from the Web Accessibility Initiative
• Alternative Text, an article from Web AIM
• Considerations when writing alt text, an article on Medium.

Slideshow and video resources

• A Primer to Vestibular Disorders, an article from The A11Y Project
• Text to Speech, an article from the Web Accessibility Initiative
• Video Captions, an article from the Web Accessibility Initiative
• Use automatic captioning, an article from YouTube Help
• Captions and subtitles, an article from the Vimeo Help Center

Keyboard support resources

• Keyboard Compatibility, an article from the Web Accessibility Initiative
• Introduction to Focus, an article from Google Developers

Accessibility for themes

When you customize your theme, make design and content choices that help to keep your online store accessible. An accessible website is designed so that it can be used by everyone, including people with disabilities. Making choices for your online store with accessibility in mind can help you to provide an inclusive experience for all of your customers.

The guidelines below were created with the Web Content Accessibility Guidelines (WCAG) in mind. Since there are many factors to consider when creating an accessible website, only following guidelines below doesn't guarantee that your online store is fully accessible. You can learn more about web accessibility by visiting the WCAG website, or by seeing the resources listed below.

Tip

If you're a developer, then you can further optimize your theme for accessibility using Shopify tools and best practices. Learn more on Shopify.dev.

Text accessibility

It's important that the text on your online store is readable for customers who are visually impaired or who have difficulty reading dense blocks of text.

Color contrast

When you edit the colors for your online store, make sure that all of your text is accessible to customers who are colorblind or otherwise visually impaired. These customers rely on adequate color contrast to visually differentiate one thing from another. You can use an online contrast ratio tool to check the contrast of the different parts of your store.

In the example below, the text has a contrast ratio of 2.4:1 against its background, and is difficult to read for some customers.

In the next example, the text has a contrast ratio of 4.8:1, and is easier to read for many customers.

Test the contrast of all text, including body text, headings, links, and form fields. Use the following guidelines:

• The color of body text and button text has a contrast ratio of at least 4.5:1 against its background.
• The color of headings and other large text (font size 24 px and up) has a contrast ratio of at least 3:1 against its background.
• The color of all text over images, including slideshows, banners, and videos, has sufficient contrast ratios against its background. For large text (font size 24 px and up), the contrast is at least 3:1. For smaller text the contrast is at least 4.5:1.
• The color of non-text elements, including input borders and icons, has a contrast ratio of at least 3:1 against its background.

Tip

In some themes, you can place a color overlay between text and an image to improve the contrast and readability of the text.

Text headings

When you add headings to your page with the rich text editor, it's important to keep them in sequential order (1 - 6). Headings are used by assistive technologies to communicate how page content is organized. Skipping over levels, such as a heading level 2 followed by a heading level 4, can be confusing to users. Use the following guideline:

• Headings are used in sequential order and do not skip over levels.

Text size and alignment

When you edit your theme's typography settings, make sure that your text is large enough for customers to comfortably read.

Text should also have consistent spacing between words and letters to make it easy to read. In the example below, the text alignment is justified, which creates inconsistent spacing between words.

In the next example, the text alignment is left-aligned, which creates consistent spacing between words.

When customizing the size and alignment of text, use the following guidelines:

• The minimum font size for body text is the equivalent of 16 px.
• Text alignment isn't justified. Justified text creates inconsistent spacing between words.

Note

Different font families can appear comparatively small or large, even if they have the same font size. If the font you're using appears smaller than other fonts do at 16 px, then use a larger size.

Text links

When you add links to your text, make sure that they can be identified by all of your customers. Because some customers have trouble seeing color, you can't rely on a change in color alone to differentiate a link from regular text. Text should be underlined so that it doesn't rely on the change in color to communicate that the text is a link.

If you edit your theme's stylesheet, then make sure that you don't remove text link styles. Use the following guideline:

• Text links are either underlined or have another visual differentiator from regular text.

Alternative text for images

When you add images to your online store, it's important to make them accessible to customers who are blind or have low vision. You can do this by adding alternative text that accurately describes each image. Customers who use screen readers rely on alt text to communicate the content of images on your online store.

You can add alt text to your product images from the Shopify admin. You can add alt text to the other images in your theme from the theme editor.

When you add alt text to an image, a good practice is to pretend that you're describing the image to someone who has their eyes closed. Help them to create an image in their mind. The way that you describe an image also depends on the context of your web page. For example, you might describe an image differently if your business is a travel agency than if your business is an outdoor equipment store. Consider the following image:

For a travel agency, you might refer to the country and region in which the two friends are traveling, and to the name of the ocean or sea that they're looking at. On the other hand, for an outdoor equipment store, you might focus on the brands and features of the two friends' backpacks.

If your business is a travel agency, then an example of poor alt text might be, "Two people in front of the ocean." For the same agency, an example of good alt text might be, "Two friends traveling in Lagos, Portugal, looking out at the sandy cove of Praia do Camilo on a sunny day."

Add alt text to theme images

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. From the theme editor sidebar, click the section with the image that needs alt text.
4. On the image, click Edit.
5. In the dialog, enter the alt text, and then click Save.
6. Click Save.

Slideshow and video accessibility

When you add videos to your online store, make sure that you consider the needs of customers with low vision, customers who are deaf or hard of hearing, or customers who might be susceptible to vestibular disorders.

Some of these customers rely on the text to speech capability of screen readers, which read aloud the contents of a web page. Additional audio from videos and music, especially when it's unexpected, can make this experience difficult. For customers who are deaf or hard of hearing, it's a good idea to add closed captioning to your videos so that those customers can access the content.

Customers with vestibular disorders can experience dizziness with moving content. Because of this, it's important that slideshows and videos don't play automatically.

Slideshows

When you add a slideshow to your online store, use the following guidelines:

• Slideshows don't play automatically.
• If slideshows do play automatically, then they include a setting that customers can use to pause or stop the slideshow.

Videos

When you add a video to your online store, use the following guidelines:

• Videos don't play automatically.
• If videos do play automatically, then their audio is muted.
• For videos that include audio, the video is fully visible and not obstructed by other page elements. This allows closed captions to remain visible.
• For videos that include dialogue, text transcripts are available. These are included either on the page, or in a link to a separate page.

These guidelines also apply to videos that are in a slideshow.

Keyboard support

Customers with vision or motor impairment might use a keyboard to navigate and complete tasks online. These customers rely on a visual indicator to communicate where their keyboard’s focus is on a web page. In the example below, the Email field has a visual focus indicator:

If you edit your theme's stylesheet, then make sure that you don't remove the keyboard focus style from any page elements. Use the following guideline:

• All interactive page elements have a clear visual indicator when they have keyboard focus. These elements include links, buttons, and form fields.

References

• https://help.shopify.com/en/manual/online-store/blogs/publishing-blogs

Introduction

You can make it easier to manage your blog by using Shopify tools to do the following:

• Create a custom template to layout a blog or an indivdual post in a particular style.
• Set a specific publishing date for posts.
• Publish or unpublish several posts at the same time using a bulk action.
• Invite customers to subscribe to your blog so they'll see your updates.

Create a new blog template

You can create a template to customize the layout of all of the posts in a blog. For example, you could create a template for a blog that will feature a lot of images on posts, and use that template for all posts.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Under the Templates folder, click Add a new template.
4. In the Add a new template dialog box, do the following:
   1. Select the blog option from the dropdown menu.
   2. Choose between a JSON or liquid template, depending on your theme.
   3. In the File name field, write a name for your template.
5. Click Create template.
6. In the online code editor, make your changes to the template to customize the blog post style.
7. Click Save.

Tip

If you're not sure whether to use a JSON or liquid template, then you should check the format of your existing blog templates in the Templates folder.

Creating customized blog templates requires some knowledge of coding, such as using JSON and liquid templates. If you're not comfortable editing code, then you you can hire a Shopify Partner to help you.

Apply a template to a blog

After you create at least one new blog template, you can apply a template to a blog. All of the posts in the blog will display according to the template you set. Using blog templates can be useful when you want the posts to look similar to one another.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click **Manage blogs.
3. Click the blog you want to edit.
4. In the Template drop-down menu, select a template.
5. Click Save.

Create a blog post template

You can create a template to customize the layout of individual blog posts. For example, you could create a template for posts that will feature a lot of images, but that you only want to use for some of the posts in a blog.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Under the Templates folder, click Add a new template.
4. In the Add a new template dialog box, do the following:
   1. Select the article option from the dropdown menu.
   2. Choose between a JSON or liquid template, depending on your theme.
   3. In the File name field, write a name for your template.
5. Click Create template.
6. In the online code editor, make your changes to the template to customize the blog post style.
7. Click Save.

Tip

If you're not sure whether to use a JSON or liquid template, then you should check the format of your existing article templates in the Templates folder.

Creating customized blog post templates requires some knowledge of coding, such as using JSON and liquid templates. If you're not comfortable editing code, then you you can hire a Shopify Partner to help you.

Apply a template to a blog post

After you create at least one new template, you can apply a template to an individual post. Only the posts that have the template applied will appear according to the template you set. Using blog post templates can be useful when you want a shortcut to making a blog post look a certain way, but you don't want to use it fore very post in the blog.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click the blog post that you want to edit.
3. In the Template drop-down menu, select a template.
4. Click Save.

Set a specific publish date for a blog post

You can set a specific publish date for your blog. For example, you can set a post to be published in time for the launch of a new product. You can also backdate a post. Learn more about using future publishing.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, click the post that you want to publish on a specific date.
3. Click Set visibility date.
4. Select the publishing date and time for the post.
5. Click Save.

Publish blog posts in bulk

You can use a bulk action to publish multiple blog posts at the same time and make them visible on your online store.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, check the blog posts that you want to publish.
3. Click Actions.
4. Select Publish selected blog posts.

Unpublish blog posts in bulk

You can use a bulk action to unpublish multiple blog posts at the same time and make them hidden from your online store. This doesn't delete the blog posts from Shopify.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, check the blog posts that you want to unpublish.
3. Click Actions.
4. Select Unpublish selected blog posts.

Invite customers to subscribe to your blog

Shopify automatically produces an RSS feed for every blog that you create, so customers can subscribe to it and receive notifications when you publish a new post. The feed URL is the URL of the blog page with .atom appended. For example, http://store.myshopify.com/blogs/blogname.atom. Customers who want to subscribe to your blog can paste the feed URL into a feed reader.

You can include your feed URL in a blog post to invite customers to subscribe to your blog.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click the name of the blog post where you want to add the feed name for the blog.
3. In the Content field, enter text with the feed name, for example Subscribe to this blog's RSS feed using http://store.myshopify.com/blogs/blogname.atom.
4. Click Save.

Allow customers to subscribe to your blog feed with FeedBurner

FeedBurner is a third-party service that delivers your blog content to subscribing customers.

If you previously integrated your blog with FeedBurner, then your existing blog and its posts stay connected to FeedBurner.

New or existing blogs that aren't already integrated with FeedBurner can't use the service.

Tip

Google has stopped supporting FeedBurner. To get help with FeedBurner, visit the FeedBurner Help Group.

References

• https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/shopify-magic

Automatically generating content in the theme editor

Through Shopify Magic, you can use Artificial Intelligence (AI) to generate suggestions for content in your theme editor based on details that you provide, such as headings and titles. Before you generate automatic text for your theme, review Tips for using Shopify Magic text generation.

Caution

You're responsible for the accuracy of all the content that you publish to your store, even when you use automatic text generation to create it. Generated text can include content sourced from the AI's database that doesn't necessarily apply to your products, such as product benefits you don't list or facts about similar products. For example, the generated content for a T-shirt could mention care instructions such as "machine-washable", or product guarantees such as "guaranteed up to 1000 washes". It's important that you read all generated content closely to ensure accuracy before publishing. Refer to Shopify's Terms of Service to learn more about your responsibilities for store content.

Supported languages

​Support for automatically generated product descriptions is currently available in the following languages:

• English
• German
• Spanish
• French
• Italian
• Japanese
• Portuguese (Brazilian)
• Chinese (Simplified)

By default, American English is the dialect used for English suggestions. The language data that the AI uses is largely from North American sources, so generated content might contain vocabulary and expressions that are local to that region. You can change any part of the content suggestions to match what your customers would expect.

The language that's used to generate your output suggestions is determined by the default language for your storefront. If your default storefront language isn't one of the supported languages, then this feature isn't available in your admin. To use this feature, update your language settings to a supported language.

Although the list of supported languages are the languages that have been verified and tested, the text generation might work for additional languages to differing degrees of quality. If you want to try generating output in your preferred language, then generate the English output, and then use the Translate and Adapt app to translate the generated output to your preferred language. ​

Generate content for your online store

Note

Content can be generated only in specific text fields in the theme editor. If a text box doesn't have the Generate text icon, then suggestions can't be generated for that field.

Steps:

1. From your Shopify admin, go to Online store > Themes.
2. Next to the theme that you want to edit, click Customize.
3. Select a text element in your theme, such as an image banner heading.
4. In the text box, click the Generate text icon in the toolbar.
5. Enter some keywords to indicate the type of content that you want to be generated, such as headline, title, subtitle, or announcement. The more details that you add, the more relevant the suggested content is.
6. Optional: Select a tone for the generated text. You can select one of the predefined tones or add a custom tone. Learn more about choosing a tone for your theme text.
7. Click Generate.
8. Optional: To refresh the suggested text and get a new version, do any of the following:
   • To get new suggestions with the same settings, click Generate again.
   • To change the tone of the suggested text, select a new tone option, and then click Generate again.
9. Optional: To view different versions that you’ve generated, use the arrows below the generated text to move forward and backward through the versions.
   10. Click the suggested content that you want to keep.
   11. Optional: Edit the content to match your store tone and brand.
   12. After you complete your edits, click Save.

Improving the theme content suggestions that you receive

The content that you create needs to communicate the benefits of your products in a non-generic way that reflects your store’s brand. You get better results in your automatically-generated content when you include more details, and choose a tone that matches your business.

​To improve results, consider adding the following types of information:

• Information about the customer: Often, the best content reflects the needs and interests of your target customer. Include some keywords about who the products would be great for, such as their demographic (young parents) or their values (eco-conscious, outdoorsy). This information is helpful for generating product benefits and determining the type of vocabulary that's included in your results.
• Specific details about materials, production method, fit, intended use: Any product specifications you provide can be turned into paragraphs in your generated content.
• Important brand keywords or terminology: Although the results include different phrasing for the information you provide, special words or phrases are often kept, such as brand names or unique descriptive words. For example, if you describe your mint lip balm as mint-tastic in the keywords, then the generated suggestions will often include that term.
• Other details: You can use the details and images that you’ve added to your theme to give you ideas about what keywords to provide, such as product vendors, product categories, or the names of your collections.

References

• https://help.shopify.com/en/manual/online-store/images/3d-images

No code 3D viewer configuration

You can configure your 3D models in your Shopify admin without needing to edit any code. Adjust the lighting, background color, exposure level, zoom, and initial camera view of your model from your Products page.

Edit a 3D model

You can adjust the Lighting of your 3D model, or the Camera view. To access the 3D model editor, open a product that contains a 3D model. Scroll down to the Media section on the product page, and click the 3D icon in the image.

Edit model lighting

1. Open your Products page and select a product that contains a 3D model.
2. Scroll down to Media in the product. Locate the 3D model and click the 3D icon in the image.
3. Click Edit file. By default, the Lighting edit options are loaded first. Select the type of editing you want to do:

• Environment has pre-set filters that change the shadows and reflections that appear on your image. Click any filter to see how it affects your image.
• Lighting allows you to change the exposure of your 3D image. Use the slider to adjust the image exposure.
• Background changes the background color of your 3D image. You can set the image background to be transparent by selecting the Use transparent background box. Select a background color for your image with the color picker, or enter the hex code for the color in the field below the color picker.

1. After editing your file, click Done to save your changes or click Reset to return the image to its original state.

Edit model camera view

1. Open your Products page and select a product that contains a 3D model.
2. Scroll down to Media in the product. Locate the 3D model and click the 3D icon in the image.
3. Click Edit file. Click the Camera icon to load the model's view options.
4. Select the type of editing you want to do:

• Change the X Rotation of the image by increasing or decreasing the X Rotation angle.
• Change the Y Rotation of the image by increasing or decreasing the Y Rotation angle.
• Zoom in on your image with the Zoom percentage slider.

1. After editing your file, click Done to save your changes or click Reset to return the image to its original state.

References

• https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility

Accessibility resources

To learn more about web accessibility for the topics discussed in this article, see the following resources.

Color contrast resources

• Colors with Good Contrast, an article from the Web Accessibility Initiative
• Contrast Ratio, an online tool that you can use to find the contrast ratio between two colors
• Color Contrast Analyzer, a contrast ratio application for download that was developed by the Paciello Group

Text resources

• 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake, an article from Smashing Magazine
• Text alignment, an article from Web AIM
• Link Appearance, an article from Web AIM
• Using Headings for Content Structure, an article from Web AIM

Alternative text resources

• Text to Speech, an article from the Web Accessibility Initiative
• Alternative Text, an article from Web AIM
• Considerations when writing alt text, an article on Medium.

Slideshow and video resources

• A Primer to Vestibular Disorders, an article from The A11Y Project
• Text to Speech, an article from the Web Accessibility Initiative
• Video Captions, an article from the Web Accessibility Initiative
• Use automatic captioning, an article from YouTube Help
• Captions and subtitles, an article from the Vimeo Help Center

Keyboard support resources

• Keyboard Compatibility, an article from the Web Accessibility Initiative
• Introduction to Focus, an article from Google Developers

Accessibility for themes

When you customize your theme, make design and content choices that help to keep your online store accessible. An accessible website is designed so that it can be used by everyone, including people with disabilities. Making choices for your online store with accessibility in mind can help you to provide an inclusive experience for all of your customers.

The guidelines below were created with the Web Content Accessibility Guidelines (WCAG) in mind. Since there are many factors to consider when creating an accessible website, only following guidelines below doesn't guarantee that your online store is fully accessible. You can learn more about web accessibility by visiting the WCAG website, or by seeing the resources listed below.

Tip

If you're a developer, then you can further optimize your theme for accessibility using Shopify tools and best practices. Learn more on Shopify.dev.

Text accessibility

It's important that the text on your online store is readable for customers who are visually impaired or who have difficulty reading dense blocks of text.

Color contrast

When you edit the colors for your online store, make sure that all of your text is accessible to customers who are colorblind or otherwise visually impaired. These customers rely on adequate color contrast to visually differentiate one thing from another. You can use an online contrast ratio tool to check the contrast of the different parts of your store.

In the example below, the text has a contrast ratio of 2.4:1 against its background, and is difficult to read for some customers.

In the next example, the text has a contrast ratio of 4.8:1, and is easier to read for many customers.

Test the contrast of all text, including body text, headings, links, and form fields. Use the following guidelines:

• The color of body text and button text has a contrast ratio of at least 4.5:1 against its background.
• The color of headings and other large text (font size 24 px and up) has a contrast ratio of at least 3:1 against its background.
• The color of all text over images, including slideshows, banners, and videos, has sufficient contrast ratios against its background. For large text (font size 24 px and up), the contrast is at least 3:1. For smaller text the contrast is at least 4.5:1.
• The color of non-text elements, including input borders and icons, has a contrast ratio of at least 3:1 against its background.

Tip

In some themes, you can place a color overlay between text and an image to improve the contrast and readability of the text.

Text headings

When you add headings to your page with the rich text editor, it's important to keep them in sequential order (1 - 6). Headings are used by assistive technologies to communicate how page content is organized. Skipping over levels, such as a heading level 2 followed by a heading level 4, can be confusing to users. Use the following guideline:

• Headings are used in sequential order and do not skip over levels.

Text size and alignment

When you edit your theme's typography settings, make sure that your text is large enough for customers to comfortably read.

Text should also have consistent spacing between words and letters to make it easy to read. In the example below, the text alignment is justified, which creates inconsistent spacing between words.

In the next example, the text alignment is left-aligned, which creates consistent spacing between words.

When customizing the size and alignment of text, use the following guidelines:

• The minimum font size for body text is the equivalent of 16 px.
• Text alignment isn't justified. Justified text creates inconsistent spacing between words.

Note

Different font families can appear comparatively small or large, even if they have the same font size. If the font you're using appears smaller than other fonts do at 16 px, then use a larger size.

Text links

When you add links to your text, make sure that they can be identified by all of your customers. Because some customers have trouble seeing color, you can't rely on a change in color alone to differentiate a link from regular text. Text should be underlined so that it doesn't rely on the change in color to communicate that the text is a link.

If you edit your theme's stylesheet, then make sure that you don't remove text link styles. Use the following guideline:

• Text links are either underlined or have another visual differentiator from regular text.

Alternative text for images

When you add images to your online store, it's important to make them accessible to customers who are blind or have low vision. You can do this by adding alternative text that accurately describes each image. Customers who use screen readers rely on alt text to communicate the content of images on your online store.

You can add alt text to your product images from the Shopify admin. You can add alt text to the other images in your theme from the theme editor.

When you add alt text to an image, a good practice is to pretend that you're describing the image to someone who has their eyes closed. Help them to create an image in their mind. The way that you describe an image also depends on the context of your web page. For example, you might describe an image differently if your business is a travel agency than if your business is an outdoor equipment store. Consider the following image:

For a travel agency, you might refer to the country and region in which the two friends are traveling, and to the name of the ocean or sea that they're looking at. On the other hand, for an outdoor equipment store, you might focus on the brands and features of the two friends' backpacks.

If your business is a travel agency, then an example of poor alt text might be, "Two people in front of the ocean." For the same agency, an example of good alt text might be, "Two friends traveling in Lagos, Portugal, looking out at the sandy cove of Praia do Camilo on a sunny day."

Add alt text to theme images

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. From the theme editor sidebar, click the section with the image that needs alt text.
4. On the image, click Edit.
5. In the dialog, enter the alt text, and then click Save.
6. Click Save.

Slideshow and video accessibility

When you add videos to your online store, make sure that you consider the needs of customers with low vision, customers who are deaf or hard of hearing, or customers who might be susceptible to vestibular disorders.

Some of these customers rely on the text to speech capability of screen readers, which read aloud the contents of a web page. Additional audio from videos and music, especially when it's unexpected, can make this experience difficult. For customers who are deaf or hard of hearing, it's a good idea to add closed captioning to your videos so that those customers can access the content.

Customers with vestibular disorders can experience dizziness with moving content. Because of this, it's important that slideshows and videos don't play automatically.

Slideshows

When you add a slideshow to your online store, use the following guidelines:

• Slideshows don't play automatically.
• If slideshows do play automatically, then they include a setting that customers can use to pause or stop the slideshow.

Videos

When you add a video to your online store, use the following guidelines:

• Videos don't play automatically.
• If videos do play automatically, then their audio is muted.
• For videos that include audio, the video is fully visible and not obstructed by other page elements. This allows closed captions to remain visible.
• For videos that include dialogue, text transcripts are available. These are included either on the page, or in a link to a separate page.

These guidelines also apply to videos that are in a slideshow.

Keyboard support

Customers with vision or motor impairment might use a keyboard to navigate and complete tasks online. These customers rely on a visual indicator to communicate where their keyboard’s focus is on a web page. In the example below, the Email field has a visual focus indicator:

If you edit your theme's stylesheet, then make sure that you don't remove the keyboard focus style from any page elements. Use the following guideline:

• All interactive page elements have a clear visual indicator when they have keyboard focus. These elements include links, buttons, and form fields.

References

• https://help.shopify.com/en/manual/online-store/blogs/publishing-blogs

Introduction

You can make it easier to manage your blog by using Shopify tools to do the following:

• Create a custom template to layout a blog or an indivdual post in a particular style.
• Set a specific publishing date for posts.
• Publish or unpublish several posts at the same time using a bulk action.
• Invite customers to subscribe to your blog so they'll see your updates.

Create a new blog template

You can create a template to customize the layout of all of the posts in a blog. For example, you could create a template for a blog that will feature a lot of images on posts, and use that template for all posts.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Under the Templates folder, click Add a new template.
4. In the Add a new template dialog box, do the following:
   1. Select the blog option from the dropdown menu.
   2. Choose between a JSON or liquid template, depending on your theme.
   3. In the File name field, write a name for your template.
5. Click Create template.
6. In the online code editor, make your changes to the template to customize the blog post style.
7. Click Save.

Tip

If you're not sure whether to use a JSON or liquid template, then you should check the format of your existing blog templates in the Templates folder.

Creating customized blog templates requires some knowledge of coding, such as using JSON and liquid templates. If you're not comfortable editing code, then you you can hire a Shopify Partner to help you.

Apply a template to a blog

After you create at least one new blog template, you can apply a template to a blog. All of the posts in the blog will display according to the template you set. Using blog templates can be useful when you want the posts to look similar to one another.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click **Manage blogs.
3. Click the blog you want to edit.
4. In the Template drop-down menu, select a template.
5. Click Save.

Create a blog post template

You can create a template to customize the layout of individual blog posts. For example, you could create a template for posts that will feature a lot of images, but that you only want to use for some of the posts in a blog.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Under the Templates folder, click Add a new template.
4. In the Add a new template dialog box, do the following:
   1. Select the article option from the dropdown menu.
   2. Choose between a JSON or liquid template, depending on your theme.
   3. In the File name field, write a name for your template.
5. Click Create template.
6. In the online code editor, make your changes to the template to customize the blog post style.
7. Click Save.

Tip

If you're not sure whether to use a JSON or liquid template, then you should check the format of your existing article templates in the Templates folder.

Creating customized blog post templates requires some knowledge of coding, such as using JSON and liquid templates. If you're not comfortable editing code, then you you can hire a Shopify Partner to help you.

Apply a template to a blog post

After you create at least one new template, you can apply a template to an individual post. Only the posts that have the template applied will appear according to the template you set. Using blog post templates can be useful when you want a shortcut to making a blog post look a certain way, but you don't want to use it fore very post in the blog.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click the blog post that you want to edit.
3. In the Template drop-down menu, select a template.
4. Click Save.

Set a specific publish date for a blog post

You can set a specific publish date for your blog. For example, you can set a post to be published in time for the launch of a new product. You can also backdate a post. Learn more about using future publishing.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, click the post that you want to publish on a specific date.
3. Click Set visibility date.
4. Select the publishing date and time for the post.
5. Click Save.

Publish blog posts in bulk

You can use a bulk action to publish multiple blog posts at the same time and make them visible on your online store.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, check the blog posts that you want to publish.
3. Click Actions.
4. Select Publish selected blog posts.

Unpublish blog posts in bulk

You can use a bulk action to unpublish multiple blog posts at the same time and make them hidden from your online store. This doesn't delete the blog posts from Shopify.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, check the blog posts that you want to unpublish.
3. Click Actions.
4. Select Unpublish selected blog posts.

Invite customers to subscribe to your blog

Shopify automatically produces an RSS feed for every blog that you create, so customers can subscribe to it and receive notifications when you publish a new post. The feed URL is the URL of the blog page with .atom appended. For example, http://store.myshopify.com/blogs/blogname.atom. Customers who want to subscribe to your blog can paste the feed URL into a feed reader.

You can include your feed URL in a blog post to invite customers to subscribe to your blog.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click the name of the blog post where you want to add the feed name for the blog.
3. In the Content field, enter text with the feed name, for example Subscribe to this blog's RSS feed using http://store.myshopify.com/blogs/blogname.atom.
4. Click Save.

Allow customers to subscribe to your blog feed with FeedBurner

FeedBurner is a third-party service that delivers your blog content to subscribing customers.

If you previously integrated your blog with FeedBurner, then your existing blog and its posts stay connected to FeedBurner.

New or existing blogs that aren't already integrated with FeedBurner can't use the service.

Tip

Google has stopped supporting FeedBurner. To get help with FeedBurner, visit the FeedBurner Help Group.

References

• https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/shopify-magic

Automatically generating content in the theme editor

Through Shopify Magic, you can use Artificial Intelligence (AI) to generate suggestions for content in your theme editor based on details that you provide, such as headings and titles. Before you generate automatic text for your theme, review Tips for using Shopify Magic text generation.

Caution

You're responsible for the accuracy of all the content that you publish to your store, even when you use automatic text generation to create it. Generated text can include content sourced from the AI's database that doesn't necessarily apply to your products, such as product benefits you don't list or facts about similar products. For example, the generated content for a T-shirt could mention care instructions such as "machine-washable", or product guarantees such as "guaranteed up to 1000 washes". It's important that you read all generated content closely to ensure accuracy before publishing. Refer to Shopify's Terms of Service to learn more about your responsibilities for store content.

Supported languages

​Support for automatically generated product descriptions is currently available in the following languages:

• English
• German
• Spanish
• French
• Italian
• Japanese
• Portuguese (Brazilian)
• Chinese (Simplified)

By default, American English is the dialect used for English suggestions. The language data that the AI uses is largely from North American sources, so generated content might contain vocabulary and expressions that are local to that region. You can change any part of the content suggestions to match what your customers would expect.

The language that's used to generate your output suggestions is determined by the default language for your storefront. If your default storefront language isn't one of the supported languages, then this feature isn't available in your admin. To use this feature, update your language settings to a supported language.

Although the list of supported languages are the languages that have been verified and tested, the text generation might work for additional languages to differing degrees of quality. If you want to try generating output in your preferred language, then generate the English output, and then use the Translate and Adapt app to translate the generated output to your preferred language. ​

Generate content for your online store

Note

Content can be generated only in specific text fields in the theme editor. If a text box doesn't have the Generate text icon, then suggestions can't be generated for that field.

Steps:

1. From your Shopify admin, go to Online store > Themes.
2. Next to the theme that you want to edit, click Customize.
3. Select a text element in your theme, such as an image banner heading.
4. In the text box, click the Generate text icon in the toolbar.
5. Enter some keywords to indicate the type of content that you want to be generated, such as headline, title, subtitle, or announcement. The more details that you add, the more relevant the suggested content is.
6. Optional: Select a tone for the generated text. You can select one of the predefined tones or add a custom tone. Learn more about choosing a tone for your theme text.
7. Click Generate.
8. Optional: To refresh the suggested text and get a new version, do any of the following:
   • To get new suggestions with the same settings, click Generate again.
   • To change the tone of the suggested text, select a new tone option, and then click Generate again.
9. Optional: To view different versions that you’ve generated, use the arrows below the generated text to move forward and backward through the versions.
   10. Click the suggested content that you want to keep.
   11. Optional: Edit the content to match your store tone and brand.
   12. After you complete your edits, click Save.

Improving the theme content suggestions that you receive

The content that you create needs to communicate the benefits of your products in a non-generic way that reflects your store’s brand. You get better results in your automatically-generated content when you include more details, and choose a tone that matches your business.

​To improve results, consider adding the following types of information:

• Information about the customer: Often, the best content reflects the needs and interests of your target customer. Include some keywords about who the products would be great for, such as their demographic (young parents) or their values (eco-conscious, outdoorsy). This information is helpful for generating product benefits and determining the type of vocabulary that's included in your results.
• Specific details about materials, production method, fit, intended use: Any product specifications you provide can be turned into paragraphs in your generated content.
• Important brand keywords or terminology: Although the results include different phrasing for the information you provide, special words or phrases are often kept, such as brand names or unique descriptive words. For example, if you describe your mint lip balm as mint-tastic in the keywords, then the generated suggestions will often include that term.
• Other details: You can use the details and images that you’ve added to your theme to give you ideas about what keywords to provide, such as product vendors, product categories, or the names of your collections.

References

• https://help.shopify.com/en/manual/online-store/images/3d-images

No code 3D viewer configuration

You can configure your 3D models in your Shopify admin without needing to edit any code. Adjust the lighting, background color, exposure level, zoom, and initial camera view of your model from your Products page.

Edit a 3D model

You can adjust the Lighting of your 3D model, or the Camera view. To access the 3D model editor, open a product that contains a 3D model. Scroll down to the Media section on the product page, and click the 3D icon in the image.

Edit model lighting

1. Open your Products page and select a product that contains a 3D model.
2. Scroll down to Media in the product. Locate the 3D model and click the 3D icon in the image.
3. Click Edit file. By default, the Lighting edit options are loaded first. Select the type of editing you want to do:

• Environment has pre-set filters that change the shadows and reflections that appear on your image. Click any filter to see how it affects your image.
• Lighting allows you to change the exposure of your 3D image. Use the slider to adjust the image exposure.
• Background changes the background color of your 3D image. You can set the image background to be transparent by selecting the Use transparent background box. Select a background color for your image with the color picker, or enter the hex code for the color in the field below the color picker.

1. After editing your file, click Done to save your changes or click Reset to return the image to its original state.

Edit model camera view

1. Open your Products page and select a product that contains a 3D model.
2. Scroll down to Media in the product. Locate the 3D model and click the 3D icon in the image.
3. Click Edit file. Click the Camera icon to load the model's view options.
4. Select the type of editing you want to do:

• Change the X Rotation of the image by increasing or decreasing the X Rotation angle.
• Change the Y Rotation of the image by increasing or decreasing the Y Rotation angle.
• Zoom in on your image with the Zoom percentage slider.

1. After editing your file, click Done to save your changes or click Reset to return the image to its original state.

References

• https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility

Accessibility resources

To learn more about web accessibility for the topics discussed in this article, see the following resources.

Color contrast resources

• Colors with Good Contrast, an article from the Web Accessibility Initiative
• Contrast Ratio, an online tool that you can use to find the contrast ratio between two colors
• Color Contrast Analyzer, a contrast ratio application for download that was developed by the Paciello Group

Text resources

• 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake, an article from Smashing Magazine
• Text alignment, an article from Web AIM
• Link Appearance, an article from Web AIM
• Using Headings for Content Structure, an article from Web AIM

Alternative text resources

• Text to Speech, an article from the Web Accessibility Initiative
• Alternative Text, an article from Web AIM
• Considerations when writing alt text, an article on Medium.

Slideshow and video resources

• A Primer to Vestibular Disorders, an article from The A11Y Project
• Text to Speech, an article from the Web Accessibility Initiative
• Video Captions, an article from the Web Accessibility Initiative
• Use automatic captioning, an article from YouTube Help
• Captions and subtitles, an article from the Vimeo Help Center

Keyboard support resources

• Keyboard Compatibility, an article from the Web Accessibility Initiative
• Introduction to Focus, an article from Google Developers

Accessibility for themes

When you customize your theme, make design and content choices that help to keep your online store accessible. An accessible website is designed so that it can be used by everyone, including people with disabilities. Making choices for your online store with accessibility in mind can help you to provide an inclusive experience for all of your customers.

The guidelines below were created with the Web Content Accessibility Guidelines (WCAG) in mind. Since there are many factors to consider when creating an accessible website, only following guidelines below doesn't guarantee that your online store is fully accessible. You can learn more about web accessibility by visiting the WCAG website, or by seeing the resources listed below.

Tip

If you're a developer, then you can further optimize your theme for accessibility using Shopify tools and best practices. Learn more on Shopify.dev.

Text accessibility

It's important that the text on your online store is readable for customers who are visually impaired or who have difficulty reading dense blocks of text.

Color contrast

When you edit the colors for your online store, make sure that all of your text is accessible to customers who are colorblind or otherwise visually impaired. These customers rely on adequate color contrast to visually differentiate one thing from another. You can use an online contrast ratio tool to check the contrast of the different parts of your store.

In the example below, the text has a contrast ratio of 2.4:1 against its background, and is difficult to read for some customers.

In the next example, the text has a contrast ratio of 4.8:1, and is easier to read for many customers.

Test the contrast of all text, including body text, headings, links, and form fields. Use the following guidelines:

• The color of body text and button text has a contrast ratio of at least 4.5:1 against its background.
• The color of headings and other large text (font size 24 px and up) has a contrast ratio of at least 3:1 against its background.
• The color of all text over images, including slideshows, banners, and videos, has sufficient contrast ratios against its background. For large text (font size 24 px and up), the contrast is at least 3:1. For smaller text the contrast is at least 4.5:1.
• The color of non-text elements, including input borders and icons, has a contrast ratio of at least 3:1 against its background.

Tip

In some themes, you can place a color overlay between text and an image to improve the contrast and readability of the text.

Text headings

When you add headings to your page with the rich text editor, it's important to keep them in sequential order (1 - 6). Headings are used by assistive technologies to communicate how page content is organized. Skipping over levels, such as a heading level 2 followed by a heading level 4, can be confusing to users. Use the following guideline:

• Headings are used in sequential order and do not skip over levels.

Text size and alignment

When you edit your theme's typography settings, make sure that your text is large enough for customers to comfortably read.

Text should also have consistent spacing between words and letters to make it easy to read. In the example below, the text alignment is justified, which creates inconsistent spacing between words.

In the next example, the text alignment is left-aligned, which creates consistent spacing between words.

When customizing the size and alignment of text, use the following guidelines:

• The minimum font size for body text is the equivalent of 16 px.
• Text alignment isn't justified. Justified text creates inconsistent spacing between words.

Note

Different font families can appear comparatively small or large, even if they have the same font size. If the font you're using appears smaller than other fonts do at 16 px, then use a larger size.

Text links

When you add links to your text, make sure that they can be identified by all of your customers. Because some customers have trouble seeing color, you can't rely on a change in color alone to differentiate a link from regular text. Text should be underlined so that it doesn't rely on the change in color to communicate that the text is a link.

If you edit your theme's stylesheet, then make sure that you don't remove text link styles. Use the following guideline:

• Text links are either underlined or have another visual differentiator from regular text.

Alternative text for images

When you add images to your online store, it's important to make them accessible to customers who are blind or have low vision. You can do this by adding alternative text that accurately describes each image. Customers who use screen readers rely on alt text to communicate the content of images on your online store.

You can add alt text to your product images from the Shopify admin. You can add alt text to the other images in your theme from the theme editor.

When you add alt text to an image, a good practice is to pretend that you're describing the image to someone who has their eyes closed. Help them to create an image in their mind. The way that you describe an image also depends on the context of your web page. For example, you might describe an image differently if your business is a travel agency than if your business is an outdoor equipment store. Consider the following image:

For a travel agency, you might refer to the country and region in which the two friends are traveling, and to the name of the ocean or sea that they're looking at. On the other hand, for an outdoor equipment store, you might focus on the brands and features of the two friends' backpacks.

If your business is a travel agency, then an example of poor alt text might be, "Two people in front of the ocean." For the same agency, an example of good alt text might be, "Two friends traveling in Lagos, Portugal, looking out at the sandy cove of Praia do Camilo on a sunny day."

Add alt text to theme images

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. From the theme editor sidebar, click the section with the image that needs alt text.
4. On the image, click Edit.
5. In the dialog, enter the alt text, and then click Save.
6. Click Save.

Slideshow and video accessibility

When you add videos to your online store, make sure that you consider the needs of customers with low vision, customers who are deaf or hard of hearing, or customers who might be susceptible to vestibular disorders.

Some of these customers rely on the text to speech capability of screen readers, which read aloud the contents of a web page. Additional audio from videos and music, especially when it's unexpected, can make this experience difficult. For customers who are deaf or hard of hearing, it's a good idea to add closed captioning to your videos so that those customers can access the content.

Customers with vestibular disorders can experience dizziness with moving content. Because of this, it's important that slideshows and videos don't play automatically.

Slideshows

When you add a slideshow to your online store, use the following guidelines:

• Slideshows don't play automatically.
• If slideshows do play automatically, then they include a setting that customers can use to pause or stop the slideshow.

Videos

When you add a video to your online store, use the following guidelines:

• Videos don't play automatically.
• If videos do play automatically, then their audio is muted.
• For videos that include audio, the video is fully visible and not obstructed by other page elements. This allows closed captions to remain visible.
• For videos that include dialogue, text transcripts are available. These are included either on the page, or in a link to a separate page.

These guidelines also apply to videos that are in a slideshow.

Keyboard support

Customers with vision or motor impairment might use a keyboard to navigate and complete tasks online. These customers rely on a visual indicator to communicate where their keyboard’s focus is on a web page. In the example below, the Email field has a visual focus indicator:

If you edit your theme's stylesheet, then make sure that you don't remove the keyboard focus style from any page elements. Use the following guideline:

• All interactive page elements have a clear visual indicator when they have keyboard focus. These elements include links, buttons, and form fields.

References

• https://help.shopify.com/en/manual/online-store/blogs/publishing-blogs

Introduction

You can make it easier to manage your blog by using Shopify tools to do the following:

• Create a custom template to layout a blog or an indivdual post in a particular style.
• Set a specific publishing date for posts.
• Publish or unpublish several posts at the same time using a bulk action.
• Invite customers to subscribe to your blog so they'll see your updates.

Create a new blog template

You can create a template to customize the layout of all of the posts in a blog. For example, you could create a template for a blog that will feature a lot of images on posts, and use that template for all posts.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Under the Templates folder, click Add a new template.
4. In the Add a new template dialog box, do the following:
   1. Select the blog option from the dropdown menu.
   2. Choose between a JSON or liquid template, depending on your theme.
   3. In the File name field, write a name for your template.
5. Click Create template.
6. In the online code editor, make your changes to the template to customize the blog post style.
7. Click Save.

Tip

If you're not sure whether to use a JSON or liquid template, then you should check the format of your existing blog templates in the Templates folder.

Creating customized blog templates requires some knowledge of coding, such as using JSON and liquid templates. If you're not comfortable editing code, then you you can hire a Shopify Partner to help you.

Apply a template to a blog

After you create at least one new blog template, you can apply a template to a blog. All of the posts in the blog will display according to the template you set. Using blog templates can be useful when you want the posts to look similar to one another.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click **Manage blogs.
3. Click the blog you want to edit.
4. In the Template drop-down menu, select a template.
5. Click Save.

Create a blog post template

You can create a template to customize the layout of individual blog posts. For example, you could create a template for posts that will feature a lot of images, but that you only want to use for some of the posts in a blog.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Under the Templates folder, click Add a new template.
4. In the Add a new template dialog box, do the following:
   1. Select the article option from the dropdown menu.
   2. Choose between a JSON or liquid template, depending on your theme.
   3. In the File name field, write a name for your template.
5. Click Create template.
6. In the online code editor, make your changes to the template to customize the blog post style.
7. Click Save.

Tip

If you're not sure whether to use a JSON or liquid template, then you should check the format of your existing article templates in the Templates folder.

Creating customized blog post templates requires some knowledge of coding, such as using JSON and liquid templates. If you're not comfortable editing code, then you you can hire a Shopify Partner to help you.

Apply a template to a blog post

After you create at least one new template, you can apply a template to an individual post. Only the posts that have the template applied will appear according to the template you set. Using blog post templates can be useful when you want a shortcut to making a blog post look a certain way, but you don't want to use it fore very post in the blog.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click the blog post that you want to edit.
3. In the Template drop-down menu, select a template.
4. Click Save.

Set a specific publish date for a blog post

You can set a specific publish date for your blog. For example, you can set a post to be published in time for the launch of a new product. You can also backdate a post. Learn more about using future publishing.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, click the post that you want to publish on a specific date.
3. Click Set visibility date.
4. Select the publishing date and time for the post.
5. Click Save.

Publish blog posts in bulk

You can use a bulk action to publish multiple blog posts at the same time and make them visible on your online store.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, check the blog posts that you want to publish.
3. Click Actions.
4. Select Publish selected blog posts.

Unpublish blog posts in bulk

You can use a bulk action to unpublish multiple blog posts at the same time and make them hidden from your online store. This doesn't delete the blog posts from Shopify.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, check the blog posts that you want to unpublish.
3. Click Actions.
4. Select Unpublish selected blog posts.

Invite customers to subscribe to your blog

Shopify automatically produces an RSS feed for every blog that you create, so customers can subscribe to it and receive notifications when you publish a new post. The feed URL is the URL of the blog page with .atom appended. For example, http://store.myshopify.com/blogs/blogname.atom. Customers who want to subscribe to your blog can paste the feed URL into a feed reader.

You can include your feed URL in a blog post to invite customers to subscribe to your blog.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click the name of the blog post where you want to add the feed name for the blog.
3. In the Content field, enter text with the feed name, for example Subscribe to this blog's RSS feed using http://store.myshopify.com/blogs/blogname.atom.
4. Click Save.

Allow customers to subscribe to your blog feed with FeedBurner

FeedBurner is a third-party service that delivers your blog content to subscribing customers.

If you previously integrated your blog with FeedBurner, then your existing blog and its posts stay connected to FeedBurner.

New or existing blogs that aren't already integrated with FeedBurner can't use the service.

Tip

Google has stopped supporting FeedBurner. To get help with FeedBurner, visit the FeedBurner Help Group.

References

• https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/shopify-magic

Automatically generating content in the theme editor

Through Shopify Magic, you can use Artificial Intelligence (AI) to generate suggestions for content in your theme editor based on details that you provide, such as headings and titles. Before you generate automatic text for your theme, review Tips for using Shopify Magic text generation.

Caution

You're responsible for the accuracy of all the content that you publish to your store, even when you use automatic text generation to create it. Generated text can include content sourced from the AI's database that doesn't necessarily apply to your products, such as product benefits you don't list or facts about similar products. For example, the generated content for a T-shirt could mention care instructions such as "machine-washable", or product guarantees such as "guaranteed up to 1000 washes". It's important that you read all generated content closely to ensure accuracy before publishing. Refer to Shopify's Terms of Service to learn more about your responsibilities for store content.

Supported languages

​Support for automatically generated product descriptions is currently available in the following languages:

• English
• German
• Spanish
• French
• Italian
• Japanese
• Portuguese (Brazilian)
• Chinese (Simplified)

By default, American English is the dialect used for English suggestions. The language data that the AI uses is largely from North American sources, so generated content might contain vocabulary and expressions that are local to that region. You can change any part of the content suggestions to match what your customers would expect.

The language that's used to generate your output suggestions is determined by the default language for your storefront. If your default storefront language isn't one of the supported languages, then this feature isn't available in your admin. To use this feature, update your language settings to a supported language.

Although the list of supported languages are the languages that have been verified and tested, the text generation might work for additional languages to differing degrees of quality. If you want to try generating output in your preferred language, then generate the English output, and then use the Translate and Adapt app to translate the generated output to your preferred language. ​

Generate content for your online store

Note

Content can be generated only in specific text fields in the theme editor. If a text box doesn't have the Generate text icon, then suggestions can't be generated for that field.

Steps:

1. From your Shopify admin, go to Online store > Themes.
2. Next to the theme that you want to edit, click Customize.
3. Select a text element in your theme, such as an image banner heading.
4. In the text box, click the Generate text icon in the toolbar.
5. Enter some keywords to indicate the type of content that you want to be generated, such as headline, title, subtitle, or announcement. The more details that you add, the more relevant the suggested content is.
6. Optional: Select a tone for the generated text. You can select one of the predefined tones or add a custom tone. Learn more about choosing a tone for your theme text.
7. Click Generate.
8. Optional: To refresh the suggested text and get a new version, do any of the following:
   • To get new suggestions with the same settings, click Generate again.
   • To change the tone of the suggested text, select a new tone option, and then click Generate again.
9. Optional: To view different versions that you’ve generated, use the arrows below the generated text to move forward and backward through the versions.
   10. Click the suggested content that you want to keep.
   11. Optional: Edit the content to match your store tone and brand.
   12. After you complete your edits, click Save.

Improving the theme content suggestions that you receive

The content that you create needs to communicate the benefits of your products in a non-generic way that reflects your store’s brand. You get better results in your automatically-generated content when you include more details, and choose a tone that matches your business.

​To improve results, consider adding the following types of information:

• Information about the customer: Often, the best content reflects the needs and interests of your target customer. Include some keywords about who the products would be great for, such as their demographic (young parents) or their values (eco-conscious, outdoorsy). This information is helpful for generating product benefits and determining the type of vocabulary that's included in your results.
• Specific details about materials, production method, fit, intended use: Any product specifications you provide can be turned into paragraphs in your generated content.
• Important brand keywords or terminology: Although the results include different phrasing for the information you provide, special words or phrases are often kept, such as brand names or unique descriptive words. For example, if you describe your mint lip balm as mint-tastic in the keywords, then the generated suggestions will often include that term.
• Other details: You can use the details and images that you’ve added to your theme to give you ideas about what keywords to provide, such as product vendors, product categories, or the names of your collections.

References

• https://help.shopify.com/en/manual/online-store/images/3d-images

No code 3D viewer configuration

You can configure your 3D models in your Shopify admin without needing to edit any code. Adjust the lighting, background color, exposure level, zoom, and initial camera view of your model from your Products page.

Edit a 3D model

You can adjust the Lighting of your 3D model, or the Camera view. To access the 3D model editor, open a product that contains a 3D model. Scroll down to the Media section on the product page, and click the 3D icon in the image.

Edit model lighting

1. Open your Products page and select a product that contains a 3D model.
2. Scroll down to Media in the product. Locate the 3D model and click the 3D icon in the image.
3. Click Edit file. By default, the Lighting edit options are loaded first. Select the type of editing you want to do:

• Environment has pre-set filters that change the shadows and reflections that appear on your image. Click any filter to see how it affects your image.
• Lighting allows you to change the exposure of your 3D image. Use the slider to adjust the image exposure.
• Background changes the background color of your 3D image. You can set the image background to be transparent by selecting the Use transparent background box. Select a background color for your image with the color picker, or enter the hex code for the color in the field below the color picker.

1. After editing your file, click Done to save your changes or click Reset to return the image to its original state.

Edit model camera view

1. Open your Products page and select a product that contains a 3D model.
2. Scroll down to Media in the product. Locate the 3D model and click the 3D icon in the image.
3. Click Edit file. Click the Camera icon to load the model's view options.
4. Select the type of editing you want to do:

• Change the X Rotation of the image by increasing or decreasing the X Rotation angle.
• Change the Y Rotation of the image by increasing or decreasing the Y Rotation angle.
• Zoom in on your image with the Zoom percentage slider.

1. After editing your file, click Done to save your changes or click Reset to return the image to its original state.

References

• https://help.shopify.com/en/manual/online-store/themes/customizing-themes/accessibility

Accessibility resources

To learn more about web accessibility for the topics discussed in this article, see the following resources.

Color contrast resources

• Colors with Good Contrast, an article from the Web Accessibility Initiative
• Contrast Ratio, an online tool that you can use to find the contrast ratio between two colors
• Color Contrast Analyzer, a contrast ratio application for download that was developed by the Paciello Group

Text resources

• 16 Pixels Font Size: For Body Copy. Anything Less Is A Costly Mistake, an article from Smashing Magazine
• Text alignment, an article from Web AIM
• Link Appearance, an article from Web AIM
• Using Headings for Content Structure, an article from Web AIM

Alternative text resources

• Text to Speech, an article from the Web Accessibility Initiative
• Alternative Text, an article from Web AIM
• Considerations when writing alt text, an article on Medium.

Slideshow and video resources

• A Primer to Vestibular Disorders, an article from The A11Y Project
• Text to Speech, an article from the Web Accessibility Initiative
• Video Captions, an article from the Web Accessibility Initiative
• Use automatic captioning, an article from YouTube Help
• Captions and subtitles, an article from the Vimeo Help Center

Keyboard support resources

• Keyboard Compatibility, an article from the Web Accessibility Initiative
• Introduction to Focus, an article from Google Developers

Accessibility for themes

When you customize your theme, make design and content choices that help to keep your online store accessible. An accessible website is designed so that it can be used by everyone, including people with disabilities. Making choices for your online store with accessibility in mind can help you to provide an inclusive experience for all of your customers.

The guidelines below were created with the Web Content Accessibility Guidelines (WCAG) in mind. Since there are many factors to consider when creating an accessible website, only following guidelines below doesn't guarantee that your online store is fully accessible. You can learn more about web accessibility by visiting the WCAG website, or by seeing the resources listed below.

Tip

If you're a developer, then you can further optimize your theme for accessibility using Shopify tools and best practices. Learn more on Shopify.dev.

Text accessibility

It's important that the text on your online store is readable for customers who are visually impaired or who have difficulty reading dense blocks of text.

Color contrast

When you edit the colors for your online store, make sure that all of your text is accessible to customers who are colorblind or otherwise visually impaired. These customers rely on adequate color contrast to visually differentiate one thing from another. You can use an online contrast ratio tool to check the contrast of the different parts of your store.

In the example below, the text has a contrast ratio of 2.4:1 against its background, and is difficult to read for some customers.

In the next example, the text has a contrast ratio of 4.8:1, and is easier to read for many customers.

Test the contrast of all text, including body text, headings, links, and form fields. Use the following guidelines:

• The color of body text and button text has a contrast ratio of at least 4.5:1 against its background.
• The color of headings and other large text (font size 24 px and up) has a contrast ratio of at least 3:1 against its background.
• The color of all text over images, including slideshows, banners, and videos, has sufficient contrast ratios against its background. For large text (font size 24 px and up), the contrast is at least 3:1. For smaller text the contrast is at least 4.5:1.
• The color of non-text elements, including input borders and icons, has a contrast ratio of at least 3:1 against its background.

Tip

In some themes, you can place a color overlay between text and an image to improve the contrast and readability of the text.

Text headings

When you add headings to your page with the rich text editor, it's important to keep them in sequential order (1 - 6). Headings are used by assistive technologies to communicate how page content is organized. Skipping over levels, such as a heading level 2 followed by a heading level 4, can be confusing to users. Use the following guideline:

• Headings are used in sequential order and do not skip over levels.

Text size and alignment

When you edit your theme's typography settings, make sure that your text is large enough for customers to comfortably read.

Text should also have consistent spacing between words and letters to make it easy to read. In the example below, the text alignment is justified, which creates inconsistent spacing between words.

In the next example, the text alignment is left-aligned, which creates consistent spacing between words.

When customizing the size and alignment of text, use the following guidelines:

• The minimum font size for body text is the equivalent of 16 px.
• Text alignment isn't justified. Justified text creates inconsistent spacing between words.

Note

Different font families can appear comparatively small or large, even if they have the same font size. If the font you're using appears smaller than other fonts do at 16 px, then use a larger size.

Text links

When you add links to your text, make sure that they can be identified by all of your customers. Because some customers have trouble seeing color, you can't rely on a change in color alone to differentiate a link from regular text. Text should be underlined so that it doesn't rely on the change in color to communicate that the text is a link.

If you edit your theme's stylesheet, then make sure that you don't remove text link styles. Use the following guideline:

• Text links are either underlined or have another visual differentiator from regular text.

Alternative text for images

When you add images to your online store, it's important to make them accessible to customers who are blind or have low vision. You can do this by adding alternative text that accurately describes each image. Customers who use screen readers rely on alt text to communicate the content of images on your online store.

You can add alt text to your product images from the Shopify admin. You can add alt text to the other images in your theme from the theme editor.

When you add alt text to an image, a good practice is to pretend that you're describing the image to someone who has their eyes closed. Help them to create an image in their mind. The way that you describe an image also depends on the context of your web page. For example, you might describe an image differently if your business is a travel agency than if your business is an outdoor equipment store. Consider the following image:

For a travel agency, you might refer to the country and region in which the two friends are traveling, and to the name of the ocean or sea that they're looking at. On the other hand, for an outdoor equipment store, you might focus on the brands and features of the two friends' backpacks.

If your business is a travel agency, then an example of poor alt text might be, "Two people in front of the ocean." For the same agency, an example of good alt text might be, "Two friends traveling in Lagos, Portugal, looking out at the sandy cove of Praia do Camilo on a sunny day."

Add alt text to theme images

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, and then click Customize.
3. From the theme editor sidebar, click the section with the image that needs alt text.
4. On the image, click Edit.
5. In the dialog, enter the alt text, and then click Save.
6. Click Save.

Slideshow and video accessibility

When you add videos to your online store, make sure that you consider the needs of customers with low vision, customers who are deaf or hard of hearing, or customers who might be susceptible to vestibular disorders.

Some of these customers rely on the text to speech capability of screen readers, which read aloud the contents of a web page. Additional audio from videos and music, especially when it's unexpected, can make this experience difficult. For customers who are deaf or hard of hearing, it's a good idea to add closed captioning to your videos so that those customers can access the content.

Customers with vestibular disorders can experience dizziness with moving content. Because of this, it's important that slideshows and videos don't play automatically.

Slideshows

When you add a slideshow to your online store, use the following guidelines:

• Slideshows don't play automatically.
• If slideshows do play automatically, then they include a setting that customers can use to pause or stop the slideshow.

Videos

When you add a video to your online store, use the following guidelines:

• Videos don't play automatically.
• If videos do play automatically, then their audio is muted.
• For videos that include audio, the video is fully visible and not obstructed by other page elements. This allows closed captions to remain visible.
• For videos that include dialogue, text transcripts are available. These are included either on the page, or in a link to a separate page.

These guidelines also apply to videos that are in a slideshow.

Keyboard support

Customers with vision or motor impairment might use a keyboard to navigate and complete tasks online. These customers rely on a visual indicator to communicate where their keyboard’s focus is on a web page. In the example below, the Email field has a visual focus indicator:

If you edit your theme's stylesheet, then make sure that you don't remove the keyboard focus style from any page elements. Use the following guideline:

• All interactive page elements have a clear visual indicator when they have keyboard focus. These elements include links, buttons, and form fields.

References

• https://help.shopify.com/en/manual/online-store/blogs/publishing-blogs

Introduction

You can make it easier to manage your blog by using Shopify tools to do the following:

• Create a custom template to layout a blog or an indivdual post in a particular style.
• Set a specific publishing date for posts.
• Publish or unpublish several posts at the same time using a bulk action.
• Invite customers to subscribe to your blog so they'll see your updates.

Create a new blog template

You can create a template to customize the layout of all of the posts in a blog. For example, you could create a template for a blog that will feature a lot of images on posts, and use that template for all posts.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Under the Templates folder, click Add a new template.
4. In the Add a new template dialog box, do the following:
   1. Select the blog option from the dropdown menu.
   2. Choose between a JSON or liquid template, depending on your theme.
   3. In the File name field, write a name for your template.
5. Click Create template.
6. In the online code editor, make your changes to the template to customize the blog post style.
7. Click Save.

Tip

If you're not sure whether to use a JSON or liquid template, then you should check the format of your existing blog templates in the Templates folder.

Creating customized blog templates requires some knowledge of coding, such as using JSON and liquid templates. If you're not comfortable editing code, then you you can hire a Shopify Partner to help you.

Apply a template to a blog

After you create at least one new blog template, you can apply a template to a blog. All of the posts in the blog will display according to the template you set. Using blog templates can be useful when you want the posts to look similar to one another.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click **Manage blogs.
3. Click the blog you want to edit.
4. In the Template drop-down menu, select a template.
5. Click Save.

Create a blog post template

You can create a template to customize the layout of individual blog posts. For example, you could create a template for posts that will feature a lot of images, but that you only want to use for some of the posts in a blog.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. Under the Templates folder, click Add a new template.
4. In the Add a new template dialog box, do the following:
   1. Select the article option from the dropdown menu.
   2. Choose between a JSON or liquid template, depending on your theme.
   3. In the File name field, write a name for your template.
5. Click Create template.
6. In the online code editor, make your changes to the template to customize the blog post style.
7. Click Save.

Tip

If you're not sure whether to use a JSON or liquid template, then you should check the format of your existing article templates in the Templates folder.

Creating customized blog post templates requires some knowledge of coding, such as using JSON and liquid templates. If you're not comfortable editing code, then you you can hire a Shopify Partner to help you.

Apply a template to a blog post

After you create at least one new template, you can apply a template to an individual post. Only the posts that have the template applied will appear according to the template you set. Using blog post templates can be useful when you want a shortcut to making a blog post look a certain way, but you don't want to use it fore very post in the blog.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click the blog post that you want to edit.
3. In the Template drop-down menu, select a template.
4. Click Save.

Set a specific publish date for a blog post

You can set a specific publish date for your blog. For example, you can set a post to be published in time for the launch of a new product. You can also backdate a post. Learn more about using future publishing.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, click the post that you want to publish on a specific date.
3. Click Set visibility date.
4. Select the publishing date and time for the post.
5. Click Save.

Publish blog posts in bulk

You can use a bulk action to publish multiple blog posts at the same time and make them visible on your online store.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, check the blog posts that you want to publish.
3. Click Actions.
4. Select Publish selected blog posts.

Unpublish blog posts in bulk

You can use a bulk action to unpublish multiple blog posts at the same time and make them hidden from your online store. This doesn't delete the blog posts from Shopify.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. On the Blog posts page, check the blog posts that you want to unpublish.
3. Click Actions.
4. Select Unpublish selected blog posts.

Invite customers to subscribe to your blog

Shopify automatically produces an RSS feed for every blog that you create, so customers can subscribe to it and receive notifications when you publish a new post. The feed URL is the URL of the blog page with .atom appended. For example, http://store.myshopify.com/blogs/blogname.atom. Customers who want to subscribe to your blog can paste the feed URL into a feed reader.

You can include your feed URL in a blog post to invite customers to subscribe to your blog.

Steps:

1. From your Shopify admin, go to Online Store > Blog Posts.
2. Click the name of the blog post where you want to add the feed name for the blog.
3. In the Content field, enter text with the feed name, for example Subscribe to this blog's RSS feed using http://store.myshopify.com/blogs/blogname.atom.
4. Click Save.

Allow customers to subscribe to your blog feed with FeedBurner

FeedBurner is a third-party service that delivers your blog content to subscribing customers.

If you previously integrated your blog with FeedBurner, then your existing blog and its posts stay connected to FeedBurner.

New or existing blogs that aren't already integrated with FeedBurner can't use the service.

Tip

Google has stopped supporting FeedBurner. To get help with FeedBurner, visit the FeedBurner Help Group.

References

• https://help.shopify.com/en/manual/online-store/themes/customizing-themes/edit/shopify-magic

Automatically generating content in the theme editor

Through Shopify Magic, you can use Artificial Intelligence (AI) to generate suggestions for content in your theme editor based on details that you provide, such as headings and titles. Before you generate automatic text for your theme, review Tips for using Shopify Magic text generation.

Caution

You're responsible for the accuracy of all the content that you publish to your store, even when you use automatic text generation to create it. Generated text can include content sourced from the AI's database that doesn't necessarily apply to your products, such as product benefits you don't list or facts about similar products. For example, the generated content for a T-shirt could mention care instructions such as "machine-washable", or product guarantees such as "guaranteed up to 1000 washes". It's important that you read all generated content closely to ensure accuracy before publishing. Refer to Shopify's Terms of Service to learn more about your responsibilities for store content.

Supported languages

​Support for automatically generated product descriptions is currently available in the following languages:

• English
• German
• Spanish
• French
• Italian
• Japanese
• Portuguese (Brazilian)
• Chinese (Simplified)

By default, American English is the dialect used for English suggestions. The language data that the AI uses is largely from North American sources, so generated content might contain vocabulary and expressions that are local to that region. You can change any part of the content suggestions to match what your customers would expect.

The language that's used to generate your output suggestions is determined by the default language for your storefront. If your default storefront language isn't one of the supported languages, then this feature isn't available in your admin. To use this feature, update your language settings to a supported language.

Although the list of supported languages are the languages that have been verified and tested, the text generation might work for additional languages to differing degrees of quality. If you want to try generating output in your preferred language, then generate the English output, and then use the Translate and Adapt app to translate the generated output to your preferred language. ​

Generate content for your online store

Note

Content can be generated only in specific text fields in the theme editor. If a text box doesn't have the Generate text icon, then suggestions can't be generated for that field.

Steps:

1. From your Shopify admin, go to Online store > Themes.
2. Next to the theme that you want to edit, click Customize.
3. Select a text element in your theme, such as an image banner heading.
4. In the text box, click the Generate text icon in the toolbar.
5. Enter some keywords to indicate the type of content that you want to be generated, such as headline, title, subtitle, or announcement. The more details that you add, the more relevant the suggested content is.
6. Optional: Select a tone for the generated text. You can select one of the predefined tones or add a custom tone. Learn more about choosing a tone for your theme text.
7. Click Generate.
8. Optional: To refresh the suggested text and get a new version, do any of the following:
   • To get new suggestions with the same settings, click Generate again.
   • To change the tone of the suggested text, select a new tone option, and then click Generate again.
9. Optional: To view different versions that you’ve generated, use the arrows below the generated text to move forward and backward through the versions.
   10. Click the suggested content that you want to keep.
   11. Optional: Edit the content to match your store tone and brand.
   12. After you complete your edits, click Save.

Improving the theme content suggestions that you receive

The content that you create needs to communicate the benefits of your products in a non-generic way that reflects your store’s brand. You get better results in your automatically-generated content when you include more details, and choose a tone that matches your business.

​To improve results, consider adding the following types of information:

• Information about the customer: Often, the best content reflects the needs and interests of your target customer. Include some keywords about who the products would be great for, such as their demographic (young parents) or their values (eco-conscious, outdoorsy). This information is helpful for generating product benefits and determining the type of vocabulary that's included in your results.
• Specific details about materials, production method, fit, intended use: Any product specifications you provide can be turned into paragraphs in your generated content.
• Important brand keywords or terminology: Although the results include different phrasing for the information you provide, special words or phrases are often kept, such as brand names or unique descriptive words. For example, if you describe your mint lip balm as mint-tastic in the keywords, then the generated suggestions will often include that term.
• Other details: You can use the details and images that you’ve added to your theme to give you ideas about what keywords to provide, such as product vendors, product categories, or the names of your collections.