Day 5/3

Plan 5/3:

• Shopify theme features (product merchandising, Pricing and payment, delivery and fulfillment, customer engagement, ...)

• liquid researching and practicing

• custom speed

Product merchandising

Product variant

Each product can be broken up to maximum of 3 options, and each combination of those options is a variant.

To support variants in your theme, you need:

• variant deep link handling: the products link that directly link to a variant by containing a ?variant=[variant=id] query parameter, with [variant-id] is the ID of that variant

• variant selector: a feature that allows customers to choose different versions of a product, such as size or color, before adding the product to their cart. You should use product.options_with_values object to generate a selector for each option

Combined listing

Is a single parent product that has variants that point to one or more child products.

A combined listing product inherits options from both the parent and child products so it may have more options than the limit. To ensure all options are rendered, themes need to use product.options_with_values

To avoid loading all variant information, themes can paginate through a product's variants based on selected option valuevalues, product_option_value.variant object enable this

Product recommendations

Tailoring product recommendations across the customer's journey is a powerful way to help customers discover products.

Types of recommendation intents:

• related products

• complementary products

Related products

Are products that are similar to a selected product. These products should appear in a You might also like section on the product page.

Recommendation logic bases on:

• purchase history

• product description

• related collections

Recommendation algorithm criteria:

• Purchase history and Product description: for merchants with English storefront

• Purchase history only: for merchants with non-English storefront

• Related collections: when purchase history and product description aren't available

Complementary products

Are products that are often bought in addition to a selected product.

To implement product recommendations, you'll use the following:

• The recommendations object

• The /{locale}/recommendations/products endpoint of the Product Recommendations API

Media and images

Product media usually displayed on product page or in other areas of your theme, so you should build your media display in a snippet so that it can be reused.

Every theme requires a different approach to create responsive media that works across all screen sizes and devices

Shopify-XR library support merchants with 3D models of their products

Product media UX guidelines

Both video and 3D model media displays should have a icon badge on the media thumbnail, and a icon button control on the featured media

Pricing and payments

Discount

Discounts apply directly to specific line items, or apply to the cart or order as a whole.

To display discounts, you'll use:

• discount_application object: registers discounts at the cart, checkout, or order level

• discount_allocation object: associates a discount_application with a line item

• line_item object: price and discount attributes of this object complete the price display

Purchase options

To enable purchase options, apps create selling plan groups for a product, and selling plans for individual product variants.

Support purchase options

Requires adding a product form to a template. A product form can be added to any template that can access the product object.

To support purchase options in your theme, you'll use the following resources:

• The form object.

• Objects and object properties that represent selling plan information, including:

  • selling_plan_group: A group of selling plans available for the product's variants.

  • selling_plan: The details of the selling plan.

  • selling_plan_allocation: Information about how a particular selling plan affects a line item.

  • variant.requires_selling_plan.

• The /{locale}/cart/change.js endpoint of the Cart AJAX API.

Subscription UX

Create a clear, logical, and integrated customer experience for subscription purchases

• Establishing a visible hierarchy to highlight subscription benefits and options.

• Progressively disclosing information to guide customer choices.

• Integrating the subscription UI seamlessly within the existing theme design.

• Adhering to merchants' workflows and avoiding duplication of Shopify-managed resources.

• Displaying subscription information clearly across product pages, collection pages, and other relevant sections of the online store.

Deferred purchase option UX

Ensure a clear and trustworthy shopping experience for customers:

• Clear presentation of important purchase information, including costs, payment schedules, and delivery timelines.

• Seamless integration of deferred purchase options within the theme's design.

• Utilization of understandable language to describe purchase terms, like "pre-order" or "try before you buy."

• Displaying deferred purchase option details prominently across product forms, cart items, and order details to inform customers about their purchasing choices.

Shop pay installment

• Shop Pay Installments allows customers to pay for orders between $50 and $3,000 in four interest-free installments.

• The Shop Pay Installments banner informs customers about the option to pay in installments.

• The banner includes a "Learn more" link that opens a pop-up with information about installment amounts, details about installments, and any necessary disclosures.

• To add the Shop Pay Installments banner, you need to add a product form and/or a cart form to the relevant templates.

