CTA button before check-out

[MAndreiD]

Dear community,

I would like to ask for your assistance.

I own www.romaniandrinks.co.uk and I have the impression that the SCV is pretty low and most people decide to stick to 1-2 products compared to what the compare is experiencing.

One cause could be the lack of clear next steps after a product has been added to the shopping basket. As you can see from the enclosed screenshots, the customers would need to search for the burger menu on the top left to go back to the product menu. I would like on this page to add 1-2 buttons to guide the customers back to the products. 

Could anybody help with the code for such a button? 

[Sonya_2025]

Hey @MAndreiD 

Which button you would like to add?

As you have so many product collections, which collection you would like redirect to from the cart?

[MAndreiD]

hi Sonya,

I would like to buttons in fact: one for alcoholic category and one for non-alcoholic collection

[Sonya_2025]

Hi @MAndreiD 

Pls follow below steps to achieve your needs

1. Open your theme code editor

2.Open file in sections/main-cart-footer.liquid

3. Paste the code below the checkout button

                <a
          href="{{routes.collections_url }}/romanian-alcoholic-drinks"
          id="cart-notification-button-1"
          class="button button--secondary button--full-width"
        >View Alcoholic Drinks</a>
                 <a
          href="{{routes.collections_url }}/romanian-nonalcoholic-drinks"
          id="cart-notification-button-2"
          class="button button--secondary button--full-width"
        >View Non-Alcoholic Drinks</a>

Hope this helps

[MAndreiD]

Sonya, your instructions are super clear and thank you for taking the time to reply. 

Unfortunately I don't have this liquid code as you can see from the attached

[Sonya_2025]

Can you open your main-cart.liquid in the sections and give me a screenshot

[MAndreiD]

{{ 'section-main-cart.css' | asset_url | stylesheet_tag }}
{{ 'component-cart.css' | asset_url | stylesheet_tag }}

<div class="container--large container--vertical-space">
<h1 class="title h2 gutter-bottom--page">{{ 'cart.title' | t }}</h1>
<div class="cart-section {% if cart.items.size == 0 %} cart-section--empty {% endif %}">
<main>

{%- for block in section.blocks -%}

{%- case block.type -%}

{%- when '@app' -%}
<div class="margin-bottom--regular" {{ block.shopify_attributes }}>
{%- render block -%}
</div>

{%- when 'cart-items' -%}
<div {{ block.shopify_attributes }}>
{%- render 'cart-form-page' -%}
</div>

{%- when 'shipping-calculator' -%}

<script src="{{ 'shopify_common.js' | shopify_asset_url }}" defer></script>
<script src="{{ 'component-shipping-calculator.js' | asset_url }}" defer></script>
{{ 'component-shipping-calculator.css' | asset_url | stylesheet_tag }}

<shipping-calculator {{ block.shopify_attributes }}>

<div class="shipping-calculator cart-block element--has-border--body element--border-radius margin-bottom--regular margin-top--regular">
<div class="cart-block__head">
<span>{{ 'cart.shipping_calculator.title' | t }}</span>
</div>

<div class="shipping-calculator__content cart-block__content">

<div class="shipping-calculator__cell">
<label for="country">{{ 'customers.addresses_page.form.country_label' | t }}</label>
<select name="country" id="shipping-estimator-country" data-default="{{ customer.default_address.country | default: section.settings.shipping_estimator_default_country }}" required>
{{- country_option_tags -}}
</select>
</div>

<div class="shipping-calculator__cell" id="address_province_container" style="display: none">
<label for="province">{{ 'customers.addresses_page.form.province_label' | t }}</label>
<select name="province" id="shipping-estimator-province" data-default="{{ customer.default_address.province }}"></select>
</div>

<div class="shipping-calculator__cell">
<label for="zip">{{ 'customers.addresses_page.form.zip_label' | t }}</label>
<input type="text" name="zip" id="shipping-estimator-zip" class="form__field form__field--text" value="{{ customer.default.address.zip }}" required>
</div>

<div class="shipping-calculator__cell">
<button type="submit" data-action="estimate-shipping" class="button button--outline button--regular js-estimate-shipping">{{ 'cart.shipping_calculator.form_button_label' | t }}</button>
</div>

</div>

<div class="gutter--regular shipping-estimator__results" style="display: none;">
<div class="alert alert--error"></div>

<div class="shipping-estimator__results-content" style="display: none;">
<span class="shipping-estimator__results-content-heading text-size--regular"></span>
<ul class="shipping-estimator__results-content-list"></ul>
</div>
</div>

</div>

</shipping-calculator>

{%- when 'related-items' -%}
<product-recommendations {{ block.shopify_attributes }} id="cart-recommendations"
data-url="{{ routes.product_recommendations_url }}?section_id={{ section.id }}&product_id={{ cart.items[0].product_id }}&limit={{ block.settings.products_number }}">
{%- if recommendations.performed and recommendations.products_count > 0 -%}
<div class="cart-product-recommendations">
<div class="cart-holder cart-block cart-block__item--spacing element--has-border--body element--border-radius margin-bottom--regular">
<div class="cart-block__head">
<span>{{ block.settings.title | escape }}</span>
</div>

