Hi,
I created a section called “Tabs” by modifying the code. I have inserted a code snippet and would like to make the following adjustments:
-
Number of products per row:
- Change the number of products displayed in a row on desktop from 4 to 3.
- Change the number of products displayed in a row on mobile from 2 to 1.
-
Styling adjustments:
- Update the grey marker on “Best Sellers” to match my brand color: #633522.
- Change the border surrounding the image circle to match the same color (#633522).
- Adjust the arrow styling:
- Change the arrow color to #633522.
- Increase the arrow size slightly for better visibility.
I appreciate your help!
For reference, I am using the Dawn theme version 8.0.1. Below is the code I am currently using for the “Tabs” section:
{%- if section.blocks.size > 0 -%}
{%- if section.settings.useslider -%}
{%- endif -%}
{%- if section.settings.title != blank -%}
.grid--3-col-desktop {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.grid--1-col-tablet-down {
display: grid;
grid-template-columns: 1fr;
}
{%- endif -%}
{{ section.settings.title }}
{%- endif -%}
{%- assign tabContent = '' -%}
-
{%- for block in section.blocks -%}
{%- assign collection = collections[block.settings.collection] -%}
- {{ collection.title }} {%- capture content -%}
- {% 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 -%}
-
{%- for product in block.settings.collection.products limit: 8 -%}
