A Shopify theme scaffold offering both adaptability and customization, built on industry best practices for efficient, personalized storefront development.
License: Apache License 2.0
![shopify[bot] avatar](https://avatars.githubusercontent.com/in/101950?v=4 "shopify[bot]")
The current absence of a multicolumn section in the Shopify skeleton theme limits the layout options available for organizing and presenting content. This can result in a less flexible and visually appealing design for certain types of information.
I suggest the inclusion of a multicolumn section in the Shopify skeleton theme, allowing merchants to easily create and customize multicolumn layouts. This feature would enhance the theme's versatility, providing a more dynamic and aesthetically pleasing structure for various types of content.
Alternative solutions might involve using custom code to implement multicolumn layouts. However, integrating a dedicated multicolumn section directly into the theme would simplify the process for users and ensure a seamless and consistent design experience.
A multicolumn section adds a layer of sophistication and flexibility to the theme, accommodating diverse content presentation needs. With the prevalence of multicolumn layouts in modern web design, this feature would align the Shopify skeleton theme with current design trends, offering users more creative control over their storefronts.
Is your feature request related to a problem? Please describe.
The current implementation of class names in the Liquid section provided in the [video-text.liquid, features-collection.liquid, cards.liquid] does not follow the BEM (Block, Element, Modifier) methodology, which can impact code maintainability and readability.
Describe the solution you'd like
I would like to propose updating the class names in the Liquid section to adhere to the BEM methodology. This involves renaming existing classes and introducing new ones where needed, following the BEM convention of block__element--modifier.
Describe alternatives you've considered
An alternative would be to keep the existing class names without applying the BEM methodology. However, adopting BEM would enhance code organization and make it easier to understand the structure and relationships between different elements.
Additional context
Adopting BEM will contribute to a more modular and maintainable codebase. It aligns with best practices in front-end development and improves the consistency and clarity of the class naming convention used throughout the project.
Previous Code (Without BEM Methodology)
<div class="video-text-section">
<div class="video-container">
<!-- Video iframe with play icon -->
<div class="video-overlay">
<iframe
src="{{ section.settings.frameVideoUrl }}"
frameborder="0"
allowfullscreen
></iframe>
<div class="play-icon-container">
<svg class="play-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M3 22v-20l18 10-18 10z"/>
</svg>
</div>
</div>
<!-- End Video iframe with play icon -->
<!-- Modal for the Main video -->
<div class="video-modal" id="videoModal">
<iframe src="{{ section.settings.mainVideoUrl }}" frameborder="0" allowfullscreen></iframe>
<button class="close-modal" onclick="closeModal()">Close</button>
</div>
</div>
<div class="text-content">
<!-- Right half content -->
<h2>{{ section.settings.heading1 }}</h2>
<h3>{{ section.settings.heading2 }}</h3>
<p>{{ section.settings.paragraph }}</p>
<div class="link-section">
<a href="{{ section.settings.linkUrl }}">{{ section.settings.linkUrlText }}</a>
</div>
</div>
</div>
Updated Code (With BEM Methodology)
<div class="video-text-section">
<div class="video-container">
<!-- Video iframe with play icon -->
<div class="video-container__overlay">
<iframe
src="{{ section.settings.frameVideoUrl }}"
frameborder="0"
allowfullscreen
></iframe>
<div class="video-overlay__play-icon-container">
<svg class="video-overlay__play-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M3 22v-20l18 10-18 10z"/>
</svg>
</div>
</div>
<!-- End Video iframe with play icon -->
<!-- Modal for the Main video -->
<div class="video-modal" id="videoModal">
<iframe src="{{ section.settings.mainVideoUrl }}" frameborder="0" allowfullscreen></iframe>
<button class="video-modal__close" onclick="closeModal()">Close</button>
</div>
</div>
<div class="text-content">
<!-- Right half content -->
<h2 class="text-content__heading">{{ section.settings.heading1 }}</h2>
<h3 class="text-content__sub-heading">{{ section.settings.heading2 }}</h3>
<p class="text-content__paragraph">{{ section.settings.paragraph }}</p>
<div class="text-content__link-section">
<a href="{{ section.settings.linkUrl }}" class="text-content__link">{{ section.settings.linkUrlText }}</a>
</div>
</div>
</div>
Is your feature request related to a problem? Please describe.
I am eiming to enhance the content within the en.default.json file to include new data that is vital for our platform's functionality and user experience.
Describe the solution you'd like
We need to update the en.default.json file with additional key-value pairs for improved language support or to accommodate new features. This will ensure that our platform remains adaptable and supportive of diverse user requirements.
Describe alternatives you've considered
We've assessed the need for updating the en.default.json file and concluded that it's essential to maintain consistency and comprehensiveness across language resources. Not updating this file might result in inconsistencies or missing information in the platform's user interface.
Additional context
The update aims to reflect changes in user interface texts, error messages, labels, or any other textual content required for proper functioning and clear communication within the platform. This enhancement aligns with our commitment to providing a seamless user experience for our diverse user base.
Before code:
{
"accessibility": {
"skip_to_text": "Skip to main content",
"refresh_page": "Refresh page",
"link_messages": {
"new_window": "Opens in a new window"
}
},
"sections": {
"header": {
"announcement": "Announcement"
}
}
}
After code:
{
"accessibility": {
"skip_to_text": "Skip to content",
"skip_to_product_info": "Skip to product information",
"close": "Close",
"unit_price_separator": "per",
"vendor": "Vendor:",
"error": "Error",
"refresh_page": "Choosing a selection results in a full page refresh.",
"link_messages": {
"new_window": "Opens in a new window.",
"external": "Opens external website."
},
"sections": {
"announcements": {
"previous_announcement": "Previous announcement",
"next_announcement": "Next announcement",
"carousel": "Carousel",
"announcement": "Announcement",
"announcement_bar": "Announcement bar"
},
"header": {
"announcement": "Announcement",
"menu": "Menu",
"cart_count": {
"one": "{{ count }} item",
"other": "{{ count }} items"
}
},
},
}
Design can be found at website https://www.yummygums.com/.
Image of the section is pasted below.
This issue involves integrating schema into the [Section Name] as per the design specifications of the Skeleton Shopify Theme. Add the file with the name [section-name].liquid to the sections folder if it does not exist already. This file will contain the schema for the [Section Name] section. The schema should be implemented according to the design specifications and allow for the necessary customization and input settings as identified in the design. The schema should also be tested and functional both on desktop and mobile views. Ensure that the code follows the project's coding standards and best practices. Any logical inconsistencies in the design should be addressed and standardized for end-user flexibility.
Before starting on this issue, please refer to our Milestone 1: Schema Integration Documentation. This guide provides detailed steps and resources to assist you in this task.
/attempt below.Is your feature request related to a problem? Please describe.
I want to implement a collage section similar to the one in the Dawn theme. The current theme lacks this feature, and it's essential for showcasing a visually appealing arrangement of images and content.
Describe the solution you'd like
I propose the addition of a new section or customization option that allows users to create a collage within the Shopify theme. This feature should enable easy uploading, arrangement, and customization of images or content blocks in a visually appealing manner. It should be user-friendly and compatible with different screen sizes and resolutions.
Describe alternatives you've considered
I've explored alternative solutions, such as using existing sections or apps, but they don't provide the specific functionality that is needed. A dedicated collage section would streamline the process and enhance the theme's customization capabilities.
Additional context
Reference --> Dawn Theme
Is your feature request related to a problem? Please describe.
I believe that our current Shopify theme lacks a dedicated section to showcase customer photos using our products. This absence makes it challenging to build a sense of community and trust among potential customers.
Describe the solution you'd like
I propose the creation of a "Customer Showcase" section on the homepage where we can feature photos submitted by our customers, highlighting how they use our products. This section will not only serve as a visual testimonial but also foster a connection between our brand and our customers.
Describe alternatives you've considered
One alternative is leveraging social media platforms to share customer photos. However, having a dedicated section on our website provides a seamless and integrated experience for visitors. It allows us to curate and showcase a selection of customer photos directly on our site.
Additional context
The current contact form design, implemented with custom CSS, lacks responsiveness on mobile devices, as highlighted in the provided image.
Redesign the contact form using Tailwind CSS to ensure responsiveness across various devices, while minimizing the use of custom CSS files.
Exploring responsive design options within Tailwind CSS to enhance the mobile user experience for the contact form.
Attached image showcases the non-responsive behavior of the current contact form on mobile devices, emphasizing the need for a redesign.
Is your feature request related to a problem? Please describe.
Currently, the cards section in the cards.liquid file only displays a single card per row. This limits the flexibility of the layout. To enhance the user experience, I propose adding a multi-column section with configurable settings.
Describe the solution you'd like
I suggest implementing a multi-column section in the cards.liquid file that allows users to configure the number of cards displayed per row. This would provide more flexibility in designing the layout.
Describe alternatives you've considered
One alternative is to leave the current implementation unchanged. However, this may limit the layout options for users who want to display multiple cards in a row.
Additional context
Current Issue:
Solution:
Design can be found at website https://www.yummygums.com/.
Image of the section is pasted below.
This issue involves integrating schema into the [Section Name] as per the design specifications of the Skeleton Shopify Theme. Add the file with the name [section-name].liquid to the sections folder if it does not exist already. This file will contain the schema for the [Section Name] section. The schema should be implemented according to the design specifications and allow for the necessary customization and input settings as identified in the design. The schema should also be tested and functional both on desktop and mobile views. Ensure that the code follows the project's coding standards and best practices. Any logical inconsistencies in the design should be addressed and standardized for end-user flexibility.
Before starting on this issue, please refer to our Milestone 1: Schema Integration Documentation. This guide provides detailed steps and resources to assist you in this task.
/attempt below.Is your feature request related to a problem? Please describe.
I am eiming to enhance the content within the en.default.json file to include new data that is vital for our platform's functionality and user experience.
Describe the solution you'd like
We need to update the en.default.json file with additional key-value pairs for improved language support or to accommodate new features. This will ensure that our platform remains adaptable and supportive of diverse user requirements.
Describe alternatives you've considered
We've assessed the need for updating the en.default.json file and concluded that it's essential to maintain consistency and comprehensiveness across language resources. Not updating this file might result in inconsistencies or missing information in the platform's user interface.
Additional context
The update aims to reflect changes in user interface texts, error messages, labels, or any other textual content required for proper functioning and clear communication within the platform. This enhancement aligns with our commitment to providing a seamless user experience for our diverse user base.
Before code:
{
"accessibility": {
"skip_to_text": "Skip to main content",
"refresh_page": "Refresh page",
"link_messages": {
"new_window": "Opens in a new window"
}
},
"sections": {
"header": {
"announcement": "Announcement"
}
}
}
After code:
{
"accessibility": {
"skip_to_text": "Skip to content",
"skip_to_product_info": "Skip to product information",
"close": "Close",
"unit_price_separator": "per",
"vendor": "Vendor:",
"error": "Error",
"refresh_page": "Choosing a selection results in a full page refresh.",
"link_messages": {
"new_window": "Opens in a new window.",
"external": "Opens external website."
},
"sections": {
"announcements": {
"previous_announcement": "Previous announcement",
"next_announcement": "Next announcement",
"carousel": "Carousel",
"announcement": "Announcement",
"announcement_bar": "Announcement bar"
},
"header": {
"announcement": "Announcement",
"menu": "Menu",
"cart_count": {
"one": "{{ count }} item",
"other": "{{ count }} items"
}
},
},
}
Describe the bug
Testimonials on the Shopify theme are currently displayed in a column layout. The preferred layout is to have them in a row, accommodating a maximum of three testimonials per row before starting a new one. Alternatively, consider implementing a slider for a large number of testimonials to enhance the user interface.
To Reproduce
Steps to reproduce the behavior:
Expected Behavior:
The testimonials should be presented in rows, with proper styling applied to images to ensure a user-friendly interface. If the number of testimonials is high, a slider functionality should be introduced for better navigation.
Screenshots
Preferred layout is to have them in a row format with some text styling using BEM Methodology.
Desktop (please complete the following information):
Additional context
Add any other context about the problem here.
Is your feature request related to a problem? Please describe.
The sections are not working properly due to missing css files and as the best practices are not followed, thus i propose a solution to use the BEM Methodology for all the sections and i am starting with the carousel--two-rows.
As you have mentioned that all these sections we have made till now are examples or devs for a start, but they aint working or visible properly.
Here as you can see the section is not visible. We can try to use the best practices available and make it working!
Describe the solution you'd like
I propose restructuring the CSS of the carousel--two-rows section using the BEM (Block, Element, Modifier) methodology. This approach will enhance the maintainability and readability of the code, ensuring a modular and scalable CSS structure.
Updating the CSS using BEM methodology will not only fix the current issues with the carousel--two-rows section but will also set a standard for future CSS development within the theme.
Design can be found at website https://www.yummygums.com/.
Image of the section is pasted below.
This issue involves integrating schema into the [Section Name] as per the design specifications of the Skeleton Shopify Theme. Add the file with the name [section-name].liquid to the sections folder if it does not exist already. This file will contain the schema for the [Section Name] section. The schema should be implemented according to the design specifications and allow for the necessary customization and input settings as identified in the design. The schema should also be tested and functional both on desktop and mobile views. Ensure that the code follows the project's coding standards and best practices. Any logical inconsistencies in the design should be addressed and standardized for end-user flexibility.
Before starting on this issue, please refer to our Milestone 1: Schema Integration Documentation. This guide provides detailed steps and resources to assist you in this task.
/attempt below.Is your feature request related to a problem? Please describe.
I've identified a need for a Multirow section to enhance the layout customization options for users. Currently, the theme lacks support for creating multirow sections, limiting the ability to design complex and visually appealing layouts.
Describe the solution you'd like
I propose the addition of a Multirow section feature to the theme. This feature would allow users to create multirow layouts within a section, providing greater flexibility in designing diverse and dynamic content. The goal is to enable users to define multiple rows within a single section, each accommodating distinct content elements.
Describe alternatives you've considered
In considering this feature, alternative solutions such as utilizing existing sections or blocks for layout design were explored. However, a dedicated Multirow section would streamline the process and provide a more intuitive user experience for creating intricate layouts.
Additional context
Attached are wireframes or design mockups showcasing scenarios where the Multirow section would be beneficial. This feature request aims to address a gap in the current layout customization options and offers an opportunity to elevate the theme's usability for a diverse range of users.
Is your feature request related to a problem? Please describe.
The current implementation lacks a slideshow section, limiting the ability to showcase dynamic content in a visually appealing manner. A slideshow section would enhance the user experience by allowing for the display of multiple images or content items.
Describe the solution you'd like
I propose adding a slideshow section with the following features:
Describe alternatives you've considered
One alternative is to use external libraries or plugins for slideshows but that may increase the cost and slow down the performance. However, having an internal slideshow section within the project allows for better integration and customization.
Additional context
Slideshow Configuration Settings:
Each Slide Configuration settings:
I would appreciate any suggestions or considerations from you regarding the proposed slideshow section. This includes feedback on implementation details, best practices, or any existing documentations related to this feature.
I believe our Shopify theme could benefit from a modal that displays a greeting message on startup, contributing to a more engaging and personalized user experience.
I propose the addition of a modal component that triggers on startup, delivering a warm greeting to users when they first visit our store.
Considering alternative ways to implement the greeting, such as using a banner or pop-up, but a modal seems more visually appealing and user-friendly.
The modal can include a friendly message welcoming users to our store and an "OK" button for them to acknowledge the greeting and proceed with their shopping experience. This small touch can enhance the overall user engagement and make the browsing experience more enjoyable.
Initiate the theme with the finalized architecture and clean folder structure. check if theme.liquid can be added already.
Design can be found at website https://www.yummygums.com/.
Image of the section is pasted below.
This issue involves integrating schema into the [Section Name] as per the design specifications of the Skeleton Shopify Theme. Add the file with the name [section-name].liquid to the sections folder if it does not exist already. This file will contain the schema for the [Section Name] section. The schema should be implemented according to the design specifications and allow for the necessary customization and input settings as identified in the design. The schema should also be tested and functional both on desktop and mobile views. Ensure that the code follows the project's coding standards and best practices. Any logical inconsistencies in the design should be addressed and standardized for end-user flexibility.
Before starting on this issue, please refer to our Milestone 1: Schema Integration Documentation. This guide provides detailed steps and resources to assist you in this task.
/attempt below.Is your feature request related to a problem? Please describe.
There might be various reasons to incorporate an email sign-up section, such as enhancing user engagement, building a subscriber base, or disseminating newsletters or updates to a broader audience.
Describe the solution you'd like
The feature request would entail the addition of an email sign-up section, typically found on websites or platforms. This section would enable users to input their email addresses voluntarily to subscribe to newsletters, receive updates, or access exclusive content.
Describe alternatives you've considered
Several alternatives might exist depending on the specific needs and context. These could include using third-party newsletter services like Mailchimp, integrating social media sign-ups, or employing pop-ups to prompt users to subscribe.
Additional context
Reference -->dawn theme
Is your feature request related to a problem? Please describe.
Currently, the card section in our theme seems not proper.
As you can see, the image, text, etc is not visible properly for the user.
Describe the solution you'd like
I propose redesigning these cards using Tailwind CSS to improve visibility and enhance user experience. A visual concept for the new design is available in the attached image. The new design features more clearly visible content, potentially improving both aesthetics and functionality.
Creating a block of these cards would be helpful and can enhance the user experience.
They can look like:
Additional context
The redesign aims to make the card section more user-friendly and visually appealing, aligning with our theme's overall aesthetic. Additional context or specific requirements for the redesign can be provided as needed.
Is your feature request related to a problem? Please describe.
The current implementation lacks schema integration for the “collection list” section, limiting its flexibility and data organization.
Describe the solution you'd like
Integrate a robust schema for the "collection list" section to enable structured data representation. This will enhance customization, compatibility with various data sources, and overall data organization.
Describe alternatives you've considered
Considered alternatives include exploring different data organization methods within the "collection list." However, schema integration is favored for its ability to provide a standardized and extensible solution.
Additional context
Reference --> dawn theme
Is your feature request related to a problem? Please describe.
The problem is related to image-banner.liquid file. The current image banner on the Shopify theme is not styled according to the Block Element Modifier (BEM) methodology, which may lead to inconsistency in design and code maintainability.
Describe the solution you'd like
Revise the image-banner.liquid file to implement BEM methodology, ensuring that the CSS styling and HTML structure are aligned with BEM best practices for a cleaner, more maintainable codebase.
Screenshots:
Right now it looks like:
The image banner should look like:
Specific Changes Requested:
Additional Context:
The image banner is a focal point on the page, and its presentation directly impacts user engagement. The refactoring and styling efforts should prioritize responsive design and accessibility to enhance user experience across devices.
Describe the bug
We can find many errors while we run shopify theme check command in our terminal or we can see them in the github actions as well.
To Reproduce
Steps to reproduce the behavior:
shopify theme check or else visit the Github Actions of our repository.Screenshots
In github actions we can see the annotations present:
There are 30 notices and 6 warning which we can solve right now!
Files needed to be changed:
sections/map.liquid
[SchemaJsonFormat] JSON formatting could be improved
sections/notification-bar.liquid
[SchemaJsonFormat] JSON formatting could be improved
sections/carousel--two-rows.liquid
[DeprecatedFilter] Deprecated filter img_url, consider using image_url
sections/dev__background.liquid
SchemaJsonFormat: JSON formatting could be improved.
sections/dev__flex-box.liquid
SchemaJsonFormat: JSON formatting could be improved.
and other errors which we can view in github actions!
We can also solve the Schema JSON Formatting notice errors(there are 30 notices):
Out of those 30 notices, 6 notices are of these type:
Formatting JSON schema is must to remove this error.
For all the template errors:
We'll need to add those required files as mentioned (From my perspective we should not add those files and validate the JSON right now, but we can solve the other errors which are mentioned above):
error: MissingRequiredTemplateFiles: 'templates/gift_card.liquid' or 'templates/gift_card.json' is missing.
error: MissingRequiredTemplateFiles: 'templates/customers/account.liquid' or 'templates/customers/account.json' is missing.
error: MissingRequiredTemplateFiles: 'templates/customers/activate_account.liquid' or 'templates/customers/activate_account.json' is missing.
error: MissingRequiredTemplateFiles: 'templates/customers/addresses.liquid' or 'templates/customers/addresses.json' is missing.
error: MissingRequiredTemplateFiles: 'templates/customers/login.liquid' or 'templates/customers/login.json' is missing.
error: MissingRequiredTemplateFiles: 'templates/customers/order.liquid' or 'templates/customers/order.json' is missing.
error: MissingRequiredTemplateFiles: 'templates/customers/register.liquid' or 'templates/customers/register.json' is missing.
And after adding those files we will also have to Validate the JSON as mentioned:
templates/cart.json: error: ValidJson: Invalid syntax in JSON.
templates/collection.json: error: ValidJson: Invalid syntax in JSON.
templates/page.json: error: ValidJson: Invalid syntax in JSON.
templates/product.json: error: ValidJson: Invalid syntax in JSON.
templates/search.json: error: ValidJson: Invalid syntax in JSON.
Desktop (please complete the following information):
Additional context
The majority of the errors stem from JSON schema formatting issues across various liquid files. Deprecated usage of the img_url filter should be replaced with image_url. Required template files for gift cards and customer accounts are missing and need to be added. Once these files are added, the JSON within them needs to be validated to ensure proper syntax.
Conclusion
To maintain a high standard of quality for the Shopify theme, it's imperative to address all identified issues promptly. Rectifying the JSON schema formatting, updating deprecated filters, adding missing template files, and ensuring JSON syntax validity are essential steps towards a clean theme check pass. These fixes will enhance the theme's stability, compatibility, and overall performance, ultimately leading to a better end-user experience.
Is your feature request related to a problem? Please describe.
The current schema lacks support for effective integration of the "image with text overlay" section, leading to limitations in presenting content seamlessly. This hinders the overall user experience and design flexibility.
Describe the solution you'd like
I propose the integration of a dedicated schema for the "image with text overlay" section. This schema should include fields for image upload, text input, and styling options for overlay text. Additionally, the schema should allow customization of overlay position, font styles, and background transparency to enhance creative control.
Describe alternatives you've considered
Some users may use alternative sections or widgets to emulate the "image with text overlay" effect. However, this often results in a less intuitive and cohesive design.
Additional context
Reference Link --> airthemeone
Is your feature request related to a problem? Please describe.
The default notification text persists on the screen even after the user edits the notification text. This behavior could lead to confusion, as the default text should not be displayed when the user has provided custom content.
Describe the solution you'd like
Introduce conditional statements in the Liquid code to handle the display of notification text. If the user has edited the notification text, display the user's custom text; otherwise, show the default notification text. Additionally, add a URL schema to allow users to input a custom URL for the notification link. Finally, introduce a subheading notification text for additional information.
Describe alternatives you've considered
An alternative approach could be to clear the default notification text when the user provides custom text. However, using conditional statements provides more flexibility and ensures a smooth transition between default and custom content.
Additional context
The https://www.yummygums.com/ has a notification bar like this
Design can be like with schemas for notification_text, url and sub_notification_text
We aim to add/extend the dev__position section capabilities to include comprehensive positioning controls, similar to those found in advanced web builders like Webflow. The section should provide users with the ability to configure CSS position properties such as static, relative, absolute, fixed, and sticky, as indicated in the attached mockups.
Acceptance Criteria:
Required Changes:
dev__position section on the existing dev__multi-purpose section.Notes:
dev__position section should follow the intuitive layout of the dev__multi-purpose section for consistency and user-friendliness.Resources:
Mockup images for positioning controls:
Webflow's editor link for feature comparison and UX insights.
dev__multi-purpose section as the foundation: GitHub - dev__multi-purpose.
Is your feature request related to a problem? Please describe.
Currently, the header section's logo is not resizable, and the background color is statically set to gray, which limits branding customization for store owners.
Describe the solution you'd like
Logo Resizing: Introduce a slider within the theme settings to allow users to resize the logo easily.
Background Color Picker: Implement a color picker option for the header background to provide more flexibility in matching the store's brand colors.
Expected Behavior
The logo should be adjustable with a range of predefined sizes for better visual compatibility across different devices.
Users should be able to choose any color for the header background, enhancing the store's visual appeal and brand consistency.
Screenshots:
On default, it will show you the shop name as logo:
Logo resized to a smaller dimension:
Logo resized to a larger dimension:
Also, the color picker to be added as to choose a bg color for the header.
🚀All other features present remains the same!
Is your feature request related to a problem? Please describe.
Our current Shopify theme lacks the flexibility to easily incorporate rich text sections. This limitation restricts our ability to create engaging and dynamic content on various parts of our website, hindering our efforts to deliver a compelling user experience.
Describe the solution you'd like
We are seeking the implementation of a user-friendly feature that enables the seamless integration of rich text sections within our Shopify theme. This would empower our team to effortlessly enhance product pages and other sections with diverse and visually appealing content, contributing to a more immersive online shopping experience.
Describe alternatives you've considered
While custom HTML is a potential workaround, its complexity poses a barrier for our team members without technical expertise. We need a solution that allows for easy content updates and customization without requiring advanced coding skills.
Additional context
Drawing inspiration from the Dawn theme, we aspire to replicate its user-friendly approach to incorporating rich text sections. By implementing this feature, we aim to align our website with modern design standards and provide our customers with a more engaging and visually appealing online environment.
Reference --> Dawn Theme
Currently, our Shopify theme notification bar's design needs improvement for a better user experience.
I aim to address these challenges by designing a visually appealing notification bar using Tailwind CSS. Tailwind will allow for efficient and flexible styling.The notification will have this basic design and I will try to enhance it more if possible during development.
For the notification bar, alternatives include using other CSS frameworks or manual styling. However, Tailwind CSS is our choice so I will go with it.
By enhancing the notification bar design, I aim to create a more polished and error-free Shopify theme, ultimately improving the user experience for visitors to our store.
Is your feature request related to a problem? Please describe.
I want to implement a custom liquid section similar to the one in the Dawn theme. User cannot add own liquid like dawn theme.
Describe the solution you'd like
The solution involves adding a custom Liquid section to the theme to address the identified issue. This custom section would ideally provide the necessary functionality or content required, aligning with the design and structure.
Describe alternatives you've considered
Alternative solutions may have been explored, such as modifying existing Liquid elements or using built-in features of the platform.
The decision to add a custom Liquid section could be based on the limitations or inadequacies of the available alternatives.
Additional context
Reference -->dawn theme
Is your feature request related to a problem? Please describe.
The current Shopify Skeleton Theme lacks a robust and flexible footer section that can accommodate various content types, such as navigation links, contact information, newsletter sign-up forms, and social media icons. Users often struggle to customize the footer to match their brand's aesthetic and functional requirements.
Describe the solution you'd like
I would like a footer section implemented that is highly customizable with multiple columns for different content types. The footer should allow easy configuration of text, links, newsletter sign-up, and social media through the theme settings.
Describe alternatives you've considered
An alternative solution could be to use a pre-designed footer template. However, this might limit the customization options and not cater to specific business needs. Therefore, a built-in customizable option within the theme is preferred.
Additional context
The attached image shows a multi-column footer layout with distinct sections for company information, product range, vitamin info, and newsletter subscription. This layout should serve as a template for the customizable footer section in the theme.
Reference footer from : Yummygums
Is your feature request related to a problem? Please describe.
The Shopify theme is lacking the feature of customize configuration settings for adding liquid code for eg. dawn/custom-liquid. And also lacks the ability to customize section padding (both top and bottom) in a straightforward manner. Users often require fine-grained control over the spacing within sections.
Describe the solution you'd like
I propose adding a feature to allow custom liquid with section padding. This would involve providing configuration settings for both top and bottom padding within individual sections. This feature would enhance the customization options available to users.
Describe alternatives you've considered
One alternative is to use external CSS for adjusting section padding. However, having an internal configuration option provides a more user-friendly and integrated solution.
Additional context
Reference image of dawn theme:
Is your feature request related to a problem? Please describe.
I would like to propose the addition of a GitHub Action for theme checks in this repository. Theme checks are crucial for ensuring the quality and compliance of Shopify themes.
Describe the solution you'd like
Performing theme checks automatically as part of the CI/CD process helps catch issues early, ensuring that only high-quality and compliant themes are deployed.
I will be using the shopify/theme-check-action@v1 GitHub Action, which is designed to perform theme checks for Shopify repositories.
- name: Theme Check
uses: shopify/theme-check-action@v1
with:
token: ${{ github.token }}
The with field is used to provide input parameters to the action.
token: ${{ github.token }}: This line passes the GitHub token to the theme check action. The github.token is an automatically generated token that provides the necessary permissions for the action to access the repository.
Describe alternatives you've considered
Additional context
We need to add/enhance the dev__flex-box section with advanced flexbox capabilities, allowing users to manipulate layout properties akin to sophisticated web builders like Webflow. This feature should offer intuitive UI controls for flexbox properties such as display, direction, alignment, justification, gap, and children wrapping, as exemplified in the provided UI mockup.
Acceptance Criteria:
Required Changes:
dev__multi-purpose section as a starting point.Notes:
Resources:
UI mockup image provided for the flexbox controls.
Webflow's editor link for reference.
Documentation and codebase of the dev__multi-purpose section.
The absence of a collapsible content feature in the Shopify skeleton theme limits the ability to efficiently organize and display information, resulting in a less dynamic and user-friendly storefront.
I propose the addition of a collapsible content feature to the Shopify skeleton theme. This feature would enable sections or blocks of content to expand and collapse, providing a more organized and customizable layout for merchants.
Alternative solutions may include using third-party apps or manual coding to achieve collapsible content. However, integrating this feature directly into the theme would streamline the process for users and enhance the overall theme functionality.
Incorporating a collapsible content feature aligns with modern design trends and user experience expectations. Mostly such sections are useful for FAQs section. Below is the reference:
Even, dawn theme has this section.
Is your feature request related to a problem? Please describe.
Our Shopify store lacks a dedicated "Contact Us" section, and I would like to address this by adding a section using the BEM (Block, Element, Modifier) methodology. This will not only enhance the user experience but also improve the maintainability and proficiency of our codebase.
Describe the solution you'd like
Our Shopify store lacks a dedicated "Contact Us" section, and I would like to address this by adding a section using the BEM (Block, Element, Modifier) methodology. This will not only enhance the user experience but also improve the maintainability and proficiency of our codebase.
Describe alternatives you've considered
Several alternatives for implementing the Contact Us section include:
While considering these alternatives, the BEM methodology stands out as a best practice for maintaining a clean and organized codebase.
Additional context
Design can be found at website https://www.yummygums.com/.
Image of the section is pasted below.
This issue involves integrating schema into the [Section Name] as per the design specifications of the Skeleton Shopify Theme. Add the file with the name [section-name].liquid to the sections folder if it does not exist already. This file will contain the schema for the [Section Name] section. The schema should be implemented according to the design specifications and allow for the necessary customization and input settings as identified in the design. The schema should also be tested and functional both on desktop and mobile views. Ensure that the code follows the project's coding standards and best practices. Any logical inconsistencies in the design should be addressed and standardized for end-user flexibility.
Before starting on this issue, please refer to our Milestone 1: Schema Integration Documentation. This guide provides detailed steps and resources to assist you in this task.
/attempt below.Encountered an issue with GitHub Theme Checking. It seems to fail, and I'm looking into resolving it. I suspect it might be related to permissions.
More Details:
Steps to reproduce the behavior:
The theme check should pass without any issues.
I researched this issue and found two potential solutions. One involves adding the necessary permissions attributes to local theme-check.yml. The other solution, which I believe can only be done by maintainers, requires adjusting repository settings. Unfortunately, as a contributor, I don't have access to the settings tab of this repository.
Now, this would be an experiment. So, let's first try to resolve this issue by editing the local theme-check.yml. If the actions fail, then the option can be done by you only. Here are the steps for it:
It seems that adjusting the local theme file takes priority, considering the theme check was working previously, and the issue might be related to recent changes. If the local adjustments don't resolve the issue, we can explore changing repository settings. It's essential to verify the effectiveness of the local changes first.
Also, I have ensured that there are no local theme-check errors in my #82 PR. Here is the snapshot for it:
This information was found on Stack Overflow as a potential solution: Stack Overflow link
Is your feature request related to a problem? Please describe.
The current implementation of header.liquid section provided in the does not follow the BEM methodology, which can impact code maintainability and readability.
Describe the solution you'd like
I would like to propose updating the header in the Liquid section to adhere to the BEM methodology.
Describe alternatives you've considered
An alternative would be to keep the existing class names without applying the BEM methodology. However, adopting BEM would enhance code organization and make it easier to understand the structure and relationships between different elements.
Additional context
It aligns with best practices in front-end development and improves the consistency and clarity of the class naming convention used throughout the project.
Previous code (Without BEM):
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
{{ section.settings.asdas }}
{% schema %}
{
"name": "header",
"class": "shopify-header",
"settings": [
{
"type": "text",
"id": "asdas",
"label": "asdas"
}
],
"presets": [
{
"name": "header"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
After Code (With BEM):
<header class="header">
<nav class="header__nav">
<ul class="header__nav-list">
<li class="header__nav-item"><a href="/" class="header__nav-link">Home</a></li>
<li class="header__nav-item"><a href="/about" class="header__nav-link">About</a></li>
<li class="header__nav-item"><a href="/contact" class="header__nav-link">Contact</a></li>
</ul>
</nav>
</header>
{{ section.settings.asdas }}
{% schema %}
{
"name": "header",
"class": "shopify-header",
"settings": [
{
"type": "text",
"id": "asdas",
"label": "asdas"
}
],
"presets": [
{
"name": "header"
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Is your feature request related to a problem? Please describe.
I've identified the need for a dedicated Map Section. Currently, the theme lacks native support for showcasing the physical location (If Exists) of a store through an integrated map section.
Describe the solution you'd like
I propose the addition of a new Map Section to the theme. This feature would enable store owners with physical locations to easily display their address on the storefront, providing a visual representation of their store's location.
To implement this feature, we need to introduce a new liquid section, map.liquid, that includes an embedded map (e.g., Google Maps). The section should allow customization of the map's dimensions and should be easily configurable through the theme settings.
Describe alternatives you've considered
While considering this feature, I explored alternative approaches such as
Custom HTML Sections: One potential alternative was to rely on custom HTML sections for users to manually embed map code. However, this approach lacks the user-friendly experience that a dedicated Map Section would provide. Users may face challenges in customization and might require technical knowledge.
Custom Theme Modifications: Users could potentially achieve a similar outcome by manually modifying theme files to include a map. However, this approach is less accessible for non-technical users and may result in a lack of consistency across different stores using the theme.
Additional context
This feature request not only addresses a specific use case but also enhances the overall user experience for individuals looking to create visually appealing galleries on their Shopify stores.
Is your feature request related to a problem? Please describe.
There is currently no testimonials section in the Shopify theme, and it's essential to showcase customer reviews to build trust and credibility.
Describe the solution you'd like
I would like to add a testimonials section to the Shopify theme, where customer reviews and testimonials can be prominently displayed. This section should include:
Describe alternatives you've considered
One alternative is using third-party apps, but having a built-in testimonials section within the theme would provide a seamless and integrated experience for store owners.
Additional context
It's important to ensure that the testimonials section is customizable to match the overall theme design. This feature will enhance the user experience, build trust, and potentially increase conversions.
Is your feature request related to a problem? Please describe.
Updating and enhancing this shopify theme by adding a Newsletter section using Tailwind CSS.
Our current Shopify theme has a newsletter section but i think as we have introduced tailwind css into our theme we can integrate it with this section as well as it is more visually appealing to all the users and provides a good user experience.
Describe the solution you'd like
Introduce a new Newsletter section that is visually appealing and matches our branding, utilizing Tailwind CSS for styling. This section should be responsive and integrate seamlessly with our existing design.
Screenshot:
Describe alternatives you've considered
The primary goal is to add the newsletter functionality in a way that aligns with the current UX of our theme.
Additional context
The Newsletter section should include:
Design can be found at website https://www.yummygums.com/.
Image of the section is pasted below.
Hint: https://www.youtube.com/watch?v=nAjR0Oj0J8E(just for better understanding)
This issue involves integrating schema into the [Section Name] as per the design specifications of the Skeleton Shopify Theme. Add the file with the name [section-name].liquid to the sections folder if it does not exist already. This file will contain the schema for the [Section Name] section. The schema should be implemented according to the design specifications and allow for the necessary customization and input settings as identified in the design. The schema should also be tested and functional both on desktop and mobile views. Ensure that the code follows the project's coding standards and best practices. Any logical inconsistencies in the design should be addressed and standardized for end-user flexibility.
Before starting on this issue, please refer to our Milestone 1: Schema Integration Documentation. This guide provides detailed steps and resources to assist you in this task.
/attempt below.The current header.liquid file contains hardcoded navigation links, and it has been suggested to remove hardcoded text entirely for cleaner and more efficient code. To achieve a clean and customizable navbar, creating a new file specifically for the navbar is recommended.
Code :
Output:
Create a new file, possibly named dev_navbar.liquid, dedicated to the navigation bar. This file should include the necessary HTML and Liquid code for a clean navbar. Additionally, it should allow customization of navlinks via the theme editor, eliminating the need for hardcoded text in the header.liquid file.
Alternative solutions include adding all navlinks directly to the header.liquid file. However, this approach may result in cluttered code and reduced efficiency, especially when dealing with multiple if tags. Creating a separate file for the navbar enhances code organization and maintainability.
Considering the advice given by you (Mihir Sir) to remove hardcoded text entirely and make everything customizable via the theme editor. This will contribute to a more streamlined and efficient Shopify theme.
Design can be found at website https://www.yummygums.com/.
Image of the section is pasted below.
This issue involves integrating schema into the [Section Name] as per the design specifications of the Skeleton Shopify Theme. Add the file with the name [section-name].liquid to the sections folder if it does not exist already. This file will contain the schema for the [Section Name] section. The schema should be implemented according to the design specifications and allow for the necessary customization and input settings as identified in the design. The schema should also be tested and functional both on desktop and mobile views. Ensure that the code follows the project's coding standards and best practices. Any logical inconsistencies in the design should be addressed and standardized for end-user flexibility.
Before starting on this issue, please refer to our Milestone 1: Schema Integration Documentation. This guide provides detailed steps and resources to assist you in this task.
/attempt below.We are introducing a new feature for the dev__background section that will enable users to select background colors for their sections. This feature is inspired by the color selection capabilities seen in advanced web builders and will provide a simple yet powerful UI for setting background colors, including support for transparency.
Acceptance Criteria:
Required Changes:
dev__multi-purpose section as a base to build the dev__background section.Notes:
dev__multi-purpose section.Resources:
Is your feature request related to a problem? Please describe.
I propose the addition of global section settings for borders and vertical spacing in order to enhance design consistency and efficiency across our platform. This feature would allow users to set standardized parameters for borders and vertical spacing throughout their projects, ensuring a cohesive and professional appearance.
Describe the solution you'd like
Border styles and corner radius have been tied to a section-wrapper classes, which have been added where needed to each applicable section. Some area that can receive borders are best left with some amount of padding and I've applied this via section-wrapper--padded. Additionally, some sections have full width display modes. Left and right borders and well as corner radius have been excluded in these cases.
Using this approach seemed like a good idea when there were more settings involved, but maybe now with just borders the styles can be applied directly to existing elements in each section.
Borders have been excluded from
Vertical spacing is applied to global spaced-section type classes, but also to section specific stylesheets which override those global classes. I've also included the concept of “safe spacing” in some uses of these spacing variables to ensure some amount of spacing is used in sections where zero spacing isn't ideal.
Describe alternatives you've considered
Manual Section-by-Section Adjustment:
Limited Theme Options:
Partial Global Settings:
Additional context
dawn theme
Is your feature request related to a problem? Please describe.
I've noticed that our Shopify store is currently lacking a dedicated Newsletter section, making it challenging for users to easily sign up for updates and promotions. This feature request aims to address this gap and enhance the user experience on our storefront.
Describe the solution you'd like
I propose the addition of a Newsletter section to our Shopify theme. The section should include a visually appealing form where users can enter their email addresses to subscribe to our newsletter. The form should integrate seamlessly with our email marketing system, and the section's design should align with the overall theme aesthetics.
Describe alternatives you've considered
I've considered a few alternatives for implementing the Newsletter section:
I'm open to suggestions and would like input on the most efficient and effective way to implement this feature.
Additional context
dawn-newsletter
yummygrams
The local Shopify theme check still throws errors, as depicted in the image, even after merging the latest accepted PR. The issues are specifically related to the use of deprecated filters and the need for improved JSON formatting in dev__collage.liquid and custom-liquid.liquid.
I would appreciate a thorough review and update of the code in dev__collage.liquid and custom-liquid.liquid to address the deprecated filters and enhance JSON formatting. This will ensure compliance with the latest standards and resolve the issues raised by the Shopify theme check.
Considering the nature of the errors, revisiting the code to update deprecated filters and refine JSON formatting appears to be the most direct and effective solution. It ensures the code aligns with the current best practices.
Please refer to the attached image for specific error details.
Is your feature request related to a problem? Please describe.
I've identified a need for a dedicated "Blog Posts" section. Currently, the theme lacks native support for showcasing blog content in a structured and visually appealing manner.
Describe the solution you'd like
I propose the addition of a new "Blog Posts" section to the theme. This feature would provide users with an out-of-the-box solution for displaying their latest blog posts on the homepage or other relevant pages.
The "Blog Posts" section should include:
Describe alternatives you've considered
While considering this feature, I explored alternative approaches such as using existing sections or blocks to showcase blog content. However, a dedicated "Blog Posts" section would offer a more intuitive and user-friendly experience for managing and promoting blog content.
Additional context
Reference --> Dawn Theme
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.