{%- for product in recommendations.products -%}
<div class="product-related-item" data-js-product-item>

<a href="{{ product.url }}" class="product-related-item__image element--border-width-clamped element--border-radius">
{%- render 'lazy-image-small', image: product.featured_media, aspect_ratio: settings.cart_image_ratio, fit: settings.cart_image_fit -%}
</a>

<div class="product-related-item__text">
<a class="product-related-item__title text-size--large text-weight--bold" href="{{ product.url }}">
<span class="text-animation--underline-thin">{{ product.title | escape }}</span>
</a>
<span class="product-related-item__price">
{%- render 'product-price', variant: product.selected_or_first_available_variant, target: product.selected_or_first_available_variant, product_price_varies: product.price_varies -%}
</span>
</div>

<div class="product-related-item__button">
{%- render 'quick-buy', product: product, button_classes: 'button--small' -%}
</div>

</div>

{%- endfor -%}
</div>
</div>
{%- endif -%}
</product-recommendations>

{%- endcase -%}

{%- endfor -%}

</main>

<aside>
{%- render 'cart-subtotal', type: 'page' -%}
</aside>
</div>
</div>

{% schema %}
{
"name": "t:settings_schema.cart-page.name",
"blocks": [
{
"type": "cart-items",
"limit": 1,
"name": "t:sections.main-cart-items.name"
},
{
"type": "shipping-calculator",
"limit": 1,
"name": "t:sections.local-extra-words.sections.main-cart.blocks.shipping-calculator.name"
},
{
"type": "related-items",
"limit": 1,
"name": "t:sections.local-extra-words.sections.main-product.blocks.related.name",
"settings": [
{
"type": "paragraph",
"content": "t:sections.local-extra-words.sections.main-cart.blocks.related-products.info"
},
{
"type": "text",
"id": "title",
"label": "t:sections.local-extra-words.sections.headings.title",
"default": "Related products"
},
{
"type": "range",
"id": "products_number",
"label": "t:sections.featured-collection.settings.products_number.label",
"min": 1,
"max": 6,
"step": 1,
"default": 3
}
]
},
{
"type": "@app"
}
]
}
{% endschema %}

[Sonya_2025]

ok. Then pls open the cart-subtotal.liquid in the snippets and copy the code out for me to have a check

[MAndreiD]

<div id="AjaxCartSubtotal">

  {%- liquid

    if settings.show_currency_codes

      assign iso_code = localization.country.currency.iso_code | prepend: ' ' 

    endif

  -%}

{%- if type == 'page' and settings.cart_free_shipping -%}

<shipping-notice

data-free-shipping="{{ settings.cart_free_shipping_amount | times: 100 }}"

data-cart-total-amount="{{ cart.total_price }}"

data-show-alert

>

</shipping-notice>

<script src="{{ 'component-shipping-notice.js' | asset_url }}" defer></script>

{%- endif - %}

<div class="cart__details 

{% if type == 'page' %} cart__subtotal-widget element--has-border--body element--border-radius {% endif %}

{% if cart.item_count == 0 %} cart--empty {% endif %}

">

{%- if cart.cart_level_discount_applications != blank -%} 

<div class="cart__subtotal">

<span>{{ 'cart.subtotal' | t }}</span>

<strong class="text-size--xlarge">{{ cart.items_subtotal_price | money | append: iso_code }}</strong>

</div>

<div class="cart__discounts">

<span>{{ 'cart.discounts' | t }}</span>

{%- for discount_application in cart.cart_level_discount_applications -%}

<strong class="text-size--large">{{ discount_application.title }} ( -{{ discount_application.total_allocated_amount | money | append: iso_code }} )</strong>

{%- endfor -%}

</div>

{%- endif -%}

<div class="cart__total">

<span>{{ 'cart.total' | t }}</span> 

<strong class="text-size--heading">{{ cart.total_price | money | append: iso_code }}</strong>

</div>

{%- if settings.cart_notes_enable and type == 'page' -%}

<div class="cart__instructions">

<div class="form-field">

<label for="cartSpecialInstructions">{{ 'cart.note' | t }}</label>

<textarea name="note" id="cartSpecialInstructions" form="cart">{{ cart.note }}</textarea>

</div>

</div>

{%- endif -%}

<div class="cart__shipping text-color--opacity text-size--small">

{%- liquid

if cart.taxes_included and shop.shipping_policy.body != blank

echo 'cart.policies.taxes_included_and_shipping_policy_html' | t: link: shop.shipping_policy.url

elsif cart.taxes_included

echo 'cart.policies.taxes_included_but_shipping_at_checkout' | t

elsif shop.shipping_policy.body != blank

echo 'cart.policies.taxes_and_shipping_policy_at_checkout_html' | t: link: shop.shipping_policy.url

else

echo 'cart.policies.taxes_and_shipping_at_checkout' | t

endif

-%}

</div>

<div {% unless template contains 'cart' %} class="flex-buttons" {% endunless %}>

{%- unless type == 'page' -%}

