How to edit the Quick Shop modal in the Empire theme for pre order products?

Store Design
1

I have created a new pre order product layout in the Empire theme for items that are not yet in stock. It simply changes the text of the Add to Cart button to Pre Order, along with some other minor changes.

When I use the Quick Shop button on the preorder items, the preorder button displays correctly, but if I change the variant, the button text changes from Pre Order back to Add to Cart. We sell clothing so practically every product has size variants.

I am using the following piece of code to determine which Quick Shop layout to display.

{% if product.tags contains 'preorder' %}
  	{%
      render 'product.preorder',
      is_product_modal: true,
      select_first_available_variant: settings.select_first_available_variant,
      gallery_aspect_ratio: section.settings.quickshop_gallery_aspect_ratio,
      gallery_thumbnail_position: section.settings.quickshop_gallery_thumbnail_position,
      gallery_image_crop: section.settings.quickshop_gallery_image_crop,
      gallery_click_to_zoom: 'disabled',
      gallery_hover_zoom: section.settings.quickshop_gallery_hover_zoom
  	%}
  {% else %}
    {%
      render 'product',
      is_product_modal: true,
      show_dynamic_checkout_button: settings.show_dynamic_checkout_button,
      select_first_available_variant: settings.select_first_available_variant,
      gallery_aspect_ratio: section.settings.quickshop_gallery_aspect_ratio,
      gallery_thumbnail_position: section.settings.quickshop_gallery_thumbnail_position,
      gallery_image_crop: section.settings.quickshop_gallery_image_crop,
      gallery_click_to_zoom: 'disabled',
      gallery_hover_zoom: section.settings.quickshop_gallery_hover_zoom
    %}
  {% endif %}

Presumably there is something I need to change in the product.preorder section, but I can’t figure out what it is.

If anyone could help me out with this, it would be much appreciated.

2

Hi @bumbles ,

Because when you change variant it will automatically call back Javascript text so the text will change to ‘Add to cart’.

Please send me the code of the whole product.preorder section file, I will help you to check it.

3

Thanks for replying, any help you can give will be much appreciated.

Here is the product.preorder.liquid file. The preorder template works fine on the product page, it is only when I use the quickshop modal that the button reverts to the original text.

{% comment %}
   product {Object}
    The product object

   layout {String}
    The layout type

   is_product_modal {Boolean}
    Is the snippet being loaded in a Quick shop

   is_featured_product {Boolean}
    Is the snippet being loaded in a Featured product

   onboarding {Boolean}
    Is there onboarding content

   show_dynamic_checkout_button {Boolean}
    If true, show dynamic checkout button

   select_first_available_variant {Boolean}
    If true, select the first available variant

   gallery_aspect_ratio {String}
    This is the gallery aspect ratio, can be one of 'natural', 'short', 'square', 'long'

   gallery_thumbnail_position {String}
    This is the gallery thumbnail position, can be one of 'below', or 'left'

   gallery_image_crop {Boolean}
    Whether to crop images

   gallery_hover_zoom {String}
    This is the hover zoom setting, which is either 'disabled', 'separate', or 'replace'

   gallery_click_to_zoom {String}
    This is the click to zoom setting, which is either 'disabled', 'mobile', 'desktop', or 'always'
{% endcomment %}

{% assign onboarding = onboarding | default: false %}
{% assign layout = layout | default: nil %}
{% assign is_featured_product = is_featured_product | default: false %}

{% if layout == 'layout--three-col' %}
  {% assign product_form = true %}
{% else %}
  {% assign product_form = false %}
  {% for block in section.blocks %}
    {% case block.type %}
      {% when 'form' %}
        {% assign product_form = true %}
    {% endcase %}
  {% endfor %}
{% endif %}

{% liquid
  assign selected_variant = product.selected_variant

  if product.variants.size == 1 or select_first_available_variant or product_form == false
    assign selected_variant = product.selected_or_first_available_variant
  endif
%}

{% assign compare_at_price = selected_variant.compare_at_price %}
{% assign price = selected_variant.price %}
{% assign sku = selected_variant.sku %}
{% assign product_available = product.available %}

{% comment %}For a potential divider in the product.description we need to split the content{% endcomment %}
{% assign readmore_split = product.description | split: '' %}

{% if onboarding %}
  {% assign compare_at_price = 2999 %}
  {% assign price = 1999 %}
{% endif %}