• The implementation requires the use of the form object and the payment_terms filter.

• If your theme doesn't use product forms or cart forms, you can convert an HTML form to Liquid and add necessary attributes.

• Ensure the banner updates based on the currently selected variant or cart total changes.

Accelerated checkout

• Accelerated checkout allows merchants to enable off-site checkout options like Apple Pay or Google Pay.

• Accelerated checkout buttons can be displayed on the storefront or the first step of the checkout process.

• The "additional_checkout_buttons" Liquid object can be used to determine if off-site checkout is available and the "content_for_additional_checkout_buttons" Liquid object can output the HTML for the buttons.

• Accelerated checkout buttons can be added to various parts of the theme, such as the cart template or a cart drawer.

Support B2B customers in your theme

• Merchants can conduct business-to-business (B2B) commerce on Shopify.

• Merchants can create companies and associate them with customers and locations.

• B2B customers can select a location for their transactions.

• To support B2B customers, themes can implement a company location picker.

• The company location picker allows B2B customers to choose the location they are purchasing for.

• The location picker code should check if the customer is a B2B customer.

• If the customer is a B2B customer, the location picker should display the available company locations.

• The customer object properties related to B2B include: customer.b2b?, customer.company_available_locations, customer.current_company, and customer.current_location.

Explicit currency formatting

• Explicit currency formatting is used to display the currency code along with the price to avoid confusion for customers.

• Merchants can enable explicit currency formatting by creating a currency code theme setting.

• The currency code theme setting allows merchants to choose whether the currency code is included in price displays.

• To implement explicit currency formatting, references to the currency code theme setting need to be added in price displays.

• Liquid filters such as money_with_currency and money are used to apply explicit currency formatting.

• The Shopify admin allows merchants to define the format of money filters.

Delivery and fulfillment

• Merchants can enable local pickup for their products.

• Pickup availability can be displayed on product pages to inform customers if a specific product variant is available for local pickup.

• The pickup availability functionality requires variant selection.

• To implement pickup availability, you need:

  • The variant object :

  • The store_availability object : A variant's inventory information for a physical store location.

  • The location object : A store location

• Implementation involves three components:

  • The pickup availability section: Renders the display content for each location where the variant is stocked.

  • The pickup availability container: An empty container on the product page that holds the section content.

  • A JavaScript function: Renders the section content in the container and updates it when variants are selected.

Customer engagement

Email consent

• There are two ways for customers to consent to email marketing through a Shopify theme: newsletter sign-up form and customer registration form checkbox.

• To add a newsletter sign-up form, use the Liquid form tag with the 'customer' parameter and include an input with type 'email' and name 'contact[email]'.

• When a customer signs up through the newsletter form, a customer will be created with the entered email, and the accepts_marketing attribute of the customer object will be set to true.

• To include a checkbox in the customer registration form for email marketing consent, use the inputs: a hidden input with type 'hidden' and name 'customer[accepts_marketing]', and a checkbox input with type 'checkbox' and name 'customer[accepts_marketing]'.

• It is important to include a hidden input along with the checkbox, as an unchecked box won't record a value when the form is submitted.

Customer information

• Additional customer information can be collected during the customer registration process.

• The information is saved as a customer note and can be accessed through the Customer object of the Admin API.

• HTML input types can be used to collect the information, except for file uploads.

• Each input should have the attribute name="customer[note][Information title]", where "Information title" is the title of the information being collected.

• Multiple inputs can be used to collect different pieces of information.

• The collected information can include details like birthdays, allergies, and more.

• Liquid does not provide direct access to customer notes, so they need to be accessed through the Admin API.

Add a contact form

• The contact form allows customers to get in touch with the merchant.

• The form can be added to a theme using the Liquid form tag and the 'contact' parameter.

• The required input for the form is the customer's email address.

• Optional inputs can be added using HTML input types with the attribute name="contact[information_id]".

• Optional inputs can include dropdowns, radio buttons, checkboxes, and more.

• Specific fields can be made required for customers by adding the attribute required="required" to the input element.

• The merchant can view contact form submissions.

• Example code and implementations are provided for reference.