{%- if settings.cart_drawer_actions contains 'show-view' -%}

<a id="ViewCart" href="{{ routes.cart_url }}" class="button button--regular button--outline">{{ 'cart.view_cart' | t }}</a>

{%- endif -%}

{%- endunless -%}

{%- if settings.cart_drawer_actions contains 'show-checkout' or type == 'page' -%}

<button id="CheckOut" class="button button--regular button--solid" type="submit" name="checkout" form="cart">

{{ 'cart.checkout' | t }}

</button>

{%- endif -%}

</div>

{%- unless template contains 'order' -%}  

{%- if settings.cart_drawer_actions contains 'show-checkout' or type == 'page' -%}

{%- if additional_checkout_buttons and settings.cart_additional_buttons -%}

<div class="additional-checkout-buttons additional-checkout-buttons--vertical">{{ content_for_additional_checkout_buttons }}</div>

{%- endif -%}

{%- endif -%}

{%- endunless -%}

</div>

</div>

[Sonya_2025]

Thanks for your collaboration.

ok. search "CheckOut" button in this file. and copy the code below under the checkout button.

                <a
          href="{{routes.collections_url }}/romanian-alcoholic-drinks"
          id="cart-notification-button-1"
          class="button button--secondary button--full-width"
        >View Alcoholic Drinks</a>
                 <a
          href="{{routes.collections_url }}/romanian-nonalcoholic-drinks"
          id="cart-notification-button-2"
          class="button button--secondary button--full-width"
        >View Non-Alcoholic Drinks</a>

[MAndreiD]

I've added the code but the position of the bottoms is off.

[Sonya_2025]

How about this?

[Sonya_2025 · Accepted solution]

You can do follow steps to achieve this.

1. Update code to below

                <a
          href="{{routes.collections_url }}/romanian-alcoholic-drinks"
          id="cart-notification-button-1"
          class="button button--regular button--outline"
        >View Alcoholic Drinks</a>
                 <a
          href="{{routes.collections_url }}/romanian-nonalcoholic-drinks"
          id="cart-notification-button-2"
          class="button button--regular button--outline"
        >View Non-Alcoholic Drinks</a>

2. At the end of the file. Paste the code to the file

<style>
.button--outline {
  margin-top: 10px
}
</style>

[MAndreiD]

Seems that the buttons don't want to move and I've tried moving the last code before and after the end of the file.

[Sonya_2025]

Where do you would like buttons to move?

[MAndreiD]

Either below "Shopping Cart" headline or between "Product" and "Often bought together"

[Sonya_2025]

Hey @MAndreiD 

If so, you may not put the code into the cart-subtotal.liquid. consider copy the code to main-cart.liquid. like here below the "shopping cart" headline

But I think may be it's better-look to put the buttons together with the checkout.

[MAndreiD]

Thank you for your help Sonya. Much appreciated.

[Van_Nguyen_GSG]

Hi MAndreiD,

If you just need a button like "Continue shopping" to navigate clients back to the "all-products" page, add this code to the cart page/cart drawer and change the href if needed.

<a href="{{ routes.all_products_collection_url }}" class="button">
   Continue shopping
</a>

I hope this helps!

[MAndreiD]

Hello,

I've opened up the cart json and trying to add the code but it doesn't allow. Where should I add it? 

/*
* ------------------------------------------------------------
* IMPORTANT: The contents of this file are auto-generated.
*
* This file may be updated by the Shopify admin theme editor
* or related systems. Please exercise caution as any changes
* made to this file may be overwritten.
* ------------------------------------------------------------
*/
{
"sections": {
"main-cart": {
"type": "main-cart",
"blocks": {
"cart-items": {
"type": "cart-items",
"settings": {
}
},
"related_items_kAMzzY": {
"type": "related-items",
"settings": {
"title": "Often bought together",
"products_number": 3
}
}
},
"block_order": [
"cart-items",
"related_items_kAMzzY"
],
"settings": {
}
},
"featured_collection_7YEe99": {
"type": "featured-collection",
"blocks": {
"price_9wfp3b": {
"type": "price",
"settings": {
}
},
"title_8ibAGR": {
"type": "title",
"settings": {
}
},
"quick_buy_9Vbjp4": {
"type": "quick_buy",
"settings": {
}
}
},
"block_order": [
"price_9wfp3b",
"title_8ibAGR",
"quick_buy_9Vbjp4"
],
"disabled": true,
"custom_css": [
".card {border: 4px solid #90918a;}"
],
"settings": {
"heading": "Discover more products",
"subheading": "",
"show_view_all": false,
"section_heading_layout": "section-heading--left",
"style": "grid",
"layout": "grid-4 grid-portable-3 grid-lap-2 grid-tiny-1",
"products_number": 4,
"collection": "wine",
"section_background_color": "rgba(0,0,0,0)",
"section_heading_color": "rgba(0,0,0,0)",
"remove_margin": false,
"seo_h_tag": "h2"
}
}
},
"order": [
"main-cart",
"featured_collection_7YEe99"
]
}

[MAndreiD]

Sorry, which liquid or json file do I need to add this to?