Refresh theme adding 2 images with separate buttons

Sharyn2 · October 2, 2025, 3:13am

Hi there, I’d like to know how I can add 2 images with separate container buttons as the below screenshot, I’m using the Refresh 15.4 theme

Sharyn2 · October 2, 2025, 3:36am

This is amazing, thank you so much

Sharyn2 · October 2, 2025, 3:41am

Sorry, how do I customise the colours to my theme exactly?

TheUntechnickle · October 2, 2025, 3:47am

Hey @Sharyn2!

Sure - let me give you a better solution where you can change colors directly from the theme customizer without touching any code.

Updated Solution:

Replace your existing section code with this improved version:

Go to Sections > dual-promo-banner.liquid and replace everything with:

{{ 'section-dual-promo-banner.css' | asset_url | stylesheet_tag }}

<style>
  .dual-promo-banner-{{ section.id }} {
    background-color: {{ section.settings.section_background }};
  }
  .dual-promo-banner-{{ section.id }} .promo-content {
    background: {{ section.settings.content_box_background }};
  }
  .dual-promo-banner-{{ section.id }} .promo-label {
    color: {{ section.settings.label_color }};
  }
  .dual-promo-banner-{{ section.id }} .promo-heading {
    color: {{ section.settings.heading_color }};
  }
  .dual-promo-banner-{{ section.id }} .promo-text {
    color: {{ section.settings.text_color }};
  }
  .dual-promo-banner-{{ section.id }} .promo-button {
    background-color: {{ section.settings.button_background }};
    color: {{ section.settings.button_text_color }};
  }
  .dual-promo-banner-{{ section.id }} .promo-button:hover {
    background-color: {{ section.settings.button_hover_background }};
  }
</style>

<div class="dual-promo-banner dual-promo-banner-{{ section.id }}">
  <div class="dual-promo-container">
    {% for block in section.blocks %}
      <div class="promo-card" {{ block.shopify_attributes }}>
        <div class="promo-image">
          {% if block.settings.image != blank %}
            {{ block.settings.image | image_url: width: 800 | image_tag: loading: 'lazy', class: 'promo-bg-image' }}
          {% else %}
            <div class="promo-placeholder">{{ 'image' | placeholder_svg_tag }}</div>
          {% endif %}
        </div>
        <div class="promo-content">
          {% if block.settings.label != blank %}
            <p class="promo-label">{{ block.settings.label }}</p>
          {% endif %}
          {% if block.settings.heading != blank %}
            <h2 class="promo-heading">{{ block.settings.heading }}</h2>
          {% endif %}
          {% if block.settings.text != blank %}
            <p class="promo-text">{{ block.settings.text }}</p>
          {% endif %}
          {% if block.settings.button_label != blank %}
            <a href="{{ block.settings.button_link }}" class="promo-button">
              {{ block.settings.button_label }}
            </a>
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
</div>

{% schema %}
{
  "name": "Dual Promo Banner",
  "settings": [
    {
      "type": "header",
      "content": "Color Settings"
    },
    {
      "type": "color",
      "id": "section_background",
      "label": "Section Background",
      "default": "#f9f9f9"
    },
    {
      "type": "color",
      "id": "content_box_background",
      "label": "Content Box Background",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "label_color",
      "label": "Label Color",
      "default": "#8b7355"
    },
    {
      "type": "color",
      "id": "heading_color",
      "label": "Heading Color",
      "default": "#4a3728"
    },
    {
      "type": "color",
      "id": "text_color",
      "label": "Description Text Color",
      "default": "#666666"
    },
    {
      "type": "color",
      "id": "button_background",
      "label": "Button Background",
      "default": "#ff9a3c"
    },
    {
      "type": "color",
      "id": "button_text_color",
      "label": "Button Text Color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "button_hover_background",
      "label": "Button Hover Background",
      "default": "#e8852d"
    }
  ],
  "blocks": [
    {
      "type": "promo_item",
      "name": "Promo Banner",
      "settings": [
        {
          "type": "image_picker",
          "id": "image",
          "label": "Background Image"
        },
        {
          "type": "text",
          "id": "label",
          "label": "Label",
          "default": "Hot Season"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Your Heading"
        },
        {
          "type": "textarea",
          "id": "text",
          "label": "Description",
          "default": "Add your description text here"
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Button Label",
          "default": "Shop Now"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Button Link"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Dual Promo Banner",
      "blocks": [
        {
          "type": "promo_item"
        },
        {
          "type": "promo_item"
        }
      ]
    }
  ]
}
{% endschema %}

Update the CSS file:

In Assets > section-dual-promo-banner.css, replace the color-specific rules with this cleaner version:

.dual-promo-banner {
  padding: 40px 20px;
}

.dual-promo-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
}

.promo-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 450px;
  display: flex;
  align-items: center;
}

