How to make Tab Collection on homepage dawn theme display horizontal?

Technical Q&A
,
1

Hi all,

I am trying to customize my website homepage. Using the theme Dawn.

I have added the following code under section and called collectio-tabs.

What I wanted is to have the collection images on a slider and when selecting one collection the products of that collection to appear under them.

Everithing works fine after adding the tabs untilI save the changes (see picture below the code). After that the Collections pictures and the products picture are oriented vertically (see picture below the code).

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{%  if section.blocks.size > 0 %}
  
    
    
    
    {%  if section.settings.useslider %}
      
    
    
    
    {%  endif %}
    {%  if section.settings.title != blank %}
      ## {{ section.settings.title }}
    {%  endif  %}
    
      {%  assign tabContent = '' %}
      

      {%  for block in section.blocks %}
       {%  assign collection = collections[block.settings.collection] %}
        
        - {{ collection.title  }}

          
        

        
        {%  capture content  %}
            
              

               {%- for product in block.settings.collection.products limit: 20 -%}
               - {% render 'card-product',
                        card_product: product,
                        media_aspect_ratio: section.settings.image_ratio,
                        image_shape: section.settings.image_shape,
                        show_secondary_image: section.settings.show_secondary_image,
                        show_vendor: section.settings.show_vendor,
                        show_rating: section.settings.show_rating,
                        show_quick_add: section.settings.enable_quick_add,
                        section_id: section.id
                      %}
               
              {%- endfor -%}
              
             {%  if block.settings.viewall %}
               
                  View all 
               

               {%  endif  %}
            

        {%  endcapture %}
        {%  assign tabContent = tabContent | append: content %}
      {%  endfor %}  
      
   
      {{ tabContent }}
    
  
  
 
    
  
{%  endif %}  
{% schema %}
  {
    "name": "Tabs",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Title"
      },
       {
        "type": "checkbox",
        "id": "useslider",
        "label": "Use slider",
        "default": true
      }
    ],
    "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "limit": 25,
    
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      },
      {
        "type": "checkbox",
        "id": "viewall",
        "label": "Show view all",
        "default": true
      }
    ]
  
    }
  ],
    "presets": [
    {
      "name": "Tabs",
      "blocks": []
    }
  ]
  }
{% endschema %}

Here is how it should look
Here is how it should look794Ă—587 393 KB

Here it is how it shoul look. If I diseble and enable the “use slider” funtion it shows correctly.

After saving or if I refresh it looks like in the picture below.

Here is how it looks after I save
Here is how it looks after I save499Ă—810 120 KB

I hope somone can help me with this!

Thanks in advance

2

Hi @GP83 ,

Can you provide the URL of your store?

3

Hi, thanks for your answer.

https://santoryuresinscollectors.com/

it is protected by password because still under construction. Should I put it here?

4

Hi, @GP83

I will review your site and respond promptly once I have identified the issue!

Best regards.

5

Hi @GP83 ,

Here are some suggestions to troubleshoot and fix the issue:

1. CSS Conflict

The issue of vertical image orientation could be due to conflicting CSS styles, especially related to the slick slider or the way images are displayed within the collection tabs.

Try modifying the CSS rules for the slider and image layout. Specifically, ensure that the images are displayed properly within the slider container.

For example, you might want to explicitly set the display for the image container to flex or grid to maintain the desired layout:

.tabs-img-block {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 300px;
  border-radius: 10%;
  border: 5px #242833;
}

.tabs-img-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8%;
}

2. Ensure Correct Initialization of Slick Slider

Double-check that the slick carousel is properly applied to the collection images after saving. In your script, try adding some debugging logs to ensure that the slider is being initialized:

$(function() {
  {% if section.settings.useslider %}
  function tabSlider() {
    console.log('Initializing slick slider'); // Debugging line
    $('.tabs .product-grid.slick-initialized').slick('unslick');
    $('.tabs .product-grid').slick({
      dots: false,
      arrows: true,
      infinite: false,
      speed: 300,
      slidesToShow: 4,
      slidesToScroll: 4,
      responsive: [
        {
          breakpoint: 1024,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 3,
            infinite: true
          }
        },
        {
          breakpoint: 600,
          settings: {
            slidesToShow: 2,
            slidesToScroll: 2
          }
        },
        {
          breakpoint: 480,
          settings: {
            slidesToShow: 1,
            slidesToScroll: 1
          }
        }
      ]
    });
  }
  {% endif %}
  
  $("#tabs").tabs({
    create: function(event, ui) {
      {% if section.settings.useslider %}
      tabSlider();
      {% endif %}
    },
    activate: function(event, ui) {
      {% if section.settings.useslider %}
      tabSlider();
      {% endif %}
    }
  });
});

4. CSS for Grid Layout

Ensure the slick slider’s container and items are correctly aligned. Add this CSS to adjust the grid layout:

.tabs .product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Adjust columns as needed */
  gap: 20px;
}

.tabs .grid__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

This ensures that the grid items inside the product grid align correctly and that images maintain their intended layout.

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

6

Hi @mageplaza-cs ,

