Hi Shopify Community,
I’m currently working on improving the subcategory section of my store, and I’ve encountered a minor issue that I need help addressing.
When I refresh the page, the subcategory section briefly overlaps or looks misaligned for a second before rendering correctly. This visual glitch creates a less-than-ideal impression during the initial load.
Link:
https://mubimart.com/collections/women-clothing
Has anyone experienced a similar issue, and can you suggest a way to fix this? Any advice or insights would be greatly appreciated!
Thank you in advance for your help!
Best regards,
Hi @Yabiola ,
Thank you for reaching out to assist me. Here’s the requested information to help clarify the situation:
-
Shopify Theme and Version:
I’m currently using the Ella theme, version 6.6.2.
-
Recent Changes or Updates:
I recently made customizations to the subcategory slider functionality. These updates include code adjustments for better navigation and display on both mobile and desktop.
-
Subcategory Section Configuration and Code:
The subcategory section is designed to display categories in a slider format. I’ve implemented custom JavaScript and CSS for navigation (arrows and swipe), and the layout adapts dynamically to the number of categories.
If needed, I’m happy to share specific snippets of the custom code or grant you access to my store for better troubleshooting.
Thank you for your time and support! Please let me know if you need anything further.
Best regards,
Mudassir Mehmood
If you need anything more tell me.
Complete code of this section
Snippets:
/* Main styles for the slider */
.sub-category {
max-width: 1600px;
margin: 0 auto;
padding: 0;
display: flex;
justify-content: center;
}
/* Content area styling */
.content-area {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 10px;
}
.content-area img {
display: flex;
height: 100px;
width: 100px;
margin: 0 auto;
object-fit: cover;
border-radius: 100px;
box-shadow: 0px 0px 11px 0px #00000087;
border: 4px solid #fff;
transition: all 0.2s ease-in-out;
}
.content-area:hover img {
transform: scale(1.1);
}
.content-area h2 {
font-size: 16px;
color: #000;
padding: 5px 0;
font-weight: 400;
font-family: sans-serif;
}
.content-area a {
text-decoration: none;
}
/* Add styling for fewer categories */
.sub-category.few-categories {
display: flex;
justify-content: center; /* Center-align */
gap: 20px; /* Add spacing between items */
}
.sub-category.few-categories .content-area {
flex: 0 0 auto; /* Prevent shrinking */
}
/* Arrow styles */
.slick-prev,
.slick-next {
width: 40px;
height: 40px;
background-color: transparent;
color: #121212;
border: 2px solid #c1c1c1;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
cursor: pointer;
font-size: 24px;
font-family: 'Arial', sans-serif;
text-align: center;
transition: background-color 0.3s ease, color 0.3s ease;
}
.slick-prev {
left: -40px;
}
.slick-next {
right: -40px;
}
.slick-prev:hover,
.slick-next:hover {
background-color: rgba(0, 0, 0, 0.1);
color: #000000;
}
{% for block in section.blocks %}
{% endfor %}
{% schema %}
{
“name”: “Sub Category Slider”,
“settings”: ,
“blocks”: [
{
“name”: “Sub Category Slider”,
“type”: “category-slider”,
“settings”: [
{
“type”: “image_picker”,
“id”: “cat_img”,
“label”: “Select Image”
},
{
“type”: “text”,
“id”: “cat_title”,
“label”: “Select Title”
},
{
“type”: “url”,
“id”: “cat_link”,
“label”: “Select Link”
}
]
}
],
“presets”: [
{
“name”: “Category Slider”
}
]
}
{% endschema %}
Thank you for your assistance. To help you inspect the page and gather the necessary details, please visit the following URL:
https://mubimart.com/collections/women-clothing
Feel free to inspect the page and check anything you need. If required, I’m more than happy to add you as a staff member to my store to facilitate your troubleshooting. Let me know if you need any further information or access.
I appreciate your support and look forward to resolving this issue with your help.