.promo-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.promo-bg-image,
.promo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-content {
  position: relative;
  z-index: 2;
  padding: 30px;
  margin: 30px;
  border-radius: 12px;
  max-width: 350px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.promo-label {
  font-size: 14px;
  margin: 0 0 10px 0;
  text-transform: capitalize;
  font-weight: 500;
}

.promo-heading {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 15px 0;
  line-height: 1.2;
}

.promo-text {
  font-size: 15px;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.promo-button {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dual-promo-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .promo-card {
    min-height: 400px;
  }
  
  .promo-content {
    margin: 20px;
    padding: 25px;
  }
  
  .promo-heading {
    font-size: 26px;
  }
}

How to Customize Colors Now:

Go to the theme customizer
Click on your “Dual Promo Banner” section
You’ll now see a “Color Settings” section with color pickers for:
- Section Background
- Content Box Background
- Label Color
- Heading Color
- Description Text Color
- Button Background
- Button Text Color
- Button Hover Background
Click any color swatch to open the color picker and adjust to match your brand
Changes appear instantly in the preview

No more digging through CSS files - everything’s right there in the customizer!

Let me know if you need anything else.

Cheers!
Shubham | Untechnickle

Sharyn2 · October 2, 2025, 4:04am

Honestly, you are amazing, thank you so much

I just have a couple of more questions if that’s ok? Here’s a screenshot, if you’re able to help

TheUntechnickle · October 2, 2025, 4:11am

Hey @Sharyn2!

Ah okay! This is happening because of the margin settings and image sizing. Here’re are two options, please try them both:

Option 1: Adjust the CSS

Open Assets > section-dual-promo-banner.css and update these values:

.dual-promo-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;  /* Add this line */
}

.promo-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 450px;
  display: flex;
  align-items: center;
}

.promo-content {
  position: relative;
  z-index: 2;
  padding: 30px;
  margin: 20px;  /* Reduced from 30px */
  border-radius: 12px;
  max-width: 350px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* For mobile - reduce margin even more */
@media (max-width: 768px) {
  .dual-promo-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .promo-card {
    min-height: 400px;
  }
  
  .promo-content {
    margin: 15px;  /* Even smaller margin on mobile */
    padding: 20px;
  }
  
  .promo-heading {
    font-size: 26px;
  }
}

Option 2: Remove Section Background Padding

In Sections > dual-promo-banner.liquid, find the style block and update:

.dual-promo-banner {
  padding: 40px 0;  /* Changed from 40px 20px - removes side padding */
}

Recommended Image Sizes

For best results, use images with these dimensions:

Desktop:

Width: 800-1000px
Height: 500-600px
Aspect Ratio: 4:3 or 16:10

The images should be:

Landscape orientation (wider than tall)
At least 800px wide for crisp display
Good quality JPG or PNG
Under 200KB for fast loading (use compression tools like TinyPNG)

This should eliminate most of that excessive white space. Let me know if you need the updated full CSS file!

Also, please like and mark it as the recommended solution. And, don’t forget to give a shoutout at our email

Cheers!
Shubham | Untechnickle

Sharyn2 · October 2, 2025, 4:28am

Thank you, I tried option 1 and it didn’t work, then I tried option 2 but I can’t find the style block for padding, maybe best if you just can send through the full updated CSS file please

Sharyn2 · October 2, 2025, 4:59am

Are you able to send me the full CSS file please ?

Sharyn2 · October 2, 2025, 5:33am

I found the dual-promo-banner in the assets section no in “sections”

TheUntechnickle · October 2, 2025, 7:45am

Hey @Sharyn2!

Here’s the complete, fixed CSS file. Just replace everything in section-dual-promo-banner.css with this:

.dual-promo-banner {
  padding: 40px 0;
  background-color: #f9f9f9;
}

.dual-promo-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

.promo-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  min-height: 450px;
  display: flex;
  align-items: center;
}

.promo-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.promo-bg-image,
.promo-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo-content {
  position: relative;
  z-index: 2;
  padding: 30px;
  margin: 20px;
  border-radius: 12px;
  max-width: 350px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.promo-label {
  font-size: 14px;
  margin: 0 0 10px 0;
  text-transform: capitalize;
  font-weight: 500;
}

.promo-heading {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 15px 0;
  line-height: 1.2;
}

.promo-text {
  font-size: 15px;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.promo-button {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: background-color 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dual-promo-banner {
    padding: 30px 0;
  }

  .dual-promo-container {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 15px;
  }
  
  .promo-card {
    min-height: 400px;
  }
  
  .promo-content {
    margin: 15px;
    padding: 25px;
  }
  
  .promo-heading {
    font-size: 26px;
  }
}

@media (max-width: 480px) {
  .promo-content {
    margin: 10px;
    padding: 20px;
    max-width: 100%;
  }

  .promo-heading {
    font-size: 22px;
  }

  .promo-text {
    font-size: 14px;
  }

  .promo-button {
    padding: 10px 24px;
    font-size: 15px;
  }
}

Cheers!
Shubham | Untechnickle

Topic		Replies	Views
How can I make my Refresh theme image banner clickable? Store Design customizations , shopify-themes	4	95	July 11, 2023
Making images clickable in color block theme Store Design design	12	79	November 16, 2022
Reveal Text when clicking on Image Banner Store Design	9	87	October 12, 2022
How can I make my image banners clickable again? Store Design design , customizations , css	6	72	November 8, 2022
DAWN THEME Banner image poor quality on desktop after Altering code for separate images mob/desk Store Design	8	55	July 24, 2023

Refresh theme adding 2 images with separate buttons

Updated Solution:

How to Customize Colors Now:

Recommended Image Sizes

Related topics