thanks for you answer. I tried the suggested solution, but not much has changed. Unfortunately the slider still display vertically when I save. And even before saving when it display horizontally the collection images do not slide actually.

I placed the suggestion 2 inside my script replacing the part that I wrote before.

Notw it looks like this

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}

{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'template-collection.css' | asset_url | stylesheet_tag }}
{%  if section.blocks.size > 0 %}
  
    
    
    
    {%  if section.settings.useslider %}
      
    
    
    
    {%  endif %}
    {%  if section.settings.title != blank %}
      ## {{ section.settings.title }}
    {%  endif  %}
    
      {%  assign tabContent = '' %}
      

      {%  for block in section.blocks %}
       {%  assign collection = collections[block.settings.collection] %}
        
        - {{ collection.title  }}

          
        

        
        {%  capture content  %}
            
              

               {%- for product in block.settings.collection.products limit: 20 -%}
               - {% render 'card-product',
                        card_product: product,
                        media_aspect_ratio: section.settings.image_ratio,
                        image_shape: section.settings.image_shape,
                        show_secondary_image: section.settings.show_secondary_image,
                        show_vendor: section.settings.show_vendor,
                        show_rating: section.settings.show_rating,
                        show_quick_add: section.settings.enable_quick_add,
                        section_id: section.id
                      %}
               
              {%- endfor -%}
              
             {%  if block.settings.viewall %}
               
                  View all 
               

               {%  endif  %}
            

        {%  endcapture %}
        {%  assign tabContent = tabContent | append: content %}
      {%  endfor %}  
      
   
      {{ tabContent }}
    
  
  
 
    
  
{%  endif %}  
{% schema %}
  {
    "name": "Tabs",
    "settings": [
      {
        "type": "text",
        "id": "title",
        "label": "Title"
      },
       {
        "type": "checkbox",
        "id": "useslider",
        "label": "Use slider",
        "default": true
      }
    ],
    "blocks": [
    {
      "type": "tab",
      "name": "Tab",
      "limit": 25,
    
    "settings": [
      {
        "type": "collection",
        "id": "collection",
        "label": "Collection"
      },
      {
        "type": "checkbox",
        "id": "viewall",
        "label": "Show view all",
        "default": true
      }
    ]
  
    }
  ],
    "presets": [
    {
      "name": "Tabs",
      "blocks": []
    }
  ]
  }
{% endschema %}

I pasted the two CSS in the custimized CSS of Tabs in “Customize theme”.

Was this correct?

Thanks again!

7

Hi @GP83 ,

I would appreciate it if you could grant me permission to edit the theme code, as I am unable to debug and identify the issue.

Best regards.

8

Hi @mageplaza-cs ,

Please send me a request using this code 3729.

Thanks a lot!

GP

9

hi @GP83 ,

My Shopify partner email: anhnct@avadagroup.com . Could you grant me collaborator or staff access so that I can review your theme’s code?

Best regards

10

Hi @mageplaza-cs ,

it looks like you need to send me a collaborator request using the code provided above.

I am new to shopify and I couldn’t find any other optition to grant you access. I don’t have staff on my plan unfortunately.

See below:

"You must provide the collaborator with a request code. The collaborator must enter this code when they submit a collaborator request. Only the Partners who you share the code with can request access to your store. "

Here is the code: 3729

Thanks in advance

11

Hi again @mageplaza-cs ,

have you seen my last message?

I have never received an answer or a collaboration request.

Please let me know if you can help, otherwise no problem I will just diseble the section and look into it in the future.

Best regards,

12

Hi @GP83 ,

I sincerely apologize for the delayed response. Unfortunately, we missed your notification due to an influx of messages at the same time. I had previously submitted a request to edit the theme of your store.

mageplazacs_0-1737084943152.png

Please notify me once you accept my request.

Best regards.

13

Hi @mageplaza-cs ,

thank you for you answer. I have granted you access.

Best regards,

GP

14

Hi @GP83 ,

I have access to your store’s theme editor; however, the “Edit Code” option is missing. This might be due to the permissions granted to my collaborator account.

Could you kindly verify the permissions and ensure that the Themes permission is fully enabled for my account? This will allow me to proceed with the required tasks.

mageplazacs_1-1737361059115.png
mageplazacs_1-1737361059115.png1920Ă—310 142 KB

Best regards

15

Hello,

oh sorry. I have given you permission now.

Thanks

16

Hi @GP83 ,

I have reviewed and modified your store. The issue was caused by a failure to initialize the slider. Please check and let me know if it works as you expected.

17

Hi,
Thanks for your help.
It seems it is still displayed vertically instead of horizontally.

18

Hi @GP83 ,

As I reviewed, it has worked as expected in the preview. Could you please clear your browser cache or check in incognito mode? Kindly let me know the results.

mageplazacs_0-1737600102696.png
mageplazacs_0-1737600102696.png1920Ă—941 307 KB

19

Hello,
I have cleared the cache and opened the website from another PC and from
mobile too… The problem unfortunately persists.
Thanks for your help.
Regards,
GP