Collection Tab Issues ( Dawn Theme Theme )

Store Design
, , , , , ,
1

Hello Everyone!

I have added the Collections tab section through coding. But I need to fix some things.

  1. I want to keep all the fonts in the collection tab as “Americana”.
  2. I want to keep the product layout of the Collection tab like the (Featured Collection). The layout of the first product is fine but the rest are not looking good. This should be fixed in mobile mode as well.
  3. I want to show 2 products in mobile mode. Right now one product is showing.

Please help me. Thank you.

Store: https://dream-candle-lights.myshopify.com/

Password: Admin

  1. Fonts Change

DREAM-CANDLE-LIGHTS.png
DREAM-CANDLE-LIGHTS.png1483×805 198 KB

  1. Product Layout

DREAM-CANDLE-LIGHTS - Copy.png
DREAM-CANDLE-LIGHTS - Copy.png1483×805 176 KB

  1. Show 2 products

476258026_1131847845337260_8461107013690585093_n.jpg
476258026_1131847845337260_8461107013690585093_n.jpg1080×1994 138 KB

I have used this 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 %} {% endif %}
    {% endcapture %} {% assign tabContent = tabContent | append: content %} {% endfor %}
{{ tabContent }}

.tabs .slick-track .grid__item { padding: 0 5px; } .tabs .slick-next { right: 0; } .tabs .slick-prev { left: 0; } .tabs .slick-next,.tabs .slick-prev { transform: none; top: -20px; } .tabs .slick-next::before,.tabs .slick-prev::before { color: #000;} .tabs .slick-slider{ margin: 0 -5px;} .tabs .collection__view-all a{ color: white!important;} .tabs { background: none!important;border: none!important} .tabs.ui-tabs .ui-tabs-nav { background: none; padding: 0; display: flex; justify-content: center; border: none; align-items: center; } .tabs-section h2 { text-align: center; } .tabs.ui-tabs .ui-tabs-nav li { border: none; background: none; } .tabs.ui-tabs .ui-tabs-nav li a { display: flex; flex-direction: column; justify-content: center; align-items: center; color: #ddd; padding: 5px 10px; border-radius: 50px; text-align: center; } .tabs.ui-tabs .ui-tabs-nav li p { padding: 5px 10px; border: 1px solid black; color: black; text-align: center; border-radius: 5px; } .tabs.ui-tabs .ui-tabs-nav li.ui-tabs-active p { background: grey; padding: 5px 10px; border-radius: 5px; border: 1px solid; color: white; } .tabs-img-block { width: 100px; height: 100px; border-radius: 50%; border: 1px solid black; } .tabs-img-block img { border-radius: 50%; width: 100%; height: 100%; object-fit: contain; } .tabs-section .grid--4-col-desktop .grid__item { max-width: 100%; } @media only screen and (max-width: 800px) { .tabs.ui-tabs .ui-tabs-nav { overflow: scroll; justify-content: flex-start; } .ui-tabs-nav { -ms-overflow-style: none; /* Internet Explorer 10+ */ scrollbar-width: none; /* Firefox */ } .ui-tabs-nav::-webkit-scrollbar { display: none; /* Safari and Chrome */ } }

{% 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”: 15,

“settings”: [
{
“type”: “collection”,
“id”: “collection”,
“label”: “Collection”
},
{
“type”: “checkbox”,
“id”: “viewall”,
“label”: “Show view all”,
“default”: true
}
]

}
],
“presets”: [
{
“name”: “Tabs”,
“blocks”:
}
]
}
{% endschema %}

2

Hi

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before 
*/ Font Change */

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

Use our Big Bulk Discount app to boost your sales!(https://apps.shopify.com/big-bulk-discount). Easy to set up and perfect for attracting more customers with bulk discounts. Try it now and watch your revenue grow!