How can I modify the display of customer addresses on my theme?

Store Design
1

Dear Support,

I’m looking for an easy way to edit how my theme shows the current addresses. I want them to show next to each other so that there is a clear difference between “add a new address” and “return to account details” and the possible addresses of the customers.

How do I go about this? I went to my design of “Customer Addresses” however I cannot edit those specific information via the design settings… Do I need to manually edit the Files and code of the theme? customers/addresses.liquid ?

Thanks in advance for any help!

Kind regards,

Stein

2

@SGX_WheyP

can you please provide screenshot what do want want and more details

3

hi @KetanKumar I’m sorry, I thought I uploaded a screenshot but it didn’t seem to go through.

So what I would like is that the different addresses are more aligned. Now it seems that the theme makes 2 columns and since the new address doesn’t fit on the column 1, it shows it on top right next to the “go back to account details” and “add a new address” (they are showing in Dutch, fyi)

Current:

current.png
current.png665×559 26.5 KB

Prefered (just basic edited the image, to get the idea):

new.png
new.png665×559 25.4 KB

where the titles (name) are better aligned and the addresses are more aligned, buttons like edit/remove are aligned,…

On mobile of course it can just show 1 column, all under each other.

Here is the customers-addresses.liquid:

{% comment %}
  Main view that shows details used by visitors to manage their addresses used in the checkout.

  - https://help.shopify.com/en/themes/development/templates/customers-addresses
{% endcomment %}

{% assign id = section.id %}
{% comment %}Layout{% endcomment %}
{% assign width = 'standard' %}
{% assign padding_top = 40 %}
{% assign padding_bottom = 40 %}
{% comment %}Advanced{% endcomment %}
{% assign css_class = section.settings.css_class %}
{% assign custom_css = section.settings.custom_css %}

{% style %}

  .section__wrapper {
    padding-top: {{ padding_top }}px;
    padding-bottom: {{ padding_bottom }}px;
  }

  {% render 'css-loop',
          css: section_css,
          id: id
  %}
  {% render 'css-loop',
          css: custom_css,
          id: id
  %}
{% endstyle %}

{% comment %} HTML markup {% endcomment %}

Thanks for any assistance, KetanKumar!

1 Like
4

@SGX_WheyP

thanks yes it possible to custom code added your that pages