Market

Support multiple currencies and languages

• Customers can browse the shop and checkout in their preferred currency and/or language.

• To support multiple currencies and languages, developers can use the form object and the localization object.

• Implementing country and language selectors allows customers to select their preferred currency and language.

• Shopify Plus uses geolocation to automatically select the most relevant country for merchants on the Shopify Plus plan.

• Country and language selectors can be placed in the header, footer, or navigation drawer.

• Developers can refer to UX guidelines for placement recommendations and styling best practices.

• Consider implementing locale-aware URLs and optimizing for search engines when dealing with multiple currencies and languages.

Detect and set a visitor's optimal localization

• It is important to ensure that visitors interact with the appropriate localized version of the store.

• Search engines and automatic redirection by Shopify can help pre-localize visitors, but manual detection is needed for accurate localization.

• The guide demonstrates how to use the Ajax API to detect a visitor's optimal localization.

• It is advised not to restrict visitors from browsing in a different context, as GeoIP detection may not always be accurate.

• Shopify's checkout process will handle appropriate pricing and product availability based on the customer's chosen shipping address.

• The guide assumes that the Shopify store has multiple markets configured.

Country and language selector

• Country and language selectors should be placed in prominent locations in your theme.

• Common placements include the footer, near customer account links, near the cart, or inside a navigation drawer.

• If both country and language selectors are present, they should always be placed together.

• In the footer, the selector should be placed at the top of the sub-footer content.

• If customer account links are near the cart, the selector should also be placed near the cart.

• The style of the selector should be consistent with the style of other elements on the page.

• The selector should complement, not compete with, other important elements like the cart.

Site navigation and search

Navigation

• Merchants can create menus for their shop navigation.

• Menus can be nested to create drop-down menus.

• To add navigation to a theme, a linklist object should be referenced.

• Each linklist object represents a menu defined in the Shopify admin.

• The global linklists object can be used to access all linklist objects in the store.

• The default menu in the Shopify admin is the Main menu, accessed with the handle "main-menu".

• Merchants can select their own menu using the link_list setting, referencing the menu using the setting name (equivalent to a linklist handle).

• Information such as title, URL, and child links can be output for each menu link.

• Links can be nested up to three levels deep.

• The code example in the documentation demonstrates how to output a menu using a link_list type setting called "menu" in the header section.

Storefront search

Predictive search

• Predictive search can be added to a Shopify theme to provide suggested results as users type into the search field.

• Predictive search supports suggestions for products, collections, queries, pages, and articles.

• The search dropdown displays query suggestions, collection suggestions, product suggestions, page suggestions, and article suggestions.

• Suggestions are generated based on search terms that match searchable properties of shop resources.

• Products or variants that match the search are displayed as product suggestions.

• It is important to be familiar with the API limitations and UX guidelines before implementing predictive search in a theme.

Filtering

Storefront filtering

Support storefront filtering

• Storefront filtering allows merchants to create filters for collection and search results pages.

• Filters are based on product data such as availability, price, variant options, and more.

• To implement storefront filtering, you need to use the filter object and either the collection object or the search object.

• Filters are applied through URL parameters, and you should understand the structure of filter URL parameters.

• A basic implementation of the filter display uses a form with filter inputs and "submit" buttons to apply the filters.

• JavaScript can be used to automatically submit the form based on input changes.

• When the form is submitted, the page is refreshed with the applied filters.

Storefront filtering UX guidelines

• Two main filter types are recommended: list filters and price range filters.

• For list filters, use checkbox inputs to allow for the selection of multiple values.

• For price range filters, use a dual-handled slider with number input fields for accessibility

• Maintain a clear visual hierarchy to guide users' attention.

• Avoid dead ends by providing clear navigation options and avoiding filters that yield no results.

• Clearly display applied filters to keep users informed.

• Manage filter groups to organize and categorize filters effectively.

• Optimize the filtering experience for mobile devices.

• Use progressive enhancement techniques to ensure compatibility with different devices and browsers.

Tag filtering

• Tag filtering allows you to filter collections in Shopify based on product tags.

• To apply a tag filter, append /[tag-handle] to the collection URL, where [tag-handle] is the handleized version of the desired product tag.