{% assign on_sale = false %}
{% if compare_at_price > price %}
  {% assign on_sale = true %}
{% endif %}

{% assign consistent_saved = false %}
{% capture consistent_savings %}
  {%
    render 'consistent-savings',
    variants: product.variants,
    on_sale: on_sale
  %}
{% endcapture %}
{% if consistent_savings contains 'true' %}
  {% assign consistent_saved = true %}
{% endif %}

{%- capture share_buttons -%}
  {% assign social_image = false %}
  {% if product.featured_image %}
    {% assign social_image = product.featured_image | img_url: '1024x' %}
  {% endif %}
  {% assign social_url = shop.url | append: product.url %}
  {%-
    render 'share-buttons',
    snippet_title: 'general.share_buttons.title',
    social_image: social_image,
    social_title: product.title,
    social_url: social_url
  -%}
{%- endcapture  -%}

{% if tabs_below_product_gallery == true %}
  {{ product_tabs }}
{% endif %}

{% if readmore_split[1] != blank and is_featured_product != true and is_product_modal != true %}
  
    {{ readmore_split[1] }}
  

{% endif %}
4

Hi @bumbles ,

Please send the code of the template file, not the section. I will check it.

5

@LitCommerce

Apologies, hopefully this is what you are looking for.


{% render 'breadcrumbs' %}

{% schema %}
{
  "name": "Product information",
  "class": "product--section section--canonical",
  "settings": [
    {
      "type": "header",
      "content": "Media"
    },
    {
      "type": "paragraph",
      "content": "Learn more about [media types](https://help.shopify.com/en/manual/products/product-media/product-media-types)"
    },
    {
      "type": "select",
      "id": "gallery_aspect_ratio",
      "label": "Aspect ratio",
      "options": [
        { "value": "natural", "label": "Natural" },
        { "value": "short", "label": "Short (4:3)" },
        { "value": "square", "label": "Square (1:1)" },
        { "value": "tall", "label": "Tall (2:3)" }
      ],
      "default": "natural"
    },
    {
      "type": "checkbox",
      "id": "gallery_image_crop",
      "label": "Enable image crop",
      "info": "If disabled, white space will be applied around the image. Has no effect when media aspect ratio is set to natural.",
      "default": false
    },
    {
      "id": "gallery_thumbnail_position",
      "type": "select",
      "label": "Thumbnails position",
      "info": "Desktop only.",
      "options": [
        {
          "value": "below",
          "label": "Below main image"
        },
        {
          "value": "left",
          "label": "Left of main image"
        }
      ],
      "default": "below"
    },
    {
      "type": "checkbox",
      "id": "gallery_video_autoplay",
      "label": "Enable video autoplay",
      "default": true
    },
    {
      "type": "checkbox",
      "id": "gallery_video_looping",
      "label": "Enable video looping",
      "default": true
    },
    {
      "id": "gallery_hover_zoom",
      "type": "select",
      "label": "Roll-over image zoom",
      "options": [
        {
          "value": "disabled",
          "label": "Disabled"
        },
        {
          "value": "separate",
          "label": "Enabled (separate box)"
        },
        {
          "value": "replace",
          "label": "Enabled (replace main image)"
        }
      ],
      "info": "Only applies to desktop screen sizes.",
      "default": "disabled"
    },
    {
      "id": "gallery_click_to_zoom",
      "type": "select",
      "label": "Click to zoom image",
      "options": [
        {
          "value": "disabled",
          "label": "Disabled"
        },
        {
          "value": "always",
          "label": "Enabled"
        },
        {
          "value": "desktop",
          "label": "Enabled on desktop only"
        },
        {
          "value": "mobile",
          "label": "Enabled on mobile only"
        }
      ],
      "default": "always",
      "info": "Changes to \"Tap to zoom\" on mobile."
    },
    {
      "type": "paragraph",
      "content": "For the best zoom results, make sure your images are larger than 1600px."
    }
  ],
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "collapsible-tab",
      "name": "Collapsible tab",
      "settings": [
        {
          "type": "text",
          "id": "collapsible_tab_heading",
          "label": "Heading",
          "default": "Collapsible tab"
        },
        {
          "type": "richtext",
          "id": "collapsible_tab_text",
          "label": "Text",
          "default": "

Use this text to share information about your product.

"
        }
      ]
    },
    {
      "type": "custom-liquid",
      "name": "Custom liquid",
      "limit": 1,
      "settings": [
        {
          "type": "liquid",
          "id": "custom_liquid",
          "label": "Custom liquid",
          "info": "Add app snippets or other Liquid code to create advanced customizations."
        }
      ]
    },
    {
      "type": "description",
      "name": "Description",
      "limit": 1
    },
    {
      "type": "form",
      "name": "Form",
      "limit": 1,
      "settings": [
        {
          "type": "paragraph",
          "content": "Customize form features for the product in the products portion of the theme settings."
        }
      ]
    },
    {
      "type": "price",
      "name": "Price",
      "limit": 1
    },
    {
      "type": "share",
      "name": "Share",
      "limit": 1
    },
    {
      "type": "tabs",
      "name": "Tabs",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "show_product_description",
          "label": "Show product description",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "show_tabs_below_product_gallery",
          "label": "Show tabs below product gallery",
          "info": "Desktop only",
          "default": false
        },
        {
          "type": "header",
          "content": "Tab"
        },
        {
          "type": "text",
          "id": "tab_heading_1",
          "label": "Heading",
          "default": "Tab 1"
        },
        {
          "type": "richtext",
          "id": "tab_text_1",
          "label": "Text",
          "default": "

Use this text to share information about your product.

"
        },
        {
          "type": "header",
          "content": "Tab"
        },
        {
          "type": "text",
          "id": "tab_heading_2",
          "label": "Heading",
          "default": "Tab 2"
        },
        {
          "type": "richtext",
          "id": "tab_text_2",
          "label": "Text",
          "default": "

Use this text to share information about your product.

"
        },
        {
          "type": "header",
          "content": "Tab"
        },
        {
          "type": "text",
          "id": "tab_heading_3",
          "label": "Heading",
          "default": "Tab 3"
        },
        {
          "type": "richtext",
          "id": "tab_text_3",
          "label": "Text",
          "default": "

Use this text to share information about your product.

"
        }
      ]
    },
    {
      "type": "text",
      "name": "Text",
      "settings": [
        {
          "type": "richtext",
          "id": "text",
          "label": "Text",
          "default": "

Text block

"
        }
      ]
    },
    {
      "type": "title",
      "name": "Title",
      "limit": 1
    },
    {
      "type": "vendor",
      "name": "Vendor",
      "limit": 1
    },
    {
      "type": "sku",
      "name": "SKU",
      "limit": 1
    }
  ]
}

