DOCSEARCHbyAlgolia
Submit Docs

Shopify 2006 Enhanced Theme Documentation

website·Indexed 32 days ago

https://theme.shopify2006.com

Documentation for an enhanced Shopify theme based on Dawn. It includes guides on Mega Menu setup, Color Swatches, FAQ pages, product jumping, and empty cart recommendations. It also provides detailed instructions for migrating settings, templates, and section files from older themes or official Shopify themes using settings_data.json.

Tokens
4K
Snippets
9
Records
29
Agent score
55%

What's inside Shopify 2006 Theme

  1. Overview of the Enhanced Shopify Theme based on Dawn

    The Enhanced Theme is built upon Shopify's default 'Dawn' theme, adding extended functionality while maintaining ease of use with full Chinese language prompts. It supports multiple color schemes, allowing users to replicate the color and layout effects of 11 other Shopify themes. The theme is continuously updated to align with official Shopify releases, ensuring users receive new official features alongside the theme's custom enhancements.

  5. Migrate Shopify template files between themes

    Template files store page setting information. To migrate these settings to a new theme, you must create files with the exact same name and type in the new theme and copy the code from the old theme. This applies to product, page, and collection templates.

    Steps to migrate:

    1. Open the code editor for both the old theme and the new theme in separate windows.
    2. In the old theme, open the target template file (e.g., page.about.json), select all code, and copy it.
    3. In the new theme, create a new file of the same type (e.g., 'page') with the same name (e.g., 'about').
    4. Paste the copied code into the new file and save.

  6. Pin specific products to the top of a collection page

    To pin specific products to the top of a collection page for advertising purposes, append the query parameter ?page=1&sort_by= to the collection URL, followed by a comma-separated list of the product handles you wish to prioritize.
    https://xxx.myshopify.com/collections/new-collection?page=1&sort_by=fiber-side-chair-1,fiber-armchair-1,elevated-vase-1

  8. Migrate theme configuration and template files

    Migration primarily involves copying .json files that have been modified. The primary files to migrate include the global settings file settings_data.json and various template files. If errors occur during saving after a migration, resolve them by referring to the demonstration videos or manually adjusting conflicting settings in the new theme to match the old one.

  9. Restore theme styles after migration via settings_data.json

    To restore theme styles (such as color schemes, logo widths, and typography) after a migration or update, you must update the settings_data.json file. This involves replacing the existing file content and manually appending the required configuration blocks for your specific theme style (e.g., 'Craft' or 'Crave') via the Shopify code editor. This ensures that the visual identity and layout constraints of the theme are preserved.
    // Example configuration block for 'Craft' style
"Craft": {
  "logo_width": 100,
  "color_schemes": {
    "scheme-1": {
      "settings": {
        "background": "#EFECEC",
        "text": "#252525",
        "button": "#2C332F",
        "button_label": "#FFFFFF"
      }
    }
  },
  "type_header_font": "americana_n4",
  "type_body_font": "quattrocento_sans_n4",
  "page_width": 1200
}

  10. Restore theme styles after migration via settings_data.json

    To restore theme styles after a migration, you must update the settings_data.json file in the Shopify code editor. This process ensures that critical visual settings—including color schemes, logo widths, card styles, and border radii—are correctly applied to the new theme version. You should replace the existing file content and manually append the required configuration blocks to maintain the intended design.
    // Example of style configuration blocks to be added to settings_data.json
{
  "card_style": "standard",
  "card_color_scheme": "scheme-1",
  "card_corner_radius": 12,
  "collection_card_style": "standard",
  "blog_card_style": "standard",
  "media_radius": 12,
  "popup_corner_radius": 12,
  "drawer_border_thickness": 3,
  "badge_position": "top right",
  "brand_image_width": 100,
  "predictive_search_enabled": true,
  "cart_type": "notification",
  "Sense": {
    "logo_width": 70,
    "color_schemes": {
      "scheme-1": {
        "settings": {
          "background": "#FDFBF7",
          "text": "#2E2A39",
          "button": "#9B046F",
          "button_label": "#FDFBF7"
        }
      }
    },
    "type_header_font": "harmonia_sans_n6",
    "page_width": 1200
  }
}

  11. Enable Variant Image Group feature in Shopify theme

    The Variant Image Group feature is compatible with theme versions v8.0.0 (2023-02) through v14.0.0 (2024-06).

    Prerequisite: This feature only works when the product page desktop layout is set to "Stacked" (堆叠). It is not compatible with the "Thumbnail" or "Thumbnail Carousel" options. If you need this feature for specific products only, create and assign a separate product template where the desktop layout is set to "Stacked".

    Implementation Steps:

    1. Modify Product Media Gallery: In product-media-gallery.liquid, locate the first occurrence of for media in product.media and add the following logic to handle image visibility based on alt text: {% if product.selected_or_first_available_variant.featured_image.alt != media.alt and product.selected_or_first_available_variant.featured_image.alt != blank %} style="display: none;" {% endif %} data-alt= "{{ media.alt }}"

    2. Update Theme Layout: In the layout/theme.liquid file, find the line {% render 'script' %} and replace it with {% render 'filter' %}.

    <!-- In product-media-gallery.liquid -->
<!-- Find: for media in product.media -->
<!-- Add the following snippet inside the element: -->
{% if product.selected_or_first_available_variant.featured_image.alt != media.alt and product.selected_or_first_available_variant.featured_image.alt != blank %} style="display: none;" {% endif %} data-alt= "{{ media.alt }}"

<!-- In layout/theme.liquid -->
<!-- Replace: -->
{% render 'script' %}
<!-- With: -->
{% render 'filter' %}