• You can filter by multiple tags by combining the handleized tags with a "+" symbol.

• Tag filtering uses the AND operator, so only products that have all the specified tags will be shown.

• If a tag in the URL is not used on any products, Shopify will redirect to a collection URL without the tag.

• It is recommended to use storefront filtering instead of tag filtering for more flexibility and ease of use.

SEO

Metadata

• SEO metadata can be added to a Shopify theme using HTML and Liquid.

• The three main aspects of SEO metadata are: the title tag, meta description, and canonical URLs.

  • The title tag provides a page title for search engines and can be accessed using the Liquid page_title object.

  • The meta description provides a page description for search engines and can be accessed using the Liquid page_description object.

  • Canonical URLs can be specified using the global Liquid canonical_url object.

• Including SEO metadata in the element of the theme is recommended.

• Shopify provides resources such as a developer forum, Discord, Twitter, and YouTube for community support.

• Updates and news can be accessed through the developer changelog, partner blog, engineering blog, and UX blog.

• Legal information such as the Terms of Service, API Terms of Service, and Privacy Policy is available.

Hreflang tags

• Hreflang tags are used in themes to enable search engines to display region-specific and translated content.

• Search engines use hreflang tags to determine the language and region of a website and serve the appropriate URL to users.

• Each language or region URL should have a unique hreflang tag.

• Hreflang tags should be added to the section of the theme.liquid file.

• Examples of adding hreflang tags to collection and product pages are provided.

• Next steps include learning more about using hreflang tags in multilingual stores and referring to Google's documentation for further guidance.

Trust and security

Security badges

• Security badges can be added to Shopify themes to establish customer trust.

• The badges can be placed in the footer or near the "Add to Cart" button on product pages.

• They can also be placed anywhere HTML can be added.

• Different versions of the security badges are available, including light-colored and dark-colored options.

• The badges can be resized without losing quality, as they are in SVG format.

• Adding a security badge to the checkout page is only possible for Shopify Plus stores with access to checkout.liquid.

Theme store

Requirements

• All themes must meet the requirements to be published on the Shopify Theme Store.

• Themes must be exclusive to the Theme Store and cannot contain external marketing material.

• Thorough testing of themes is required before submission to ensure functionality and quality.

• Themes that do not meet the requirements or have not been tested thoroughly enough will be rejected.

• Repeat offenses may result in a suspension or permanent rejection.

• Merchants benefit from accessing high-quality themes and the latest features through the Theme Store.

• The theme review process and submission guidelines should be followed.

• Additional details and guidelines for specific aspects of theme development are provided on the linked page.

Testing

Testing assets

• The availability of CSV datasets that can be imported into a store for testing purposes.

• The two main CSV datasets mentioned are the theme review team product CSV and the performance test product CSV.

• Additional setup is required for certain features before they can be tested, including inventory quantities, local pickup, unit pricing, rich media, selling plans, and Shop Pay Installments.

• Instructions are provided for configuring inventory quantities for testing, such as adjusting quantities for different product variants and setting some variants as sold out.

• The content beyond the truncated portion of the URL is not included in the bulleted summary.

Testing checklist

• The checklist is for testing a theme for the Shopify Theme Store. The checklist helps ensure the theme meets functional requirements.

• Tests should be run in both the theme editor and the storefront.

• The checklist includes testing the home page, header, footer, sections, pages, link sharing, local pickup, unit pricing, rich media, and selling plans.

• Specific tests include verifying sections, slideshows, featured products and collections, collection lists, image with text, newsletter, rich text, blog posts, videos, store name/logo in the header, navigation menus, social media links, search functionality, links in the footer, and more.

• The checklist also mentions the need to populate the store with data and configure additional features for testing.

• The document provides information on testing assets and additional configurations.

Review process

Submitting a theme

• When submitting a theme to the Shopify Theme Store, it undergoes a review process by Shopify's theme review team.

• The theme is reviewed to ensure it meets the Theme Store requirements. If the theme meets the requirements, it is considered for approval; otherwise, it is rejected.

• Thoroughly testing the theme can help reduce the chance of rejection.