{% endschema %}
6

Hi @bumbles ,

Please change code:

{{ ‘product.buttons.add_to_cart’ | t | json }}

=>

‘Pre Order’

before
before927×468 33.9 KB

after
after995×466 33.8 KB

7

@LitCommerce

I managed to get it working, though I had to make the change in the quick shop template rather than the preorder template. Also I nested the entire settings script in an if statement, so the settings would change depending on what tags the product had.

Thank you for your help, I don’t think I would have been able to figure that one out on my own.

:+1:

1 Like
8

Hi @bumbles ,

If you have any further questions, you can contact me.
Happy to help you.

9

Can you send me what you got working? I have empire as well, I’ve followed along, tried all sorts of things and ready to give up.

10

Sure, what have you managed to get working so far?

11

Actually, nothing. I’m on 6.1.0, which should be the newest empire version. I’ve made changes on the main product page, I haven’t tried a duplicate template, which may be my problem.

I change this line

“product_available”: {{ ‘product.buttons.add_to_cart’ | t | json }}, (Like shown in the solution)

In both static-product.liquid and quickshop.liquid

The add to cart button words remain the same.

12

If you tell me exactly what it is you want me to do, then I will try and help you. Are you trying to sell pre-order items?

13

Hello. In empire theme 6.1.0. Change the text to the “Add to Cart” button". Following along with the above, something is still overwriting the text button when I make changes to the code.

Ideally, once I figure this part out. I’ll copy and make a new product page for preorders with this modified button and maybe some disclaimer type of wording. The Preorder sale, will run through the same as a normal sale. Just trying to make a way to lower the number of people buying preorders expecting in stock item shipping times.

14

Sorry for not replying sooner, it has been a busy week.

I was going to do the same as you, and have two different product templates, but in the end, I decided to use tags instead. I was able to customise the product template, and the collection template, so that the button text changes to Pre Order if the product has a “preorder” tag.

Are you familiar with Shopify liquid code? I am guessing you are since you have managed to change the text already. I will show you how I added a Pre Order badge to the collection pages as it is pretty straight forward.

