How to modify the "featured product" component?

Store Design
, ,
1

Image 22-7-24 at 4.34 PM.jpeg
Image 22-7-24 at 4.34 PM.jpeg1988×1608 57.4 KB

these are two separate “featured product” components that i want side-by-side, but that is not happening. any ideas on how to do this? i have edited the original shopify code for these components. website: www.koaluxury.com

2

Hello @vishalkhurma

you’ve add that both featured product in separate section. new for each. for that reason, both featured products are showing separately on page.

You need add two or show two products in single section.

for that you need to change code side to show two products in single section.

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Best Regards

Parth ghelani

3

how can i do that, i have tried that but could not make it work. any ideas?

4

Hello @vishalkhurma , Kindly provide me with the code for better comprehension. Also, could you confirm if a for loop was utilized in this code? Upon inspecting the browser, I noticed that the featured product is displayed in distinct sections.

5

ignore this reply, i have posted another reply

6

Hi, sure thanks for the help! i am using broadcast theme and this is the section-product.liquid file i am trying to edit

https://pastecode.io/s/cxuuotsa

appreciate your help!

7

the two featured products are distinct sections, but i want each section to have the ability to show 2 products so that it can be similar to a featured collection. i want to show 4 featured products in total in 2 rows. i cannot use a featured collection because i dont know how to add the add to cart drawer and buy now buttons to that.

8

Hello @vishalkhurma , You wish to display your products in a manner similar to the image below. Are you referring to displaying a specific number of columns and products from the backend?

products.png
products.png1358×592 220 KB

9

yes, i want 2 columns on desktop and 1 on mobile, however i want the same buttons and rating system below those as shown in the screenshot i originally shared. can i modify featured products to make that happen?

10

@vishalkhurma , Kindly review this code and feel free to make any necessary modifications on your end since I do not have access to your store. It is straightforward to display columns and products from the backend.

{%- style -%}
 .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.85 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.85 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
   .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
   .main_cards {
      display: grid;
      grid-template-columns: repeat(var(--columns), 1fr);
      gap: 30px;
    }
  }

{%- endstyle -%}

{% schema %}
{
  "name": "AN cards",
  "tag": "section",
  "class": "AN_cards",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Title"
    },
    {
      "type": "select",
      "id": "heading_alignment",
      "label": "Alignment",
      "options": [
        {
          "label": "left",
          "value": "left"
        },
        {
          "value": "center",
          "label": "center"
        },
        {
          "label": "right",
          "value": "right"
        }
      ],
      "default": "center"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "Padding top",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 2,
      "unit": "px",
      "label": "Padding bottom",
      "default": 0
    },
    {
      "type": "color",
      "label": "Background color",
      "id": "bgcolor"
    },
    {
      "type": "range",
      "id": "desktop_columns",
      "min": 1,
      "max": 5,
      "step": 1,
      "label": "Number of columns on desktop",
      "default": 3
    },
    {
      "type": "range",
      "id": "number_of_cards",
      "min": 1,
      "max": 12,
      "step": 1,
      "label": "Number of cards to show",
      "default": 3
    }
  ],
  "blocks": [
    {
      "name": "Card",
      "type": "Card_collection",
      "settings": [
        {
          "type": "image_picker",
          "label": "Card image",
          "id": "card_image"
        },
        {
          "type": "text",
          "label": "Card title",
          "id": "card_title"
        },
        {
          "type": "richtext",
          "label": "Card description",
          "id": "card_description"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "AN cards",
      "settings": {
      }
    }
  ]
}
{% endschema %}

If this solution is helpful, please consider liking and accepting it.
S.P