• The theme review process consists of five stages, and the theme must meet the requirements of each stage to advance to the next.

  • Stage 1 involves checking theme features and Online Store 2.0 compatibility.

  • Stage 2 focuses on Liquid code quality, performance, and security.

  • Stage 3 evaluates the theme's accessibility, mobile responsiveness, and internationalization.

  • Stage 4 verifies that the theme adheres to design and UX guidelines.

  • Stage 5 involves a final review and approval decision.

• Throughout the review process, Shopify provides contact and communication with theme developers.

• It is possible to make changes to the theme during the review process if needed.

Theme Store listings

• The Theme Store listing page provides guidelines for submitting themes to the Shopify Theme Store.

• The first step is uploading the theme ZIP file, which can be done using the Shopify CLI.

• A ZIP validator assesses the contents of the ZIP file, including the theme name and styles.

• Theme review notes should describe the target merchant and how the theme features help in engaging and converting customers.

• Theme review instructions should provide guidance for testing the theme, including any special setup requirements.

• The listing page includes information on theme price and value proposition, styles and demo stores, key highlights, and theme features.

• It also covers tracking and analytics, contact and support information, and support and documentation resources.

Common theme rejections

Common reasons for theme rejection in the Shopify Theme Store review process:

• Missing mandatory Shopify features.

• Not meeting technical requirements.

• Insufficient testing leading to bugs or errors.

• Settings and labels not following style and terminology requirements.

• Not meeting accessibility or performance benchmarks.

• Incomplete or short theme listing, grammar and punctuation issues, or missing screenshots.

• Demo stores not effectively demonstrating theme functionality or using realistic use cases.

• Demo stores using outdated versions of the theme.

• Demo stores using unlicensed or restricted content.

• Including code or components that are the intellectual property of another entity.

Theme success

Prohibited actions

• Prohibited actions on the Shopify Theme Store can result in removal of a theme or removal from the Shopify Partner program.

• Violating the Partner Program Agreement can lead to disciplinary action.

• Actions such as continuous failure to respond to merchant support requests, selling or abusing merchant data, and failing to provide consistent service can result in theme removal.

• Removing a theme from the Shopify Theme Store without sufficient notice is also a violation.

• The terms and guidelines can change without notice.

Managing theme reviews

• Merchants can review themes installed on their store and choose a rating: I love it!, Neutral, or I'm not happy.

• Theme developers receive email notifications when their theme is reviewed or a review is updated.

• Prohibited actions include submitting fake or misleading reviews and review incentivization.

• Theme developers can ask for reviews but should use neutral language and not offer anything in exchange for a review.

Brand asset guidance

• Shopify provides brand assets and guidelines for Partners to promote their business on the Shopify Theme Store.

• The brand assets are intended for use in digital display ads, websites, social marketing, email marketing, and print materials.

• There are official badge assets available for Partners to use when marketing their Shopify theme.

• The purchase flow for themes must redirect to the Shopify Theme Store.

• The logo should not be altered or modified in any way to maintain consistency.

Updating your theme

• Theme updates are an iterative process that involves considering merchant feedback, quality assurance testing, and integrating updates.

• A minimum of four weeks must pass between updates to avoid update fatigue for merchants.

• New themes on the Shopify Theme Store can have updates every two weeks for the first two months.

• Shopify Theme Partners are required to provide ongoing updates to their themes to remain on the Shopify Theme Store.

• Theme updates can be submitted for review as ZIP files through the Partner Dashboard, with a version number and release notes.

• The theme review team primarily reviews updates during Eastern Standard Time (EST) business hours.

• Updates mandated by Shopify may have deadlines to accommodate feature release dates.

• After a successful review and publication, an automatic notification email is sent to the theme developer.

Removing a theme

• Removing a theme from the Shopify Theme Store should be a last resort.

• Removing a theme may have a negative impact on merchants' businesses.

• If you want to remove a theme, contact Partner Support through your Partner Dashboard.

• Provide the reasons behind your decision to remove the theme.

• While waiting for the theme to be removed, continue supporting and providing bug fixes for the theme.

• You are expected to support existing merchants using your theme with general bug fixes and maintenance for at least one year after removal.