how can i made this section on shopify? (dawn theme, spotlight theme )

[amolrand]

[zaczee]

Hi,

We need to write code to develop the section like the screenshot you shared

[amolrand]

which code are you talking about ? section code ?

[ZestardTech]

Hello @amolrand 

Hello there.

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Sections -> Add a new section. 

Create new section file. :- card-block-section.liquid

Add this code.

<div class="card-block page-width">
   {%- unless section.settings.title == blank -%}
    <div class=card-block-info-section-info-section">
      <div class=card-block-info-section-inner-wapper">
        <div class=card-block-info-section-content">
          <h1 class="heading-title">{{ section.settings.title  }}</h1>
          <p class="paragraph-text">{{ section.settings.Paragraph_text  }}</p>
        </div>
      </div>
    </div>
  {%- endunless -%}
  <div class="card-block-block-wapper">
    {%- for block in section.blocks -%}
      {%- unless block.settings.title == blank and block.settings.image == blank and block.settings.link == blank -%}
        <div class="card-block-inner-waper">
            <div class="card-block-content">
                  <div class="img-div">
                     {% if block.settings.image != blank  %}
                      <img class="imgframe" src="{{ block.settings.image | img_url: 'master' }}" alt="LeSportsac">
                     {% endif %}
                   </div>
                   {% if block.settings.title != blank or block.settings.language != blank %}
                    <div class="box-content">
                      <h2 class="box-heading">{{ block.settings.title }}</h2>
                      <p class="box-content">{{ block.settings.content }}</p>
                      <a class="hover-move-up" href="{{ block.settings.link }}" target="_blank" rel="nofollow">{{ block.settings.btn-text }}</a>
                    </div>
                  {% endif %}
            </div>
        </div>
      {%- endunless -%}
    {%- endfor -%}
  </div>
</div>
{% schema %}
{
  "name": "Card block section",
  "class": "section",
  "tag": "section",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading title"
    },
    {
      "type": "richtext",
      "id": "Paragraph_text",
      "default": "<p>Paragraph</p>",
      "label": "Paragraph content"
    }
  ],
  "blocks": [
    {
      "type": "Cardblock",
      "name": "Card block",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Image"
        },
        {
          "type": "text",
          "id": "title",
          "default": "Card block heading",
          "label": "Heading"
        },
        {
          "type": "textarea",
          "id": "content",
          "label": "Content"
        },
         {
          "type": "text",
          "id": "btn-text",
          "label": "Button text"
        },
        {
          "type": "url",
          "id": "link",
          "label": "Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Cardblock",
      "blocks": [
        {
          "type": "Cardblock"
        },
        {
          "type": "Cardblock"
        },
        {
          "type": "Cardblock"
        }
      ]
    }
  ]
}
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}


<style>
  .card-block-block-wapper {
    display: flex;
    flex-wrap: wrap;
}
.card-block-inner-waper {
    width: 33.33%;
    column-gap: 20px;
    padding: 20px;
}
.card-block-inner-waper .imgframe {
    max-width: 100%;
}
.box-heading {
  font-size: 24px;
  font-weight: bold;
}

.box-content p {
  font-size: 16px;
  line-height: 1.5;
}
.hover-move-up {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}
.hover-move-up:hover {
  background-color: #0056b3;
}
</style>

1. In your Shopify Admin go to online store > themes > actions > Customize.

2. Home page -> Add section -> cardblock.

[amolrand]

thanks for your reply and code 🙂

but, I want to put the text and buttons in the image.

[ZestardTech]

Hello @amolrand 

If you have added the code, then send me the store URL, I will check.

[amolrand]

Which url? preview or customized url?

[amolrand]

https://3mdi6nu3wt7nldf1-79516827960.shopifypreview.com

[ZestardTech]

Hello there.

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

.box-content {
position: absolute;
top: 20px;
left: 20px;
}
.card-block-content {
position: relative;
}
.hover-move-up {
background-color: #000;
border-radius: 25px;
padding: 5px 20px;
}
.box-content {
position: absolute;
top: 40px;
left: 20px;
}

[RobArt98]

hey @ZestardTech many thanks for your code.

on the desktop version it looks very good, but not mobile compatible 😞 

may you can let me/us know, how this can be fixed for the mobile version 

maybe is there a possibility to make a carousel out of it or something like this?

waiting for some response, and many many thanks in advance