In your snippets, you will find a file called product-badge.liquid. Open this file and, before you make any changes, make a back up copy of this file. Always make back ups.

At the bottom of the file you will see an if statement that decides what badge will appear on the collection page. Place the following code directly above this if statement.

{% for tag in product.tags %}
	{% if tag contains 'preorder' %}
		Pre Order
	{% endif %}
{% endfor %}

This will look for any products with the tag of “preorder” and add a span with the “badge–preorder” class. You will have to go into your CSS file and add this new class. Open the theme.css file and search for “.product__badge–soldout”, you should get two results. The first contains generic rules that apply to all badges. You will need to add in a couple of badge–preorder classes here.

.product__badge--soldout,
.productitem__badge--soldout,
.product__badge--preorder,
.productitem__badge--preorder,
.product__badge--sale,
.productitem__badge--sale,
.hotspot__badge {
  font-style: {{ fonts_type_body_style }};
  font-weight: {{ fonts_type_body_weight_bolder }};
  padding: {{ space_xxx_small | divided_by: 16.0 | append: 'rem' }} 0.3125rem;
  text-decoration: none;
  vertical-align: middle;
}

The second search result contains the custom colours for the Sold Out badge. You should copy this and paste it underneath, and then rename the classes from soldout to preorder. Once you have your preorder classes created, you can add whatever custom colours you want. The soldout colours are set using the theme settings, but you can just use normal css to change the background colour.

.productitem__badge--soldout,
.product__badge--soldout,
.hotspot__badge--soldout {
  color: {{ color_background }};
  background-color: {{ settings.color_text }};
}

.productitem__badge--preorder,
.product__badge--preorder,
.hotspot__badge--preorder {
  color: {{ color_background }};
  background-color: #74C1D2;
}

This won’t change the button text, but I think it is worth doing all the same because it is so easy.

15

To change the button to Pre Order on the product page, you first need to make changes to the static-product.liquid file. Open it and make a back up copy.

You should see a script tag containing a json object, that is followed by a section tag that will render the product.liquid snippet. You should delete this code, and copy in the following.

{% if product.tags contains 'preorder' %}
  

  {% render 'breadcrumbs' %}

  
{% else %}
  

  {% render 'breadcrumbs' %}

  
{% endif %}

Next you need to create a new snippet called product.preorder.liquid. Once this file is created, you need to open the product.liquid snippet and copy all the code from there into the product.preorder snippet. Now you need to make some changes in the preoder.product file.

First search for the following and delete it.

{%
                  render 'product-badge',
                  class_root: 'product',
                  product: product,
                  product_available: product_available,
                  on_sale: on_sale,
                  price: price,
                  compare_at_price: compare_at_price,
                  show_saved: true,
                  include_range: false,
                  selected_variant: selected_variant,
                %}

Next you search for the following line and delete it.

show_dynamic_checkout_button: show_dynamic_checkout_button,

Finally you need to search for “render ‘product-form’,” and replace it with the following.

render 'product-preorder-form',

Now you need to create a new snippet and call it product-preorder-form. This will be a copy of the product-form snippet, so open that and copy all of the code over the the new product-preorder-form snippet.

In the product-preorder-form, search for “{{ ‘product.buttons.add_to_cart’ | t }}” and replace it with Pre Order. This is a span so just type in plain text.

Next search for the following piece of code and delete it.

{% if show_dynamic_checkout_button %}
      {{ form | payment_button }}
    {% endif %}

If you do this right, and if I haven’t forgotten any steps, then the button text should change to Pre Order whenever you add the preorder tag.

16

The last thing you need to change is the quickshop template as this will still show the Add to Cart button. If you don’t have quick shop turned on then you won’t need to worry about this. If you have done the steps above and created the new preorder files, then this will be easy.

First open the quickshop.liquid file, and make a back up copy.

When you open the file you will see a similar layout to the static-product file from above, with a script tag contained a json object, and a section tag.

Delete both the script tag and the section tag, and paste in the following code.

I think that is all the changes I made. I know there are probably much neater ways of doing this, but I am not an expert so this is how I got it to work. If you get stuck or need anything explained, just let me know.

17

Thanks for the info. I was going to start working on this today and decided to download a new theme file to test around with. And Pixel Union Empire 7.0.0 now has a built in “Preorder Feature”.

https://support.pixelunion.net/hc/en-us/articles/5715929609875